Section: Product

Everything you'll need to know on how to setup your Product page section.

The Product section is the main content of your product pages — the gallery, title, price, variants, add-to-cart, and everything visitors need to make a purchase decision. Built around 14+ modular blocks: title, description, rating, price, variant selector, features list, add-to-cart, bulk pricing, promo banner, subscription selling plans, reviews carousel, custom text, spacer, collapsible rows, plus support for app blocks.

The Product section is a system section that lives on the Default product template and renders automatically when visitors land on a product page.

1) In the theme editor, switch to the Default product template using the page selector at the top.

2) Click on the Product section in the left sidebar.

3) Configure the section and rearrange blocks. Settings apply to all product pages by default. For per-product overrides, create separate product templates.

Color scheme for the section. Pick from the schemes set up in Theme Settings → Colors.

Percentage of total width occupied by the gallery column on desktop (35–60%). Default: 50%. Lower values give more room to the product info column.

Width of the main gallery image inside the gallery column (50–100%). Default: 100%.

Fixed height of the main image on mobile in pixels (200–500). Default: 320 px.

Size of each thumbnail on desktop in pixels (60–120). Default: 80 px.

Size of each thumbnail on mobile in pixels (40–80). Default: 55 px.

Tick this box to display sale, discount, or product tag badges on the main gallery image. Default: on.

Choose between horizontal badges or diagonal ribbon style. Normal - Pill badge or Ticker - Diagonal corner ribbon.

How to display the savings amount. Percentage shows SAVE 25%; Money shows SAVE $30.00 (uses shop currency).

What to show when product has both discount and special tag. Discount Only, Tag Only (NEW, HOT, etc.), or Both.

Position of the badge on product images. Top Left or Top Right.

Visual style of Collapsible Row blocks: Minimal (clean lines) for subtle dividers, or Filled (dark header) for bold colored headers. Default: Filled.

Background color of the row header when closed. Default: #2b2020.

Text and icon color when the row is closed. Default: #ffffff.

Background color of the header when expanded. Default: #f5f0eb.

Text and icon color when expanded. Default: #2b2020.

Background color of rows in Minimal style. Default: #f5f4f2.

The Product section supports 14 block types — drag and drop them to build the product page layout that fits your store. Most blocks have limit: 1 per section. Click Add block to choose.

Displays the product title. Configure Style — desktop and Style — mobile independently (H1 to H6) so the heading scales correctly across screens. Limit: 1.

Displays the product description. Use Custom description to override with rich text. Truncate length (50–500 characters) limits the displayed length when using the product's actual description. Limit: 1.

Displays a circular rating ring with a percentage and a label. Configure Rating percentage (0–100%) and Rating text. Useful for trust signals or customer satisfaction stats. Limit: 1.

Displays the product price with optional Shop Pay Installments info below. Updates automatically when the visitor selects a different variant. Limit: 1.

Displays variant options (color, size, etc.). Display style: Button, Swatch, Image, or Select dropdown. Label prefix: prepends text like Choose to each option. Show sold-out badge: marks unavailable variants. Color swatches: enable visual color swatches with metafield-driven or manual colors. Image swatches: enable per-variant image swatches. Limit: 1.

Displays up to 6 short bulleted features. Customize Bullet style (•, ✓, ★) and fill in Feature 1 through Feature 6. Perfect for highlighting key benefits at a glance. Limit: 1.

The main purchase button. Show quantity: include a quantity selector. Button text: customize (default ADD TO CART). Sold out text / Buy It Now text: customize labels. Show ATC button / Show dynamic checkout: control which buttons appear. Limit: 1.

Quantity-based pricing matrix (Buy 2 save 10%, Buy 3 save 20%). Title: heading text. Bundle option: which product option (1, 2, or 3) drives the bulk pricing. Only renders for products with the chosen option. Limit: 1.

Promotional banner with up to two icon + text statements (e.g. Free Shipping, Free Gift). Highly customizable: background image with overlay, gradient or solid colors, padding (responsive), border radius, typography, 14 icon options, and per-statement toggles. Use to call out shipping incentives or limited-time offers right on the product info column.

Subscription selector for products with active selling plans (Shopify Subscriptions). Customize Label, One-time label, Save label, and Frequency label. Only renders when the product has selling plans. Limit: 1.

Up to 3 customer reviews in a rotating carousel below the gallery. Each review has an avatar, highlight (short headline), review text, author name, and an optional Verified Buyer badge. Limit: 1.

Free-form rich text. Text: any HTML rich-text content. Alignment: Left, Center, or Right. Use for compatibility notes, sizing guidance, or any custom message.

Adds vertical empty space between blocks. Set Height in pixels (10–100). Useful for fine-tuning spacing.

Expandable row with a heading and rich-text content. Set Heading (e.g. Shipping & Returns), Content, Open by default, Show icon, and pick an Icon (Menu, Package, Shipping, Returns, Guarantee, Tag, Discount, Gift, Payment, Info, Star, Check, Heart, Settings, Globe). Add multiple Collapsible Rows for shipping, returns, ingredients, dimensions, etc.

Product supports app blocks (@app) — third-party Shopify apps that integrate into product pages can install their blocks here. Common examples: review apps, upsell apps, custom field apps, product personalization tools, size guide apps.

Yes — Shopify supports per-product templates. Duplicate the Default product template (rename to e.g. product.bundle or product.subscription), customize its blocks, then assign it to specific products in the admin under Theme template. Each product can use a different template with different blocks.

Upload variant-specific images in the product editor — Shopify links each image to its variant via the Color attribute. The gallery automatically swaps the main image when a visitor selects a variant. For best results, upload one image per color variant.

Bulk pricing requires a product option with multiple values (the option you select in Bundle option). If your product has only one option or only one value within that option, bulk pricing has nothing to display. Add multiple values to the chosen option in the product editor.

Yes — install the app from the Shopify App Store. Once installed, the app's blocks appear in the Add block menu under an Apps section. Drag them anywhere in the Product section. Common examples: Judge.me reviews, Yotpo, Klaviyo, Bold Subscriptions, Globo Sticky.

Choose between Filled (bold dark header) and Minimal (subtle dividers) under Collapsible row style. For Filled, customize the closed/open background and text colors; for Minimal, customize the row background. Each Collapsible Row block also has its own icon and open-by-default settings.