Product template

This component is the one that allows you to display and customize the main section of the page of your Products within the theme.

It works by using several subcomponents that display different information and details about each product, which you can reorder, hide (1) or delete (2) them.

Note (1): All subcomponents within this component have the ability to be hidden.

Note (2): Some subcomponents have the ability to be removed or deleted, while others don’t, as they are required for the proper functionality of the page.

For the purposes of this component, we will refer as Content to the column that contains all the details of the product, such as the Name, Price, Form, etc.; On the other hand, we will refer as Gallery to the one that displays the product image(s).

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Content alignment

Allows you to choose the alignment for all the elements in the Content column, like for example the name, price, etc.

Image gallery

The following group of options will allow you to customize certain aspects of the Gallery, which will affect all store’s products:

Format images

Allows to automatically format and redimension the images you upload to products, based on the next options you’ll find below.

Note: You can find the sizes in which images will be displayed in this section.

When enabled, the following options will become available for you to customize them further:

Dimension

Allows to define how images will be presented within the component, based on the following options:

• Landscape: A very wide and not so tall shape, great for providing a panoramic style. It uses an aspect ratio of 16:9.
• Portrait: A tall and narrow shape, ideal for providing a vertical display, like posters. It uses an aspect ratio of 3:4.
• Rectangular: A balanced, slightly longer shape, which is suitable for most images. It uses an aspect ratio of 4:3.
• Square: An equal height and width shape, perfect for images where both dimensions are the same. It uses an aspect ratio of 1:1.

Display

Crop: This creates a thumbnail version of the image, cropping it to fit the exact size defined at the Dimension option, keeping the most important part of it centered.

For example, if you defined a square dimension, this will make sure it always keeps that shape, even if your original image was rectangular.

Resize: This keeps the image’s proportions (it doesn’t crop it) and simply makes it smaller to fit the available space, because it gets adjusted automatically without cutting anything out.

In short:

• Crop makes your image fit exact dimensions.
• Resize keeps the original proportions and scales it down.

Desktop width

This option allows you to define the width at which images within the gallery will Crop or Resize.

The dimension that can be set up here has a direct relation to the Maximum container width that you define within Theme settings > Design, as you will need to increase the amount within this option if you choose a container’s width higher than Small.

Note: If Format images is disabled, product images will be displayed in the original format in which they were uploaded. Therefore, if they have different heights, the gallery will automatically adapt based on the height of each one of them.

Show gallery thumbnails

Allows to display a secondary Gallery with thumbnails of all the product’s images along with the main one, with which users will be able to click in order to view them. It will have left and right arrows to control it as well.

Note: If this option is disabled, the main Gallery will display arrows inside of it, for users to control it and see more images.

Thumbnails desktop position

Allows to define the position for the Thumbnails on desktop devices that have a width equal or greater than 992px.

For devices width a width lower than that, it will automatically be placed below the main one.

Enable zoom on images

Allows users to be able to zoom images of the product when “hovering” over them.

For this is important that you consider uploading images in a bigger dimension that the one displayed on the storefront.

Zoom amount

Allows you to define the amount of zoom applied to your product images, if the previous option is enabled.

Enable sticky gallery

Allows for the Gallery to stick at the top of the theme Header (if fixed as well) and/or to the Browser, so it follow users as they scroll down the page.

You can read more about the proper size and dimensions for images in this section of the page.

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.

Subcomponents

The Product template component works by allowing you to choose which content you want to display in it, through several subcomponents that are the details of the product.

For each one of them you will have the ability to edit, move, hide and/or delete. The ones available to be used are the following:

Note: Some of these subcomponents won’t have any options inside their settings, because they are mainly used to display information. Therefore, the way they look and/or behave can be managed within the Theme settings section of the Visual Editor, as they are general options that affect other pages, components or layouts within the theme.

Attributes

Allows to display the product SKU and Brand, along with other options to customize how they will look and behave:

Note: If a product does not have any of these attributes, nothing will be displayed. On the contrary, if a product have both attributes and you have opted to display them, they will be separated by a vertical line. The order will always be first SKU and then Brand.

Show before product gallery on Mobile

By default Attributes will be positioned after the Gallery on mobile devices. This option allows to change that behavior and place them before.

Show SKU

Allows to define if the product SKU will be displayed or not.

Show text before SKU

Allows to display a text before the product SKU, like for example “SKU: 1234”.

