Skip to content
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. |
| Margin | Controls the product section's desktop horizontal margin. |
| Enable mobile margin | Reveals a separate mobile margin control when advanced settings are shown. |
| Mobile margin | Controls the product section's mobile horizontal margin when enabled. |
| 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-mediaproduct-optionsproduct-priceproduct-buyproduct-badgesproduct-swatchesshop-pay-installments