📖 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:
From the app’s dashboard, click on the Integration icon > Shopify integration.
Select the template you want to modify, then click on Customize or Add new template to open the Visual Editor tool.
Then, Click on the Product Item icon in the Icon sidebar to open the Product Item panel.
Customizable options
Layout
In the Layout panel, you can customize the following attributes of your items:
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)
For the best result, all product photos should have the same ratio.
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
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%)
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:
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
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:
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:
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.
{{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
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.
How does ‘Swatch by Color & Image’ work?
After you have set up your product’s variants within Shopify Admin:
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.
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.
Note: ⚠ .jpg files will not be shown, you must use .png
Where is the 'Files' option in the Shopify admin?
Go to your Shopify store’s Admin > From the home Dashboard > select Content > Files:
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.
2 settings will apply to all swatches:
Show option value when hovering
For example, this appears on the swatch when hovered:
Change product image when interacting with the swatch icon
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.
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.
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).
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:
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
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: |
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
2. How do we edit the Button with Visual Editor?
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.
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.
“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
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
Button position: Decide the position of the Add to Cart button relative to the Quick View button. There are two options:
Top
Bottom
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
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].