Product page

Overview

The primary product page template. Displays the current product with a media gallery and a fully block-composed content column. Unlike the Featured Product section, there is no product picker — the product is loaded from the page context. Section settings cover the media gallery (ratio, fixed height, mobile slideshow arrows), layout container, color scheme, and spacing. Blocks are stacked in the content column in the order they appear.

Section Configuration

Setting Description
Media Ratio Product image aspect ratio: Adapt (original), Square, Portrait, Landscape, or Fit to Box. Default: Adapt.
Desktop Height Fixed image height on desktop. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box.
Mobile Height Fixed image height on mobile. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box.
Show Arrows Enables navigation arrows on the mobile product image slideshow. Disabled by default.
Arrow Button Type Visual style of arrow buttons: Primary, Secondary, or Link. Default: Secondary. Visible when arrows are enabled.

Layout Settings

Setting Description
Container Layout Page Width, Contained Content, or Container Fluid. Default: Contained Content.
Border Style None, Top, Bottom, or Top & Bottom. Default: None.
Container Size Max container width as a percentage of page width. Range: 50–100%, default 100%.
Color Scheme Shopify color scheme applied to the section. Default: Scheme 1.

Inner Spacing

Setting Description
Desktop Top Padding Default 60 px.
Desktop Bottom Padding Default 60 px.
Desktop Left Padding Default 75 px.
Desktop Right Padding Default 75 px.
Mobile Top Padding Default 35 px.
Mobile Bottom Padding Default 35 px.
Mobile Left Padding Default 15 px.
Mobile Right Padding Default 15 px.

Outer Spacing

Setting Description
Desktop Top Spacing Default 0 px.
Desktop Bottom Spacing Default 0 px.
Desktop Left Spacing Default 0 px.
Desktop Right Spacing Default 0 px.
Mobile Top Spacing Default 0 px.
Mobile Bottom Spacing Default 0 px.
Mobile Left Spacing Default 0 px.
Mobile Right Spacing Default 0 px.

Blocks

Blocks are stacked in the product content column in the order they appear. Every block includes a Bottom Margin – Desktop and Bottom Margin – Mobile spacing control (range 0–100 px). Default values are noted per block below.

Column Separator (limit 1)

No configurable settings. Splits the product layout into two columns at this point in the block list.

Bottom Margin: N/A.

Full-Width Separator (limit 1)

No configurable settings. Inserts a full-width layout break at this point in the block list.

Bottom Margin: N/A.

Content (limit 1)

No configurable settings. Represents the product media area (image gallery). Position in the block list determines where the gallery appears relative to other content.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Product Title (limit 1)

Displays the product's title.

Setting Description
Heading Size H1–H6 or Large, Medium, Small. Default: H3.
Heading Weight Thin (100) to Black (900). Default: Bold (700).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Heading Tag Semantic HTML heading level (H1–H6). Default: H1.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.

Bottom Margin: Desktop 10 px, Mobile 10 px.

Heading

Custom heading text added anywhere in the content column.

Setting Description
Heading Heading text. Supports inline rich text. Default: "Talk about your brand".
Heading Size H1–H6 or Large, Medium, Small. Default: H3.
Heading Weight Thin (100) to Black (900). Default: Bold (700).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Heading Tag Semantic HTML heading level (H1–H6). Default: H2.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.
Heading Link Style Default or Link style when heading contains a hyperlink.

Bottom Margin: Desktop 6 px, Mobile 6 px.

Price (limit 1)

Displays the product price, unit price, SKU, and stock status.

Setting Description
Text Size H1–H6 or Large, Medium, Small. Default: H5.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Body font.
Text Color Style Default or Body color preset.
Label Case Casing applied to price label text. Default: Uppercase.
Show Original Price Displays the original (crossed-out) price on sale products. Disabled by default.
Show Unit Price Displays the unit price. Enabled by default.
Show SKU Displays the product SKU. Enabled by default.
Show Stock Displays the stock status indicator. Enabled by default.

Bottom Margin: Desktop 15 px, Mobile 15 px.

Discounted Price (limit 1)

Displays the savings amount or percentage on sale products.

Setting Description
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: Capitalize.
Text Font Family Default or Heading font.
Text Color Style Default, Heading, or Body color preset.

Bottom Margin: Desktop 15 px, Mobile 15 px.

Text

Rich-text content block for product descriptions or custom copy.

Setting Description
Content Rich-text body content.
Text Size Large, Medium, or Small. Default: Large.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset.

Bottom Margin: Desktop 22 px, Mobile 15 px.

Tags (limit 1)

Displays the product's tags. No typography settings.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Variants (limit 1)

Renders the variant picker and an optional size guide drawer.

Setting Description
Enable Size Guide Shows a size guide link that opens a drawer. Enabled by default.
Size Guide Image Image displayed inside the size guide drawer.
Size Guide Color Scheme Shopify color scheme applied to the drawer. Default: Scheme 1.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Quantity Input (limit 1)

Renders the quantity selector.