Show brand

Allows to define if the product Brand will be displayed or not.

Title

This subcomponent allows to display the product name, which has the following options to customize it:

Show before product gallery on Mobile

By default the Name/Title will be positioned after the Gallery on mobile devices. This option allows to change that behavior and place it before.

Custom size

Allows to manually adjust the size for all product page names across the theme.

If not enabled, what’s defined at Theme Settings > Headings > Titles will be applied.

All caps

Allows to force the title to be displayed in uppercase text, even when it wasn’t written like that: e.g. PRODUCT NAME

Price

This subcomponent allows to display the price of the product, which has the following options to customize it:

Show before product gallery on Mobile

By default the Price will be positioned after the Gallery on mobile devices. This option allows to change that behavior and place it before.

Display

Allows to define how prices will be displayed when the product has a visible discount (promotion), based on the two following options:

• Horizontal: Prices will align one next to the other, horizontally.
• Stacked: Prices will stack one below the other, vertically.

Discount label

Allows to display a discount “tag” or “label” at the right side of the price, based on the following options:

• Hide: the label won’t be displayed even if a product has an available discount.
• Both: the label will display both the percentage discount (e.g. 20%) along with the text that’s defined at Theme settings > Theme translations > Discount label text.
• Percentage: the label will only display the discount percetange.
• Text the label will only display the text mentioned before.

The colors for this label will be from the ones you can define at Themes > Visual Editor > Theme settings > Colors.

Note: the discount label will also be affected by the Display option.

Label shape

Allows to define the style or design for the label.

Show promotions date limit message

Allows to display a message below the price(s) mentioning that there’s a date at which the discount (promotion) expires or ends.

It will only work if the promotion has a Date Limit defined on its settings.

Product review stars

This subcomponent allows to display the rating review score along with the rating stars for a product that has customer reviews.

Note: the Request Product Reviews feature it’s only available for Pro plans and above. So, even when you have this subcomponent added if you don’t have the necessary plan, nothing will be displayed. Same will happen for a product that doesn’t have any reviews.

Stock

This subcomponent allows to display the Stock of the product.

How this will look and behave is explained on this article.

Product form

This subcomponent allows to display the Form with which users can add a product to the cart.

How it will look and behave, and which are its options and elements, is explained on this article.

Wishlist

This subcomponent allows you to display the button with which users can wishlist a product to their customer account list.

Note: Users will only be able to wishlist a product once they are logged in.

Product Stock Locations

This subcomponent allows to display a button, which will open a lateral panel from the right side of the browser upon click.

This panel will show the list of locations and their respective stock statuses for the product. The options to customize it are the following:

• Title: allows to define the title that is visible on the lateral panel that’s opened when clicking on the button.
• Button icon: allows to define the icon at the left side of the button text.
• Button text: text that displays inside the button that opens the panel.

Other options for this subcomponent are handled within Themes > Visual Editor > Theme settings > Product form, which are explained in detail on the this article.

Description

This subcomponent allows to display the product Description that can be added to all products on your store.

The options to customize it are the following:

Title

Allows to display a title before the description.

Collapse description

Allows to restrict the height of the product description, based on the threshold defined at the option below.

This is useful if your products have long descriptions that for example generate a noticeable blank space between the Gallery and Content columns.

When enabled, a link with the text “Read more” will be displayed at the bottom end of the description. Upon click, the description will expand to its maximum available height, in which case the link text will change to “Read less”. On a second click, the description will collapse again to its initial state.

Height threshold

Allows to define the height at which the description will be collapsed, only if the previous option is enabled.

Product Accordion

This subcomponent it’s similar to the Accordion component. It allows to add different items with information, but in this case, specifically for the product page.

It has less option than the other, because all its attributes like colors and spaces are obtained from the Product template parent component.

The options for you to customize it are the following:

Collapsible items

By enabling this option, when a user clicks on one item the rest will close. On the contrary, when disabled, all items will remain open upon clicking.

First item opened

Allows to define that the first item of the accordion is opened by default on page load.

How or when this first item closes or not will depend on the behavior of the previous option.

Show icons

Allows to display icons at the left side of each item title. By enabling this, an icon option will be displayed on each Accordion item setting.

Borders style

Allows to define how the borders of the accordion will be displayed.

Product accordion items options

For each subcomponent (item) you will find the same options that are explained in this page.

Product custom fields

