Product

Section overview

The main product section is the core container for product template content. It initializes product state, renders product-related blocks, and provides shared controls for spacing, colors, borders, and visibility.

Common use cases

• Building the default product detail page layout.

• Combining media, options, pricing, and purchase controls in one section.

• Applying page-level background and spacing styles for product templates.

• Controlling desktop and mobile visibility from section settings.

Usage tips

• Always select a product resource before finalizing layout and content.

• Keep spacing and gap settings balanced so buy actions remain above the fold.

• Use background media sparingly to avoid reducing product content readability.

• Test variant, quantity, and purchase flows after block reordering.

Section settings

Setting	Description
Product	Selects the product resource used by this section.
Enable default variant	Preselects a default variant on load.
Enable background image or video	Turns on background media rendering for the section.
Image background desktop	Background image used on desktop.
Image background mobile	Optional background image override for mobile.
Video background	Optional background video source.
Show video on mobile	Enables background video playback on mobile devices.
Show entire image	Displays full image rather than cropping to fill.
Top spacing	Adds top padding to the section container.
Bottom spacing	Adds bottom padding to the section container.
Minimum height	Sets a minimum section height.
Gap size	Controls spacing between child layout elements.
Color scheme	Sets section background and text color treatment.
Color border	Sets section border color style.
Border position	Controls where borders appear.
Vertical alignment	Aligns content vertically within the section.
Enable margin	Applies global horizontal margin settings.
Enable header overlap	Allows section to overlap the header when enabled globally.
Scroll snap align	Applies scroll snap alignment when enabled globally.
Visibility	Controls device visibility (all, mobile, or desktop).

Block settings

The section supports product-specific blocks plus theme and app blocks. Common product blocks include:

• product-media

• product-options

• product-price

• product-buy

• product-badges

• product-swatches

• shop-pay-installments