How to Add a Section to the Product Page in Shopify

The product page is where most stores need custom content — a size chart, a care guide, a spec table, shipping details, an upsell block. This guide adds a section to the product template on an Online Store 2.0 theme, shows how to make it product-aware by reading product data and metafields, and covers the difference between a full section and a block inside the product form.

The product template is templates/product.json. Whatever you add here appears on every product that uses this template — which is usually what you want for something like a size chart, but worth remembering before you add product-specific copy directly in a section setting.

Step 1 — Open a product in the theme editor

Go to Online Store → Themes → Customize, then use the page dropdown in the top bar to switch to Products and pick a product to preview. The editor loads product.json, and the sidebar shows the product page's structure — typically a main product section (the gallery and add-to-cart form) plus any additional sections below it.

As always, if the change is nontrivial, duplicate the theme first so live products are never affected mid-edit.

Step 2 — Add a section below the product form

Click Add section in the sidebar. The menu lists sections available on the product template — the theme's built-ins and any custom section with a presets block in its schema. Pick yours; it drops in below the main product section. Drag it to reorder, click to configure, and Save.

This is the right approach for a self-contained block that sits under the product — a full-width FAQ, a reviews grid, an upsell row.

Step 3 — Or add a block inside the product form

Shopify's product page has a special structure: the main product section contains blocks — the title, price, variant picker, buy buttons, and so on — that you can reorder and add to individually. If your content belongs inline with the product form (a trust badge under the buy button, a short delivery note beside the price), add it as a block rather than a separate section.

In the sidebar, expand the main product section, click Add block, and choose your custom block or a built-in like Custom Liquid. Blocks are defined in a section's schema under a blocks array; the deeper reference is in Section schema and blocks.

Step 4 — Make the section product-aware

The reason a product-page section is different from a homepage one is that it has the product object in scope. Read from it so the section shows the right content for each product automatically, rather than the same static text everywhere.

<section class="product-extra">
  <h2>{{ section.settings.heading }}</h2>

  {% if product.metafields.custom.care_guide != blank %}
    <div class="product-extra__care">
      {{ product.metafields.custom.care_guide }}
    </div>
  {% endif %}

  <p class="product-extra__sku">SKU: {{ product.selected_or_first_available_variant.sku }}</p>
</section>

Two things are doing the work here:

• product.metafields.custom.care_guide reads a metafield defined under Settings → Custom data → Products. The content lives with the product, so each product shows its own care guide with no per-product theme editing. The != blank guard hides the block on products that have no care guide set.
• product.selected_or_first_available_variant gives you the variant a shopper has selected, so data like SKU or a variant metafield stays correct as they switch options.

Reading from metafields is what turns a static section into a data-driven one that scales across a catalog. To display them cleanly, see How to create a custom section for the settings-and-schema pattern this builds on.

Which template does the product actually use?

Most stores use a single product.json for everything, but Shopify supports template alternates — product.bundle.json, product.giftcard.json, and so on. A product can be assigned an alternate under its Theme template dropdown in the admin. If a section you added is not showing on a particular product, confirm which template that product is assigned to; you may have edited product.json while the product uses an alternate.

Keeping product-page sections on a theme update

Your product section — the file and its placement in product.json — is part of the theme. That is the normal setup, with the usual caveat: installing a new theme version or switching themes publishes a fresh copy of the theme's files, and a custom section that is not carried over cannot be referenced. On a high-traffic product page, losing a size chart or shipping block after an update is a real problem.

Two honest options:

1. Track custom files and re-apply them after each update, following Update your theme without losing customizations.
2. Render the section from an app via a Theme App Extension, so the block appears in the product page's editor but is not tied to the theme's files.

If your product-page content is business-critical, SectionGuard renders it from the app rather than the theme — so the section, its product data, and its placement survive every theme update and swap. See how the two approaches compare on File-based vs. app-based sections.