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.


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:

  • Single column: All media is displayed in a single-column layout.
  • Two columns: All media is displayed in a two-column layout.
  • Slider: All media is displayed in a slider format. You can scroll through the media using the mouse wheel, touchpad or by clicking the thumbnails shown below the media.
Media position

The available media positions depend on the selected layout.

For Single column and Two columns layouts:

  • Left: Media is displayed on the left, and product information appears on the right.
  • Right: Product information is displayed on the left, and media appears on the right.

For Slider layout:

  • Left: Media is displayed on the left, and product information appears on the right.
  • Right: Product information is displayed on the left, and media appears on the right.
  • Cover: Media covers the entire section, while product information is displayed on the right side, overlapping part of the second media item. You can scroll within the section to view all media.
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
  • Open lightbox: When you click a media item, a lightbox opens to display the product media in a large popup window opens above the page content for more detailed viewing experience. Only the media is shown, without any additional details. You can navigate through the media using the mouse wheel, touchpad or by clicking the navigation dots at the bottom.
  • None: Product media will be displayed without lightbox functionality.
Media width

Controls the width of the media area on desktop devices only:

  • Small (40%)
  • Medium (50%)
  • Large (60%)
Mobile layout
  • Single column: All media is displayed in a single-column layout.
  • Two columns: All media is displayed in a two-column layout.
  • Slider: All media is displayed in a slider format. You can navigate through the media by scrolling or by clicking the thumbnails below.
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

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