Product information settings
| Setting | Description |
| Enable sticky content on desktop | When the button is swiped to the right, the product media and content below will always remain visible side by side with the main product information. |
| Color scheme | Applying a color scheme to the product image and content coEnable sticky content on desktopntainer automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes. |
| Show badges | Slide the toggle to the right to show badges on media. |
| Badges color |
Controls the badge color style. Options: • Default (Default) • Inverse to product Only available when Show badges is turned on. |
Breadcrumbs settings
| Setting | Description |
| Show breadcrumbs |
This option allows you to configure whether to display a navigation path to guide users, e.g.,
|
| Custom collection | This option allows you to select a specific collection to be used in the breadcrumb trail when the "Custom collection" style is selected. |
| Breadcrumbs color scheme | Adjust the breadcrumb strip background and font color using a dropdown list of color schemes. |
| Use custom active breadcrumb color | Enable this option to set a custom color for the active breadcrumb. |
| Custom color for active breadcrumb | Choose your desired color from the color palette. |
Media settings
To add media, navigate to Dashboard > Products, and select the specific product you wish to edit from the list. There are three product media types that can be added to the product page:
Images
3D models
Videos
Please read this detail information about media types.
| Setting | Description |
|---|---|
| Desktop layout |
Controls how product images/videos are arranged on desktop. Options: • Stacked • 2 columns • Thumbnails • Column (Default) • Carousel |
| Desktop thumbnail position |
Controls where the thumbnail strip sits relative to the main image. Options: • Left (Default) • Bottom • Right Only available when Desktop layout is set to Thumbnails. |
| Mobile layout |
Controls how product images/videos are arranged on mobile. Options: • 2 columns • Show thumbnails • Hide thumbnails (Default) |
| Desktop media position |
Controls which side of the page the media gallery appears on. Options: • Left (Default) • Right Position is automatically optimized for mobile. |
| Desktop media width |
Controls how much horizontal space the media gallery takes up. Options: • Small • Medium • Large (Default) Media is automatically optimized for mobile. |
| Media fit |
Controls how media is sized within its container when its proportions don't match the container's. Options: • Original (Default) — shown at natural proportions, no cropping. • Fill — scaled and cropped to completely fill the container. |
| Image background |
Controls whether the space around a transparent image shows a solid color. Options: • Transparent (Default) • Background Background color will be visible if the image is transparent (.png). |
| Image background color scheme | Sets the color scheme used behind transparent images. Only available when Image background is set to Background. |
| Constrain media to screen height | Limits every image or video in the gallery to the height of the visitor's browser window, so no single item forces extra scrolling. Enabled by default. |
| Hide other variants' media after selecting a variant | Hides the media of every other variant from the gallery once a customer selects a specific variant. Disabled by default. |
| Image zoom |
Controls how customers can get a closer look at product images. Options: • Open lightbox (Default) — click opens the image full-size in an overlay. • Click and hover — zoom by clicking or hovering directly on the page. • No zoom Click and hover defaults to open lightbox on mobile. |
| Enable video looping | When enabled, product videos automatically restart and replay once they reach the end. Disabled by default. |
Section padding
| Setting | Description |
| Top padding | The 'Top padding' setting allows you to adjust the amount of space at the top of the template using a slider. |
| Bottom padding | The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the template. |
| Top padding mobile | The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the template specifically for mobile devices, using a slider. |
| Bottom padding mobile | The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the template for mobile devices. |