This subcomponent allows you to display all the enabled custom fields that you have added to the products of your store. The options to customize it are the following:

Title

Allows to define the title that will come before all the fields and their content.

Display

Allows to define how the fields and their content will be displayed, based on the following options

• List: Fields will be displayed one below the other in a list.
• Table: Fields will be displayed within a table-styled section, with borders around them.

Attachments

This subcomponent allows you to display all the files that you have uploaded to a product, within a table-styled section, for users to download them.

The options for you to customize it are the following:

Title

Allows to define the title that will come before all the attachment’s links.

Product share

This subcomponent allows to display a list of links that will allow users to share the product.

The options to customize it are the following:

• Title: allows to define the title that goes along with the links, and for the button that displays on mobile devices.
• Show Facebook: allows for the product to be shared on Facebook.
• Show 𝕏: allows for the product to be shared on 𝕏 (formerly Twitter).
• Show WhatsApp: allows for the product to be shared on WhatsApp.
• Show Email: allows for the product to be shared through Email, which will open the app or software on the device the user it’s visiting the store.
• Show Copy to clipboard: allows for users to copy the product URL to the device clipboard, so they can share it however they want.

Important: On mobile devices this will change to a single button, which upon click will open the user’s device native options for sharing.

Line divider

This subcomponent allows to add a divisory line, which can be useful to generate a clearer separation between the content of the main component.

The options to customize it are the following:

• Line thickness: Allows to adjust the thickness of the line, so you can make it more notorious if necessary.
• Line opacity: Allows to control the opacity (transparency) of the line. The color for this will consider the Main text option from the component’s Color Pack.
• Top margin: Allows to control the upper inner margin of the section.
• Bottom margin: Allows to control the lower inner margin of the section.

Custom code

This subcomponent allows you to add custom code within the product page, which can be useful for external apps or your custom design, tools, plugins, etc.

Volume Prices

This subcomponent allows you to display the different prices of a product when you have added variations of it when buying different units.

Note: Volume prices are configured at the store’s admin panel by going to Products > Pricing. You can read more about how this works in this article.

The list of variations will be displayed within a table-styled list, like in the following example image:

The options to customize it are the following:

Show before product gallery on Mobile

By default the table will be positioned after the Gallery on mobile devices, along with the rest of the subcomponents.

This option allows to change that behavior and force it to be placed before.

Hide when single volume price

If the table only contains one row of prices, it will be hidden when enabling this option.

Show discount column

Allows to show or hide the column that displays the *discount percentage (3rd column).

Hide buy 1 row

Allows to hide or show the first row of the table, which displays the origin price of the product when buying 1 unit.

Images sizes

Sizes for images within this component or the Selected product, will vary based on what you choose on the following options:

• If you enable the Format images option.
• The Image dimension option.
• The Desktop width option which will affect images on desktop devices that have a width ≥ 992px.

Also, the theme will automatically load different image sizes depending on the browser viewport width where the store it’s being visited, so they can be optimized for each different type of device.

Additionally, you need to consider that when enabling the Zoom option, you might need to upload images a bit bigger than the suggested sizes mentioned below, so they don’t pixelate when they are zoomed.

Default sizes

Next, we detail the minimum suggested dimensions in which you can upload you product images, considering the default Desktop width option value which is 760.

The values of the following table consider only the Desktop device dimension, as it’s gonna be the one that has the larger dimension of all:

Note: Images will be automatically resized or cropped based on what you choose at the Display option, within the component settings.

Custom sizes

If you change the default amount at the Desktop width, along with the Dimension option and need to calculate how your images should be, you can use a couple methods to do it easily:

RatioBuddy

This tool allows you to define the aspect ratio (e.g. 4 by 3, which would be rectangular) and provide either the width and/or height.

Visit RatioBuddy’s website.

ChatGPT

You can also make use of ChatGPT to perform the calculations for you, by providing a prompt like the following:

Hey chat, I need to calculate image dimensions based on width and ratios. 

Ratios are the following:

- Landscape: 9 ÷ 16
- Portrait: 4 ÷ 3
- Rectangular: 3 ÷ 4
- Square: 1 ÷ 1

My image size is 760px. 

I would like to know the combinations for both my image width and the ratio I'm using which is [your ratio], in order to determine which height my images should have. Please round the results, so you don't offer dimensions with decimals.

It should provide a result similar to the following image: