Product page
Overview
The Main Product section is the core product page layout. It presents product content in a two-column structure (product content on one side and purchase/actions on the other), with responsive spacing, container width controls, and a selectable media ratio for product media. It also supports collapsible product detail rows, theme blocks, and app blocks.
Section Configuration:
Layout
| Setting |
Description |
| Media ratio |
Sets the aspect ratio used for product media (Adapt, Square, Portrait, Landscape). |
| Container layout |
Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) |
Sets the maximum section width on desktop as a percentage (50%–100%). |
| Color scheme |
Applies a theme color scheme to the product section styling. |
Inner padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the product content inside the section on desktop. |
| Bottom (Desktop) |
Adds space below the product content inside the section on desktop. |
| Left (Desktop) |
Adds space to the left of the product content inside the section on desktop. |
| Right (Desktop) |
Adds space to the right of the product content inside the section on desktop. |
| Top (Mobile) |
Adds space above the product content inside the section on mobile. |
| Bottom (Mobile) |
Adds space below the product content inside the section on mobile. |
| Left (Mobile) |
Adds space to the left of the product content inside the section on mobile. |
| Right (Mobile) |
Adds space to the right of the product content inside the section on mobile. |
Outer padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the section on desktop. |
| Bottom (Desktop) |
Adds space below the section on desktop. |
| Left (Desktop) |
Adds space on the left side of the section on desktop. |
| Right (Desktop) |
Adds space on the right side of the section on desktop. |
| Top (Mobile) |
Adds space above the section on mobile. |
| Bottom (Mobile) |
Adds space below the section on mobile. |
| Left (Mobile) |
Adds space on the left side of the section on mobile. |
| Right (Mobile) |
Adds space on the right side of the section on mobile. |
Blocks Configuration:
Available blocks
| Block type |
Description |
| Product collapse row |
Adds accordion-style collapsible rows for product details (for example: shipping, materials, FAQs). |
Theme block (@theme ) |
Allows theme-provided product blocks to be added (based on what your theme supports). |
App block (@app ) |
Allows compatible Shopify apps to add app blocks to the product page. |
Content group block
Purpose: Displays the left-side content area of the product page (media gallery + desktop collapsible information).
Content group — Inner blocks
| Block type |
Description |
| Main product gallery |
Displays the product media gallery (images, videos, 3D models) inside the content area. |
| Product collapse row |
Adds a collapsible row that pulls product-based content (commonly product description) and shows it as an accordion item. |
Product collapse row block
| Setting |
Description |
| Show on |
Controls where the collapse row is visible. Example values: desktop or mobile. |
| Collapsible heading |
The clickable title area for the accordion row. |
| Collapsible content |
The expandable content area for the row. |
Actions group block
Purpose: Displays the right-side product purchasing area (title, price, variants, add-to-cart controls, pickup info, extra content blocks, and mobile collapsibles).
Actions group — Inner blocks
| Block type |
Description |
| Price |
Shows product pricing and related stock/availability information in the actions area. |
| Title |
Displays the product title with configurable typography settings. |
| Infos |
Displays key product info (commonly vendor, SKU, or supporting metadata depending on theme setup). |
| Variants |
Shows variant selectors (size, color, etc.) for choosing product options. |
| Controls |
Shows purchase controls (quantity selector, add to cart button, etc. depending on theme setup). |
| Pickup |
Displays pickup availability information when pickup is enabled and available. |
| Payments |
Displays a payments/info block with a heading and rich text description (often used for alternative payment messaging). |
| Icon text |
Displays a list/group of icon + text items to highlight benefits or store policies. |
| Complementary products |
Displays complementary product recommendations (related add-ons) near the buy box. |
| Share with social |
Adds sharing options for the product page (copy link / social share). |
| Collapse row |
Mobile version of a product-based collapsible row (commonly description).
Mobile collapsible rows for custom content (accordion items).
|
Price block
| Setting |
Description |
| Desktop margin |
Adds spacing below/around this block on desktop. |
| Mobile margin |
Adds spacing below/around this block on mobile. |
Title block
| Setting |
Description |
| Heading size |
Controls the title text size. |
| Heading weight |
Controls the thickness/boldness of the title. |
| Heading case |
Controls capitalization style (e.g., none/capitalize/uppercase). |
| Heading tag |
Controls the HTML tag for SEO structure (e.g., H1). |
| Heading family |
Switches the font family preset used for the title. |
| Desktop margin |
Adds spacing around/below the title on desktop. |
| Mobile margin |
Adds spacing around/below the title on mobile. |
Infos block
| Setting |
Description |
| Desktop margin |
Controls spacing for this block on desktop. |
| Mobile margin |
Controls spacing for this block on mobile. |
Pickup block
| Setting |
Description |
| Desktop margin |
Controls spacing for this block on desktop. |
| Mobile margin |
Controls spacing for this block on mobile. |
Payments block
| Setting |
Description |
| Heading |
Title text shown above the payment content. |
| Heading tag |
HTML heading level used for the payment title. |
| Description |
Rich text content shown below the heading. |
| Block margin |
Spacing for the block on desktop. |
| Block margin mobile |
Spacing for the block on mobile. |
Icon text block
| Setting |
Description |
| Block margin |
Spacing for the icon-text group on desktop. |
| Block margin mobile |
Spacing for the icon-text group on mobile. |
Complementary block
| Setting |
Description |
| Heading size |
Controls the heading size for the complementary products heading/label area. |
| Block margin |
Spacing for the block on desktop. |
| Block margin mobile |
Spacing for the block on mobile. |