Skip to main content

Product data display

Choose exactly what product data you wish to display on your store's home page, product lists, and product details pages.

 

Setting up product data display

Choose whether to display each product information field in the list of options, and personalize each item with strikethroughs, customized field names, and more.

 

  1. In Products>Products>Product display data, you can configure how you want to display information on your store's pages and customize their style.
    • Home page (Tab): Manage settings for each home category.
    • Product list (Tab): Manage settings for each product category.
    • Product details (Tab): Choose the data displayed at the top of product details pages.
  2. For Home page (Tab) and Product list (Tab), select the product category you want to configure in the drop-down menu next to Product category.
  3. You can enable fields by selecting Yes in the Display column and rearrange their order. Make field names visible on your store by selecting Yes in the Display field name column.
  4. You can also add new fields by clicking Add field to display additional information. Newly added fields will be available at the bottom of the Basic information section when adding or editing products. Information filled in will be displayed on each page according to the settings in Product data display.
  5. If you enable Price and Available stock, you can strikethrough them or set up replacement text by using the additional settings at the bottom of the page.
    • Strikethrough the MSRP: If product details include the product's MSRP, the MSRP will be displayed with a strikethrough.
    • Strikethrough the price: If the coupon-discounted price or discounted price is displayed, the prices will be displayed with a strikethrough.
      -Coupon-discounted price: Only displayed for coupons that have their Issuance type set as Downloadable coupon in Promotions>Coupons>Create coupon.
      -Discounted price: You can create discounts in Promotions>Incentives>Create incentive.
    • Display replacement text for price (Guest accounts): You can use this setting if Display prices to is set to Customer accounts only in My Store>Store setup>General settings>Products. Text will be displayed when users are not logged in.
    • Display VAT details with price: VAT details will be displayed on the right of the product's price. This setting must be identical to the Display prices as setting in My Store>Store setup>General settings>Products (Tab). Include the provided variable as required.
    • Display discount with discounted price: Discount information will be displayed on the right of the product's discounted price. You can show how much has been discounted with a percentage or monetary discount.
    • Display total discount with fully discounted price: Discount information will be displayed on the right of the product's fully discounted price. If both discounts and coupons are applied to the price, you can display how much has been discounted from the original price using a percentage or monetary value.
    • Display replacement text for available stock: You can display the stock's quantity when stock is available, or display an "out of stock" text when there is no stock using the variables provided by Cafe24. You can also manually change the out-of-stock text.
    • On Products>Products>Product data display>Product details (Tab):
      Show product color: Product's color will be displayed below the product image.
      Show hashtags: When Shopping Curation is in use and hashtags have been added, hashtags will be displayed under the product image.

Using product data display

"I want to increase product demand by emphasizing incentives and discounts!"
"I want to display key information differently for each individual product category!"
"I want accurate product information to be shown right away without the user having to scroll down the product page!"

To appeal to users and increase the attractiveness of products, try displaying your product details in the following ways to encourage clicks and purchases.

Usage example ① How to make discounted products stand out on your store's home page

By displaying the price before and after the discount, customers can recognize price discounts at a glance.

This can help customers get a greater sense of the discount amount which can then have a direct impact on your sales.

On your store's home page, apply strikethrough on the original price and place it next to the discounted price where the product's price is displayed.

  1. Go to Products>Products>Product data display>Home page (Tab).
  2. Set the Display setting to Yes for Coupon-discounted price, Discounted price, and Discounted price (for customer accounts).
  3. Under Additional settings, set Strikethrough the price to Yes, and click Save.
    (Strikethrough is not applied to the price of products that are not discounted.)
    Note: If you want to display the amount discounted, you can set Display discount with discounted price to Yes and customize the text.

By displaying the original price and discounted price together, you can emphasize the scale of the available discounts.

Usage example ② How to highlight information differently for each product category

  • When you want to highlight the various colors available for a product.
  1. Go to Products>Products>Product data display>Product list (Tab).
  2. Select the Product category you want to configure.
  3. Make sure Color is set as Yes. You can set Display to No for fields you do not want displayed. Click Save after you are done.

Note: If you want to display the product's main color or best option separately, click Add field. Enter the field name in Field name in text, set Display field to Yes, and click Save. The newly added field will now be available under Basic information when adding or editing products. You can use this method to display additional details for individual product categories pages.

  • When you want to highlight products that are low in stock in a category that automatically displays products with the highest number of orders.
  1. Go to Products>Product layout>Smart Layout and select the product category you want to automatically display. Make sure Display conditions is set to Product data, select No. orders (high-low) and click Save.
    For more information, refer to the Smart Layout user guide.
  2. Go to Products>Products>Product data display>Product list (Tab).
  3. Select the Apply different settings by product category checkbox next to Product category, and change Apply common settings to Apply different settings by section. Select the product category previously selected in Smart Layout and click View fields.
  4. Set the Display setting to Yes for Available stock. Set Display field name to Yes and select an eye-catching color.
  5. Under Additional settings, configure the Display replacement text for available stock setting as you want, and click Save.

Now you can highlight various products for each individual category.

 

Usage example ③ How to display product details at the top of a product details page

When a customer enters a product details page from your store's home page or product category page, you can display the product's key information at the very top of the page so the customer does not have to scroll down.

Display information such as "Brief description," "Manufacturer," "Product material," and more.

  1. Go to Products>Products>Product data display>Product details (Tab).
  2. Set the Display setting to Yes for product details (Brief description, Manufacturer, Product material, Brand, etc.) you want to display at the top of your store's product details pages.
  3.  If discounts are being offered, set the Display setting to Yes for Coupon-discounted price, Discounted price, and Discounted price (for customer accounts). You can also highlight your discounts by setting Strikethrough the price to Yes under Additional settings. Click Save when you are done.

Note: If you want to display additional information other than what is provided in the settings, click the Add field button. Enter the field name, set Display field to Yes, and click Save. The newly added field will now be available at the bottom of the Basic information section when adding or editing products. You can use this method to display additional details for individual product details pages.

Try displaying key information at the top of product details pages to limit the amount of scrolling customers have to do.

Prev Next
Was this page helpful?
Update
Related Guides
On this page