Setting Description
Show Quantity Selector Displays the quantity input field. Enabled by default.
Show Subtotals Displays a line subtotal beside the quantity field. Disabled by default. Visible when quantity selector is enabled.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Controls (limit 1)

Renders the Add to Cart button and additional purchase actions.

Setting Description
Show Dynamic Checkout Buttons Displays accelerated checkout buttons (Shop Pay, PayPal, etc.). Enabled by default.
Show Gift Card Recipient Form Shows a recipient form for gift card products. Disabled by default.
Show Bottom Border Adds a border below the controls block. Enabled by default.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Countdown Timer (limit 1)

Displays a live countdown to a set end date, optionally showing a discount badge.

Setting Description
Show Discount Badge Displays the discount percentage alongside the timer. Enabled by default.
Info Text Short label displayed beside the timer. Default: "Add an info text".
Background Color Timer bar background color. Default: #075F0C  .
Text Color Timer bar text color. Default: #FFFFFF  .
End Date Date the countdown counts down to (YYYY/MM/DD). Default: 2026/12/06.
After Expiry What happens when the timer reaches zero: Hide the block or Show Message. Default: Hide.
Expiry Message Message shown when the timer expires. Visible when After Expiry is Show Message.

Bottom Margin: Desktop 0 px, Mobile 0 px.

Payment Methods (limit 1)

Displays accepted payment method icons with an optional label.

Setting Description
Label Text displayed above the payment icons. Supports inline rich text. Default: "100% secure payment".
Text Size Large, Medium, or Small. Default: Small.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: Capitalize.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset. Default: Heading.
Desktop Text Alignment Content alignment on desktop. Default: Center.
Mobile Text Alignment Content alignment on mobile. Default: Center.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Share (limit 1)

Social sharing buttons for the product page.

Setting Description
Show LinkedIn Displays a LinkedIn share button. Enabled by default.
Show Facebook Displays a Facebook share button. Enabled by default.
Show Twitter / X Displays a Twitter / X share button. Enabled by default.
Show Pinterest Displays a Pinterest share button. Enabled by default.
Show Tumblr Displays a Tumblr share button. Enabled by default.
Desktop Button Alignment Horizontal alignment of share buttons on desktop: Left, Center, or Right. Default: Center.
Mobile Button Alignment Horizontal alignment of share buttons on mobile: Left, Center, or Right. Default: Center.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Store Pickup (limit 1)

Displays local pickup availability for the selected variant, with a drawer for detailed location info.

Inline Display

Setting Description
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Bold (700).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset. Default: Heading.

Pickup Drawer

Setting Description
Drawer Heading Size H1–H6 or Large, Medium, Small. Default: H5.
Drawer Heading Weight Thin (100) to Black (900). Default: Bold (700).
Drawer Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Capitalize.
Drawer Heading Font Family Default or Body font.
Drawer Heading Color Style Default or Body color preset.
Drawer Color Scheme Shopify color scheme applied to the pickup drawer. Default: Scheme 1.
Show Bottom Border Adds a border below the block. Enabled by default.

Bottom Margin: Desktop 7 px, Mobile 7 px.

Complementary (limit 1)

Displays a "Frequently bought together" product carousel powered by Shopify's product recommendations.

Heading

Setting Description
Heading Section heading. Supports inline rich text. Default: "Frequently bought together".
Heading Size H1–H6 or Large, Medium, Small. Default: H3.
Heading Weight Thin (100) to Black (900). Default: Bold (700).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Heading Tag Semantic HTML heading level (H1–H6). Default: H3.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.

Layout

Setting Description
Enable Bundle Enables bundle-style combined add-to-cart. Disabled by default.
Desktop Text Alignment Content alignment on desktop. Default: Center.
Mobile Text Alignment Content alignment on mobile. Default: Center.

Slideshow

Setting Description
Show Arrows Enables navigation arrows on the product carousel. Enabled by default.
Autoplay Auto-advances through recommended products. Disabled by default.
Slide Change Interval Delay between automatic transitions. Range: 2000–9000 ms, default 5000 ms. Visible when Autoplay is enabled.

Bottom Margin: Desktop 10 px, Mobile 10 px.

Collapse Row

Expandable accordion panel. Multiple Collapse Row blocks can be added.

Setting Description
Heading Trigger label for the collapsed row. Default: "Collapse row".
Heading Size H6, Large, Medium, or Small. Default: Medium.
Heading Weight Thin (100) to Black (900). Default: Bold (700).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.
Description Rich-text content revealed when the row is expanded.
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset.
Default Open Renders the row expanded on page load. Disabled by default.
Show Bottom Border Adds a border below the block. Enabled by default.

Bottom Margin: Desktop 10 px, Mobile 10 px.

Feature List

A single labelled feature item displayed as a list row. Add multiple blocks to build a feature list.

Setting Description
Text Feature label. Supports inline rich text. Default: "Feature".
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset.
Show Bottom Border Adds a border below the block. Enabled by default.

Bottom Margin: Desktop 10 px, Mobile 10 px.

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