Skip to main content
Manage your template: Product Item

In this article, we show you how to customize your Product Item in your template.

Connell Nguyen avatar
Written by Connell Nguyen
Updated over a week ago

📖 In this article, we will show you how to use Turbo's Visual Editor to edit your product item presentation.

⚠️ This feature is applied to customers using the Boost app's TURBO and template version 1.6.1 and above.


To customize Product items

Follow these steps:

  1. From the app’s dashboard, click on the Integration icon > Shopify integration.

  2. Select the template you want to modify, then click on Customize or Add new template to open the Visual Editor tool.

  3. Then, Click on the Product Item icon in the Icon sidebar to open the Product Item panel.

Product item overview.png

Customizable options

Layout

In the Layout panel, you can customize the following attributes of your items:

2.1 Layout.png

1. Product image aspect ratio

💡 In images, the aspect ratio is the width-to-height ratio.

For example, an image with a size of 200 pixels by 400 pixels has an aspect ratio of 1:2.

There are 5 options:

  • Auto (equal height)

  • Natural (adapt to image)

  • Square (1:1)

  • Portrait (2:3)

  • Landscape (4:3)

2. Crop image position

There are 3 options for you to choose the crop image position:

  • Top

  • Center

  • Bottom

This setting will not be available if you enable the Natural setting in the Product image aspect ratio.

3. Hover effect

  • Hover effects are one of the most commonly used CSS effects in web design, modifying an element when it is hovered over.

  • To use the hover effect properly, you can create great attention-grabbing visuals to assist with usability and encourage the click-through rate on the Call to Action buttons.

  • There are 4 options for you to choose the effect when the shoppers hover over the image:

    • None: nothing is changed when hovered.

    • Show second image: it will show the second image of the media list in the product’s Shopify admin when hovered

    • Zoom in: the image is zoomed in when hovered.

    • Show second image and zoom in: a combination of Show second image and Zoom in effects when hovered.

4. Product info alignment

  • You can customize the alignment for all the elements added to the Product information section. There are 3 options:

    • Left

    • Center

    • Right

  • Click the Save button to save all the changes you have made.


Product label

Left sidebar.png
  • Sale label: When enabled, products on sale will be labeled to capture buyers' attention.

  • Sold-out label: If you choose the "show out-of-stock products" option in your product list, this label will mark the sold-out products.

  • Custom label by tag: To enable this label, ensure the target products are tagged with the syntax pfs:label-[Desired label].

💡 For example, with the tag pfs:label-New Arrivals, the product label on the front store will appear as New Arrivals.

1. Lable shape

To change the label shape. There are 4 options:

  • Rectangle

  • Rounded rectangle

  • Capsule

  • Circle

2. Label text

To change the text of the Sale label or Sold-out label, click on Settings (gear icon) >Translation > Products tab > Product item

  • You can type:

    • {{saleAmount}} to show numerical money value (e.g. $10)

    • {{salePercent}} to show percentile value (e.g. 20%)

Screenshot 2024-05-16 at 10.49.33.png

Product price

Product Price is a mandatory element for the display of your product. Most themes will have this element added by default. For example:

Screenshot 2024-06-10 at 08.29.24.png

In our visual editor, there are four settings for displaying product prices:

  • Price: Show the original price.

  • Sale price: Show an alternative style for the original when a product has a Compare-at price.

  • Compare-at price: Show the discount price.

  • Saving display: Show the sale price and discount price in the same line.

Styling configuration

Left sidebar.png

General settings:

  • Compare-at price display:

    • If your product is on sale, you can decide where to display its discount cost and the original price. There are four options:

      • Right

      • Left

      • Top

      • Bottom

  • Show cents at superscripts:

    • This setting allows you to make your product price’s cents superscript. For example, $24.92 is 24 US dollars and 92 cents, if this option is ticked, it should look like this:

      Screenshot 2024-06-10 at 08.32.15.png

      Savings display

      If your product is on sale, you can gain your customer’s attention by enabling this setting to make it more visible in your product list:

      Screenshot 2024-06-10 at 09.21.59.png

      Once it’s enabled, you can customize these settings below:

      • To change the text of multi-variant price, go to the Settings icon >Translation > Products tab > Product item

      • Savings text: Customize what you’d like to display in your Savings text.

        Screenshot 2024-06-10 at 09.20.32.png

      • {{saleAmount}} to show numerical money value (e.g. $10)

      • {{salePercent}} to show percentile value (e.g. 20%)

  • Change multi-variant price:

    • To change the text of multi-variant price, go to the Settings icon >Translation > Products tab > Product item

      Screenshot 2024-06-10 at 09.19.38.png

    • From {{minPrice}}: The price range will be displayed as From <min price>

    • {{minPrice}} - {{maxPrice}}: The price range will be displayed as <min price> - <max price>

💡

  • {{minPrice}} and {{maxPrice}} stands for the minimum price and maximum price respectively.

  • These only apply to products that have variants with different prices.


Swatches

