Product information


General settings


Setting Description
Enable sticky add-to-cart bar When this option is enabled, a “Sticky add to cart bar” will be displayed as customers scroll down your product pages. This bar will remain fixed at the bottom of the screen, making it convenient for customers to quickly add products to their cart without having to scroll back up to the product details section. This enhances the user experience.
Enable sticky content on desktop Create a sticky layout for less content in columns.
Content width Adjust the width of all text near media using the slider.

Breadcrumbs settings


Setting Description
Show breadcrumbs To show the breadcrumbs, enable the 'Show breadcrumb' option. To hide the breadcrumbs, disable the option.
Breadcrumbs style

You can see changes by trying these two styles in the customizer:

  • Flat elements
  • Block underline
Breadcrumbs product collection

Three styles:

  • None
  • Collection alphabetically sorted: This option organizes the collections in your breadcrumbs in alphabetical order. This means that the collections will be displayed based on the first letter of their names, from A to Z.
  • Custom collection
  • Custom collections
Show global products Toggle the switch to display the 'Collection All' page in the breadcrumbs.
Custom product collection In the “Breadcrumbs Product Collection” list, select the “Custom collection” style. Then, choose the specific collection from the list where the product is included to display this collection in breadcrumbs. The dropdown lists will show all collections, even those the product isn't part of. You can also add a custom collection using a metafield. For more details, refer to this article: Adding Custom Collection to Breadcrumbs Through Metafields.
Custom product collections list In the “Breadcrumbs Product Collection” list, select the “Custom collections” style. Then, choose the specific collections from the list where the product is included to display these collections in breadcrumbs. The dropdown lists will show all collections, even those the product isn't part of. You can also add a custom collection using a metafield. For more details, refer to this article: Adding Custom Collection to Breadcrumbs Through Metafields.
Bottom space for "flat elements" style

Choose the bottom space for breadcrumb appearance:

  1. Large
  2. Small
Show previous and next product

Enable this option to display the “Previous” and “Next” buttons. These buttons allow customers to navigate between products.

Note: The buttons only navigate between products within the same collection. They will not appear on the product page if the product is not part of any collection.

Media settings


Setting Description
Media fit 

“Media fit” refers to how product images or other media (such as videos) are sized and displayed within their respective containers on a web page.

Two options for Media fit:

  • Original: This setting displays the media at its original size, without any cropping or resizing. 
  • Fill: This option adjusts the media to fill the entire container, even if it requires cropping or resizing to do so.
Gallery layout

“Gallery layout” allows you to set the view of product media on the page.

  • Stacked: All product media are stacked one after the other. Clicking a stacked media type opens a pop-up window with a larger view of the selected media.
  • Stacked without gaps: This style is the same as the previous, but without gaps between columns (media)
  • 2 columns: If a product contains multiple types of media, the extra media content is displayed in a two-column layout following the main product media.
  • Thumbnail: When a product has multiple media types, the additional media are shown as thumbnails below the main product media. Customers can click on any thumbnail to view it.
  • Thumbnail slideshow: When a product has multiple media types, the additional media are shown as thumbnails in a carousel below the main product media. Customers can click on any thumbnail to view it, or use the carousel navigation arrows to see other media.
Thumbnail position

Use this option to set the “Thumbnail” layout.

  • Bottom: All thumbnails are displayed at the bottom after the main product media.
  • Left: All thumbnails are displayed on the left of the main product media.
  • Right: All thumbnails are displayed on the right of the main product media.
Thumbnail circle

This option can be used for “Thumbnail” and “Thumbnail slideshow” layouts.

Switch the toggle, thumbnails will have a circular form.
Hide other variants’ media after selecting a variant Select this option to hide the media for other variants after a variant has been selected.
Show image border Toggle the switch to add a border to your images. Images will have a more expressive look.
Mobile layout

When a product has multiple media types, choose how to show them on mobile view after the main product media:

  • Thumbnail (as on desktop)
  • Numbers (pagination)
  • Bullets
Enable video looping If you add a video to showcase your product, “enabling video looping” will allow customers to watch the video over and over again without having to manually restart it. This can be useful in highlighting specific features or aspects of the product that the customer may have missed during the first viewing.
Enable video autoplay Toggle the switch to play videos on mute when the page loads automatically. This feature enhances user engagement by ensuring that videos start playing without requiring any action from the viewer.
Enable gallery popup Toggle the switch to show a pop-up window with a larger view of the media on clicking the main product media or all media in a “stacked” layout.  
Show badges You can show or hide badges for the section, switching on the toggle.
Image width Control image width using a slider with percentages for a better image appearance.

Section settings


Setting Description
Section top space The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider. 
Section bottom space The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section. 
Background

Add or remove the section background by choosing the options:

  • None: without any background
  • Section background 
Background color You can set a custom background color for the section using a color picker.
Image overlay Image overlay is a design technique where additional elements, such as lights, are added to the page to enhance its visual appeal and make the site more interesting. 
Column gap
  • Large
  • Medium
  • Small

Example of Image overlay


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us