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 for columns.
Content width	Adjust the width of all text near media using the slider.

Breadcrumbs settings

Setting	Description
Show breadcrumbs	If you want to show the breadcrumb, mark the checkbox “Show breadcrumb”. If you want to hide the breadcrumb, remove mark from the checkbox.
Breadcrumbs style	You can see changes by trying these two styles in customizer: Flat elements Bold text with 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
Custom product collection	In the “Breadcrumbs Product Collection” list, select the “Custom” 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.
Bottom space for "flat elements" style	Choose bottom space for breadcrumb appearance: Large Small

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 “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 to “Thumbnail” and “Thumbnail slideshow” layout. Marking the checkbox, thumbnails will have a circle 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.
Desktop media size	You can choose the best fit of thumbnails using these settings. Choose from available: Small Medium Large
Show image border	Mark the checkbox 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	Check this box to automatically play videos on mute when the page loads. This feature enhances user engagement by ensuring that videos start playing without requiring any action from the viewer.
Enable gallery popup	Mark the checkbox 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, marking the checkbox or removing the checkmark according to your design preferences.
Image width	Control image width using a slider with percents 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. Click on a circle to make changes.
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

Last updated on July 24, 2024