Product section
| Setting | Description |
| Color scheme |
A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Read 'Color scheme' article to learn more about color schemes. |
| Section background | The section background depends on the selected color scheme in the Color Scheme option above. The Background and Secondary Background colors are defined in the theme settings. Here, you can choose which of these backgrounds will be displayed in sections that include media. |
| Product information background | The product information background also depends on the selected color scheme. The Background and Secondary Background colors are defined in the theme settings, and here you can choose which one will be used for the product information block. |
Media gallery
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 |
This option controls how product media (image, 3d model, and video) are displayed on the product page. There are three layout options available:
|
| Media position |
The available media positions depend on the selected layout. For Single column and Two columns layouts:
For Slider layout:
|
| Constrain to viewport |
This option is available when media position is left or right. You can constrain the media gallery to the viewport height. |
| Hide other variant media after one is selected | Select this option to hide the media for other variants after a variant has been selected. |
| Zoom |
|
| Media width |
Controls the width of the media area on desktop devices only:
|
| Mobile layout |
|
| Enable sticky product details | Product details will remain visible as you scroll on desktop. |
Padding
Padding is the space inside a section that separates the content from the section’s edges.
See this article to set paddings: Section padding