Swatches are a feature that allows customers to choose between different product options, such as color or size, right on the search results page.

  1. How does ‘Swatch by Color & Image’ work?

    • After you have set up your product’s variants within Shopify Admin:

      image.png
    • Upon reading the variant names you have specified (in this example, “Black”, “White” and “Sky blue”), the theme will look for either an HTML color name or a .png image file in Contents > Files with a filename-friendly version of the variant name.

  2. Naming your swatch files

    • For Color Swatches, based on the example case above, this is how you name your swatches to make them work properly with our visual editor later:

      • Black swatches should be named black.png

      • Sky blue swatches should need to be named sky-blue.png

      • White swatches should be named white.png

        To sum up, we have this formula: colorname.png

        Note: ⚠ Please make sure that all is lowercase, no special characters

    • For Size Swatches, the same rules apply, for example, a Size S swatch needs to be named size-s.png.

      image.png

      Note: ⚠ .jpg files will not be shown, you must use .png

  3. Where is the 'Files' option in the Shopify admin?

    • Go to your Shopify store’s Admin > From the home Dashboard > select Content > Files:

      image.png
    • You will see the list of uploaded files on the right of the main screen. To learn more about Shopify's Files feature, please visit this article.

      Swatches is enable.png

    • 2 settings will apply to all swatches:

      • Show option value when hovering

        Screenshot 2024-06-05 at 08.37.25.png
        • For example, this appears on the swatch when hovered:

          image.png


          Change product image when interacting with the swatch icon

          Screenshot 2024-06-05 at 08.39.10.png

          Based on its settings, this setting will decide what kind of interaction with the Swatches your Product Image will react to. There are 3 options:

          • None: nothing will happen.

          • Hover: when the swatches are hovered.

          • Click: when the swatches are clicked.

  4. How do you edit the swatch item element?

    • Swatch type: Decide which variant option you want to display for your Shopify product’s swatches.

      Note: The options will be based on how you set up your product’s variants from Shopify Admin/Products.

      Screenshot 2024-06-05 at 09.12.27.png

    • Swatch by: Decide how to display your variant option’s swatches. There are 4 options:

      • Color: Applied for products having the basic color (Blue, Green, Black, etc.)

      • Image: Applied for products with special colors (Gradient Abyss, Gradient Citrus, Cotton Candy, etc.)

      • Variant image: Apply the image you set for variants in the Shopify store admin

      • Text: Display all product option's values (we recommend using it for product size).

        image.png

  • Button style: When more than 4 swatches are displayed on the Product Image, you must decide how the "show more" button will be displayed. For example, it's the +10 button or +10 more:

    Screenshot 2024-06-05 at 14.52.12.png

    Screenshot 2024-06-06 at 15.14.39.png

    • To change the "+10" or "+1 more" text, navigate to Translation > Products > Product Item > Browse More (Swatch Item 1/2/3). Replace the text with "{{count}}" or "{{count}} more".

    • Swatch shape: Decide how you’d like to display your Swatch icons. There are two options:

      • Square

      • Circle

        Screenshot 2024-06-07 at 11.45.17.png

  • Click the Save button to save all changes you have made.


Call to action

The Button element here is known as a Call-to-action button (CTA). CTAs are the buttons throughout a site that tell your customers what to do, where to click, and what to buy. A clear call-to-action on every page steers the customer toward the most appropriate spot in your conversion funnel.

1. How does the Button look?

Button on Product Image:

Button on Product Information:

Product item card.png
Product item card.png

Otherwise, our presets are designed to match your theme's default layout. You can choose in the Choose layout section, and click the Change layout button.

💪The buttons within the layouts will vary, enabling distinct customization options

Screenshot 2024-06-10 at 10.57.32.png

2. How do we edit the Button with Visual Editor?

Left sidebar.png
  • Enable the Add to Cart button:

    • Show button when hovering (available for Desktop only): when this setting is enabled. The button will be hidden and only appear when the Product Image is hovered.

      Screenshot 2024-06-11 at 01.44.36.png
    • Show button: This setting will help you decide which device to show the CTAs. There are two options:

      • Show on desktop only: the CTAs will only show on desktop.

      • Show on desktop and mobile: the CTAs will show on both desktop and mobile.

        Screenshot 2024-06-11 at 01.47.04.png
    • “Selection options" on click: Decide the navigation for the Add to Cart button. There are 2-3 options (based on the layout):

      • Show Add to cart popup: Display overlay-centered pop-up with product options & images.

      • Mini Popup: Display integrated product options pop-up at the bottom of products.

      • Go to the Product page

        Screenshot 2024-06-11 at 02.19.49.png
        Screenshot 2024-06-11 at 01.58.05.png

    • Button style: Decide how to display the content within your button. There are three options:

      • Text with icon

      • Text only

💡 Some layouts labeled ‘Icon only’ will not have this setting.

  • Button shape: Decide which shape suits your design. There are three options:

    • Rectangle

    • Rounded rectangle

    • Capsule

      Screenshot 2024-06-11 at 02.05.47.png
  • Button position: Decide the position of the Add to Cart button relative to the Quick View button. There are two options:

    • Top

    • Bottom

      Screenshot 2024-06-11 at 02.07.33.png
  • Click the Save button to save all changes you have made.

3. Enable Quick View button:

💪 The settings are similar to the Add to Cart button.

To know how to enable the Product image for the Quick view popup, follow this link.


Additional information

We give you the following options to display in addition to the typical item information:

  • Product Vendor

  • Product rating

To access the styling configuration of the Product Rating element, please be sure you have integrated the 3rd party app with us properly. Or else, follow the instructions displayed on the left panel here

Left sidebar.png

Customizing the product's rating display will be done mostly within the 3rd-party app in-app settings.


If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

Did this answer your question?