Product Main

The top half of a product page: the media gallery on one side and the buy column on the other. Every visible piece of the buy column — the title, the price, the pack cards, the subscription rows, the Add to Cart button, the accordions — is a block, so building a product page is mostly a matter of choosing blocks and putting them in the right order.

The section itself only handles three things: the breadcrumb, the media gallery, and the two-column layout. There is no setting anywhere in this section for the title, the price or the button — all of that is on the blocks.

On desktop the buy column sticks below the header while the gallery scrolls past it, so the price and Add to Cart stay on screen through a long run of photos. On mobile the two stack and the gallery comes first.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id. Defaults to main-product when empty.
Shipping message	Not connected to anything. See the caution below.
Use shipping message?	Not connected to anything. See the caution below.
Top / bottom padding (mobile)	Space above and below. 0–10 rem in 0.5 steps. Defaults 2 / 2.
Top / bottom padding (tablet)	0–10 rem in 0.5 steps. Defaults 3 / 3.
Top / bottom padding (desktop)	0–10 rem in 0.5 steps. Defaults 4 / 4.

Two settings that do nothing

Shipping message and Use shipping message? appear in the customizer but are not read by the theme — nothing you type into them renders anywhere on the page. Shipping and stock copy on the product page comes from the Product Stock Message block instead, which is where you should edit it.

The media gallery

The gallery is built into the section and has no settings. It shows everything in the product’s Media list in Shopify admin, in that order:

• Desktop renders a mosaic — the first item spans full width as a tall hero, the rest fill a two-column grid of squares.
• Mobile renders a swipeable carousel with dots.
• Images open in a lightbox when clicked. Videos play inline.
• Alt text falls back to the product title when a media item has none. Write real alt text on the media in Shopify admin rather than relying on that.

Because the order is the Media order in admin, reordering the gallery means reordering media on the product — there is nothing to drag in the customizer.

Breadcrumbs

A breadcrumb trail renders above the two columns, always. When a customer arrives from a collection it shows Home › Collection › Product with a working “back to collection” link. When there is no collection to link back to, the trail is still emitted for search engines but hidden from view.

Blocks

The buy column renders whatever blocks you add, in the order you put them. Anything can be reordered or removed. The section accepts:

Product-specific

• Product Pack Selector — the 1 / 3 / 6 Pack cards.
• Product Frequency — one-time vs Subscribe & Save.
• Product Price Display — the large price line.
• Product Form Submit — the Add to Cart button.
• Product Variant Options — the generic option picker, for products the pack selector doesn’t fit.
• Product Reviews Overview — the star rating and review count.
• Product Sale Description — promo copy driven by product metafields.
• Collection Sale Description — the same idea, driven by the collection.
• Bundle Group — add-on items bought alongside the product.
• Pairs Well With — cross-sell rows.
• Related Articles — links to blog posts and pages.

General-purpose

• Title, Rich text, List, Accordion, and any block an installed app provides.

Blocks that hide themselves

Most product blocks render nothing when the product isn’t set up for them — no subscription plans, no bundle metaobject, no related-article metafield, and the block disappears rather than showing an empty box. That is deliberate: you can add the same block set to every product template and let each product show only what applies to it. It also means “the block isn’t showing” is usually a product data problem, not a customizer problem.

How the real product page is assembled

The live product template stacks the blocks in this order. It’s worth knowing because the order is doing real work — the price sits directly above the button on purpose, and the pack selector must come before the price for the price to have something to react to.

1. Okendo reviews badge (app block)
2. Product Reviews Overview — stars and count, links down to the reviews
3. Title — set to {{ product.title }}, rendered as the page’s h1
4. Rich text — the short description metafield
5. Product Sale Description / Collection Sale Description
6. Product Pack Selector — “Choose Quantity”
7. Product Frequency — “Choose Frequency”
8. Product Price Display — “30-day supply”
9. Bundle Group
10. Product Form Submit — Add to Cart (quantity controls off)
11. List — the three checkmark benefit bullets
12. Accordion — Product Details, Ingredients, Recommended Use, References
13. Pairs Well With
14. Related Articles

Below Product Main, the page continues with Press Bar, FAQs, a featured banner, the Okendo reviews widget, the comparison table, ingredient spotlight and related products — all separate sections.

Title and content pulled from the product

Several of those blocks contain Liquid rather than typed text — {{ product.title }} in the Title block, and metafield references in the Rich text and Accordion blocks. That’s what lets one template serve every product. If you overwrite one of those fields with plain text, that text will show on every product using the template. Edit the product’s metafields in Shopify admin instead.

Subscriptions

Subscriptions on this store are native Shopify selling plans, created by Skio. There is no subscription widget block to add to the page and no app embed to position — the Product Frequency block reads the selling plans straight off the selected variant and renders them in the theme’s own styling.

The practical consequence: which frequencies a customer can choose is configured in the subscription app, not here. Add or remove a plan there and the block picks it up on the next page load. If a variant has no plans at all, the frequency block hides itself and the product becomes one-time only.

Tips

• Keep the price directly above Add to Cart. The button label is just “Add to Cart” — the price it applies to is the Product Price Display block above it. Move the price elsewhere and customers lose the connection between the number and the button.
• Pack selector or variant options, not both. Use Product Pack Selector for the single-option pack products and Product Variant Options for anything with two or more options. Each one hides itself when it doesn’t apply, so adding both is harmless — but it’s clearer to add only the one that will render.
• Exactly one Title block, set to h1. The product page needs one top-level heading and this is it. Additional headings in the buy column should be h2 or lower.
• Test with a sold-out variant. The Add to Cart button disables and the stock message flips over. Both are easy to miss in the customizer, which usually previews an available variant.
• Padding defaults assume a section follows. The live template lowers the top padding to almost nothing because the breadcrumb already provides space under the header.