Product page

The product page has a media gallery on one side and a column of blocks on the other. Every block reads from the product in Shopify admin. When a shopper picks a variant, the gallery, price, SKU, stock, spec table, pickup availability and buy buttons all update in place, and the page address changes to that variant so it can be shared or bookmarked.

The default product template

Reorder, remove or add blocks under the Product section. On screens too narrow for two columns, the gallery comes first and the blocks follow.

Breadcrumbs

Product › "Show breadcrumbs", on by default, shows a one-line trail above the gallery: HOME, then the collection the shopper came from, then the product. Products opened from a collection page's grid link through that collection, as /collections/audio/products/earshot-05, so the trail can name it, and it stays in the address when the shopper picks a variant. The all-products collection, /collections/all, and Shopify's vendor and product type pages, /collections/vendors?q=… (where the Product vendor block links) and /collections/types?q=…, are the exception: their products link to the plain address, because the product page can't name them. Products opened from search, recommendations, a Featured collection or the search panel link to the plain /products/earshot-05, and the trail reads HOME / EARSHOT 05. Either way the page's canonical address is the plain one.

Long titles are shortened with an ellipsis to keep the trail on one line; the full title is in the heading below. The trail matches the page's breadcrumb structured data for search engines, which stays on even when the trail is off.

Gallery

The gallery shows one media item at a time in a panel. The panel header shows the variant's SKU followed by ".RENDER", for example "CB-3M-1 .RENDER", or "Media" when there's no SKU, and the number of views. The ".RENDER" suffix is part of the terminal voice; change or remove it in Edit default theme content by searching for ".RENDER". See Motion, effects & voice.

• Thumbnails appear under the main image when a product has more than one media item. Video and 3D thumbnails carry a small play or cube icon.
• Videos you upload play with standard controls. YouTube and Vimeo videos play in their own player.
• 3D models can be rotated in the page by dragging, or with the arrow keys once the model has keyboard focus. On phones and tablets that support augmented reality, a cube button in the model's bottom corner (bottom right, or bottom left in right-to-left languages) opens the model in your space. Screen readers announce it as "View in your space". It sits over the model, so on a phone a model takes the same height as an image or a video and picking it doesn't move the rest of the page.
• Variant images. When a variant has its own image, choosing that variant shows it.
• Swipe. On a phone or tablet, swiping the main image left or right shows the next or previous media item, in the same order as the thumbnails. It stops at the first and last item, and the direction mirrors in right-to-left languages. A swipe that starts on a video or a 3D model is left to the player or the model, so its controls and rotation work as usual. To swipe past one, start in the narrow strip on either side of it, which touch screens show beside every video and 3D model. A playing video pauses when it's swiped away.

Zoom and full-screen view

With Product › "Enable image zoom" on, the default, each image in the gallery has a zoom button in its top corner, and clicking the image does the same: the image opens full screen, on the page background, with "Image 2 of 5" above it and Previous, Zoom and Next below. Featured product has the same setting.

• Zoom. Click or tap the image, or press Zoom, to zoom in 2.5 times at that point; do it again to zoom out. On a touch screen, pinch between 1 and 4 times. A trackpad pinch zooms too.
• Pan. Drag a zoomed image, or scroll it with the mouse wheel, the trackpad or its scrollbars. From the keyboard, Tab to the zoomed image and use the arrow keys; after zooming with a click, the arrow keys pan straight away.
• Next and previous. Previous and Next, the Left and Right arrow keys, Home and End, and swiping step through the product's images. Videos and 3D models aren't shown full screen; they stay playable in the gallery. The gallery behind follows along, so closing the view leaves it on the image last viewed.
• Close. Escape or the close button. Keyboard focus returns to that image's zoom button.

Full-screen images load only when the view opens, at up to 3200 pixels wide, so the page loads no more than before. Without JavaScript, the zoom button opens the full-size image in the browser. With the setting off there are no zoom buttons, and swiping still works.

The first image loads with high priority. Other images load as needed.

Blocks

The blocks below from Product metadata to Spec table are product blocks. Product metadata, Back-in-stock request, Pickup availability and Spec table work only in the Product section; the rest also work in Featured product. Collapsible row, Text and Custom Liquid are general blocks, and the Product section also offers the other general blocks (Eyebrow, Heading and Button) and Generate, which creates a block from your description. See AI-generated blocks.

Product metadata

A small line above the title: product type, vendor and variant SKU, separated by slashes.

Product vendor

The vendor, linked to a page of all products from that vendor. Hidden when the product has no vendor.

Title

The product title.

Price

The variant's price in the accent color. When the variant is on sale, the price uses the alerts color and the compare-at price is shown struck through. Unit prices, such as "$2.40 / 100 g", appear underneath when set on the variant.

Theme settings › Commerce › "Show currency code" adds the currency code, such as USD, beside this price. The same setting adds it to product cards, Kits, the Hero's featured unit, the add-to-cart button, subscription plan prices, search suggestions, filter chips and the cart's line prices and totals. Unit prices, such as "$2.00 / 100 g", never carry the code.

Inventory

A stock label for the selected variant:

Variant picker

One control per product option, such as Color and Size. The selected value is shown beside the option name. Techno chooses the control for each option:

A value is shown faded when no available variant has it together with the values chosen in the options above it. Shoppers can still select a faded value. The add-to-cart button then reads "Sold out" if that variant exists but is sold out, or "Unavailable" if you don't sell that combination at all.

Once the page has updated, screen readers hear what the choice came to, for example "Black / M selected. $25.00. In stock." or "… Sold out.", or "Unavailable" for a combination you don't sell. On a subscription-only product, a variant no plan covers ends "… Unavailable." (see Subscriptions). To change the wording, search for "selected." in Edit default theme content, and keep the {{ variant }}, {{ price }} and {{ availability }} placeholders.

If the chosen variant can't be loaded, for example because the shopper's connection dropped, the add-to-cart button is turned off, the accelerated checkout buttons and the stock and pickup lines are hidden, and "This option couldn't be loaded. Refresh the page to try again." appears under the add-to-cart button. Screen readers hear it too. The message goes away as soon as the shopper chooses another option. To change the wording, search for "couldn't be loaded" in Edit default theme content.

When a shopper leaves the page and comes back with the browser's Back button, the browser can put back the option they had chosen. The page then updates to that option, so the price, stock and add-to-cart button match it and Add to cart adds it. Screen readers don't hear the choice again, because the shopper made it on their earlier visit. This also applies to Featured product sections and to the gift card recipient checkbox.

To show swatches, connect the option to a category metafield with swatch colors or images in Shopify admin, for example the Color metafield for the product's category.

Products with more than 250 variants work too. Shopify gives a page the details of the first 250 variants only, so when a shopper picks a combination past those, the page asks your store for it. Add to cart turns off for that moment and comes back once the page shows the variant. On such a product, faded values update each time the page updates, not while the shopper is picking.

If JavaScript is turned off in the shopper's browser, or the theme's script fails to load, the buy buttons also show a dropdown of every variant, so the right one can still be added. On a product with more than 250 variants, the dropdown lists the first 250 and the variant the page opened on.

Combined listings (Shopify Plus)

With Shopify's Combined Listings app, each color or model of a product can be its own product, shown together in one picker. When a shopper picks a value that belongs to another product of the listing, the page loads that product in place: the gallery, title, price, stock, spec table, pickup, description, buy buttons and recommendations all change to it. The address and the browser tab's title change to that product, and the browser's Back and Forward buttons move between the products. Keyboard focus stays on the value, and screen readers hear one sentence naming the product, for example "Tether 3m: Black selected. $29.00. In stock." To change the wording, search for "selected." in Edit default theme content.

Nothing is loaded for the other products until a shopper picks one. If a product of the listing uses a different product template, picking it opens its page instead. In a Featured product section and in quick view, the pick changes that section or panel and never the address. Without JavaScript, each option lists the listing's products under "Choose Color" as links. On stores without combined listings nothing changes.

Description

The full product description from Shopify admin.

Buy buttons

The quantity selector, add-to-cart button and checkout buttons.

On screens wider than 600 px, the add-to-cart button also shows the price, for example "Add to cart · $249.00". It changes to "Sold out" or "Unavailable" when the selected variant can't be bought, and to "Pre-order · $249.00" when it's a pre-order (see Pre-orders).

Adding to cart opens the cart drawer. If something goes wrong, for example the shopper asks for more than you have in stock, the reason appears under the button and the cart doesn't open.

Sticky add-to-cart bar

Once the add-to-cart button has scrolled up out of view, including under a sticky header, a slim bar docks to the bottom of the screen with the product title, the selected variant, its price and an Add to cart button. It goes again when the button is back in view, and while the footer is on screen, so it doesn't cover the footer. The one exception is focus: if the bar's button has focus when the footer comes on screen, from the keyboard, a tap or a screen reader, the bar stays until focus moves on, so the focused button never disappears, and the end of the page makes room for it, so the footer's last line can still be scrolled clear of the bar. Focus left on the button by a mouse click doesn't hold the bar; it goes to the buy box's own button, without scrolling the page. It doesn't appear on the first screen, even when the button starts below the fold on a small phone.

The bar's button adds exactly what the buy box would, from the same form: the chosen variant, the quantity, the subscription plan and the gift card recipient details. When the quantity isn't the default, the bar shows it, for example "Qty 3". The button follows the buy box: "Pre-order" for a pre-order, "Sold out" or "Unavailable" when the variant can't be bought, and turned off while a variant change is loading. If the add fails, for example because of a stock limit or an invalid gift card email, the page scrolls to the message under the buy box and the bar hides.

It appears on the Product section only, never in a Featured product section, and once per page even with two Buy buttons blocks. It doesn't animate. With JavaScript off, or if the theme's script can't load, there's no bar. The back-to-top button moves up above it while it shows. Custom code that places something at the bottom of the screen, such as a chat button, can do the same with --tc-dock-bottom (see Design tokens).

The note under the button

A single line built from what applies:

1. "Free dispatch over" and your amount, such as "Free dispatch over $150.", when Theme settings › Commerce › "Free dispatch over" is above 0 and the shopper is browsing in your store's currency
2. Your "Returns note", when set
3. "We do not email you about our journey." when Theme settings › Copy › "Show system chatter in copy" is on

With neither a free dispatch amount nor a returns note, the line is hidden. That's how the product page starts: "Free dispatch over" is 0 and the default product template has no returns note, so the line appears once you set one of them.

Back-in-stock request

When the selected variant is sold out, this block shows "Notify me when available", your text, an email field and a "Notify me" button under the buy box. For any variant that can be bought it's hidden and takes no space. It's in the default product template after Buy buttons; remove it, move it, or add it back from Add block in the Product section.

What you receive. A request is sent through your store's contact form, the same one as the Contact page, so you get one email per request at your store's sender email address (Settings › Notifications). It lists the shopper's email, the product, the variant, its SKU and ID, and a link to it. For a product with only one variant, it names the product alone, for example "Please email me when Earshot 05 is back in stock.", and the variant is left empty. That's all it does: the shopper isn't subscribed to your newsletter, nothing is added to a list, and nothing is sent to them automatically. When the variant is back in stock, reply to the shopper yourself. If you can't promise to do that, remove the block, or use a back-in-stock app instead.

After sending, the shopper stays on the same variant and sees "Request sent. We'll email you when this variant is back.", or "Request sent. We'll email you when it's back." on a product with only one variant. A line under the field says "We use this address only to answer this request." and links to your privacy policy when you have one. Shopify filters spam on contact forms; turn on hCaptcha in Online Store › Preferences for more protection. The theme adds nothing of its own.

When the shopper picks another variant, the request hides at once and comes back for the new variant if that one is sold out too, with the email they typed. So a request always names the variant on screen. Without JavaScript, the page doesn't update when a variant is chosen from the dropdown, so the request names the variant the page opened on.

Recipe: restock requests for a launch. Keep the block's defaults, set up a mailbox rule for "is back in stock" at your sender address, and when a shipment lands, reply to each request. The link in each email opens the exact variant.

Pickup availability

Shows whether the selected variant can be picked up. It names the first pickup location that has the variant in stock, or the first pickup location when none has stock, and, when it has stock there, its usual pickup time. When you have more than one pickup location, "Check all 3 locations" expands a list with each location's stock and address.

Set up local pickup in Settings › Shipping and delivery › Local pickup. The block is hidden for variants with no pickup locations.

Spec table

A panel of product details, built from data you already keep in Shopify. The panel updates when the variant changes. The option rows change as soon as the shopper picks, like the value beside each option name, including when the variant can't be loaded or the combination isn't sold. The SKU, weight and barcode rows change once the page shows the new variant, so in those two cases they keep the previous variant's details.

A row is skipped when its data is empty. When every row is empty, the panel is hidden.

Rows from metafields

Add Spec row blocks to the Spec table to show your own specifications, such as battery life, capacity or connectivity, from product metafields. Each product then shows its own values.

1. Create the metafield definitions in Settings › Custom data › Products, for example specs.battery_life (integer) or specs.connectivity (list of single line text), and fill them in on your products.
2. In the theme editor, open a product template, select the Spec table block and click Add block › Spec row. The Spec table offers only Spec rows, and no other section or block offers them.
3. Set "Label", such as "Battery life". The editor lists each row by its label.
4. Set "Product metafield" to the metafield's namespace and key, such as specs.battery_life. You can copy it from the definition's page.
5. Optionally set "Unit", such as "h" or "mAh". It's shown after the value, on the same line.

Rows without a value are hidden. A product that doesn't have the metafield, or has it empty, shows no row: nothing is left in the page for shoppers or screen readers. A row with no "Label" is hidden too. In the theme editor, a hidden row shows a "Not shown to shoppers" note in its place, so you can still select it, and says why:

• this product has no value for the key, which the note names. If no product shows a value, check the key against Settings › Custom data › Products: keys are case-sensitive, so Specs.Capacity finds nothing where the key is specs.capacity;
• the row has no label;
• the row has neither a "Product metafield" nor a "Value" yet (or its "Value" is connected to a metafield this product doesn't have);
• the "Product metafield" isn't in the namespace.key form.

A "False" true-or-false metafield is a value, so its row shows "No".

Typed values and dynamic sources. When "Product metafield" is empty, the row shows "Value". A typed value shows on every product that uses the template, such as "Warranty: 2 years". "Value" also takes a dynamic source: connecting it to a metafield shows each product's own value, but Shopify prints it unformatted there. A list runs its items together ("USB-CXLR"), a date reads 2026-03-12, a number has no separators, and a true-or-false metafield can't be connected. Use "Product metafield" for those.

Variants. Spec rows show product metafields, the same for every variant. They stay in place when a shopper picks another variant.

Limits. Rows nested in the Spec table don't count toward the Product section's limit of 50 blocks. A template can hold 1,250 blocks in all. Rows that use "Product metafield" don't use dynamic sources, so the limit of 100 dynamic sources per template applies only to rows whose "Value" is connected. The theme's templates/product.json ships with no Spec rows, because a new store has none of your metafields: add yours in the theme editor.

Collapsible row

A heading that expands to show more content, for details shoppers look for but don't need up front.

Add one Collapsible row per topic: Shipping, Returns, What's in the box, Care. For a list of questions below the product rather than rows in the buy column, add an FAQ section under the Product section.

Text

Rich text, the same on every product that uses the template. For per-product text, connect a metafield as a dynamic source.

Custom Liquid and apps

Add a Custom Liquid block for your own code, or an app block from Add block › Apps for reviews, size guides and similar. See Custom code.

Subscriptions

When a product is sold with a subscription app, the Buy buttons block shows a choice between "One-time purchase" and each subscription plan, with its price for the selected variant. A plan the selected variant isn't sold with can't be chosen: its radio button is dimmed, and it reads "Not available for this variant" instead of a price. If the product can only be bought as a subscription, the first plan the selected variant is sold with is selected and there's no one-time option. If no plan covers that variant, it can't be bought: Add to cart reads "Unavailable" and is turned off, as it is for a sold-out variant ("Sold out" when the variant is also out of stock), and the stock line and pickup availability are hidden, whether the page opened on that variant or the shopper picked it. A link that names a plan, for example from a subscription app, selects that plan only when the variant is sold with it. Cart lines show the plan name.

The chosen plan stays selected when the shopper picks another variant, and when they come back to the product with the browser's Back button. On a variant no plan covers, nothing can be selected, but the plan is remembered and selected again on the next variant sold with it. Until the page has updated for a new variant, Add to cart waits if the selected plan isn't sold with that variant, and, on a subscription-only product, if no plan is selected because the previous variant had none. If you have two Buy buttons blocks, each one keeps its own plan. If the new variant isn't sold with the chosen plan, the default comes back ("One-time purchase", or the first plan the variant is sold with when a plan is required). A message under Add to cart then says: "The plan you chose isn't offered for this variant. Check what's selected now before adding to cart." Screen readers hear it too. It goes away when the shopper picks a plan, chooses another option or adds to cart. To change the wording, search for "isn't offered for this variant" in Edit default theme content.

When a plan charges part of the price at checkout and the rest later, as a pre-order deposit or try before you buy does, its row also shows both amounts, for example "$20.00 due today · $80.00 later". Subscriptions always charge in full, so they never show this.

Pre-orders

Techno can show a variant as a pre-order: "Pre-order · $249.00" on the button, "Pre-order" as the stock line, "… Pre-order." for screen readers after a variant change, and your note, such as "Ships in March", under the button. It's never automatic. Turn it on in the Product section, and in any Featured product section that should show it, under Pre-orders:

The note also goes to the cart as a line item property, "Pre-order: Ships in March", or "Pre-order: Yes" when you haven't written one. Shoppers see it on the cart line, at checkout and in their order confirmation, and you see it on the order. Test one order placed with a "Buy it now" or Shop Pay button before relying on the property there.

Per product. Most stores sell only some products ahead of stock. In the theme editor, on the product template, connect "Show oversold variants as pre-orders" to a true or false product metafield (for example, one named "Pre-order when oversold") with the dynamic source button, and "Pre-order note" to a text metafield. Then set them on each product in Products › the product › Metafields. A product with the metafield empty is not a pre-order.

What changes with a variant. When a shopper picks another variant, the button changes at once. The stock line, the note and the line item property follow as soon as the page has updated for the new variant, and a variant that isn't a pre-order is never added with the property, even if the shopper adds it before the page has updated. Switching to a pre-order from a variant that isn't one, Add to cart, the sticky bar's button and the accelerated checkout buttons wait for that update, so a pre-order is never added without the property. Without JavaScript, or if the theme's script doesn't load, the variant dropdown in the buy box shows "Pre-order" for pre-order variants too; with no JavaScript at all, the property goes with whatever variant is added when the page opened on a pre-order.

Gift cards

On a gift card product, the Buy buttons block adds a checkbox, "I want to send this as a gift". Ticking it opens fields for "Recipient email", "Recipient name", "Message" (up to 200 characters) and "Send on (optional)", up to 90 days ahead. Shopify emails the gift card to the recipient on that date.

Accelerated checkout buttons are hidden on gift card products.

Product recommendations

A row of product cards under the product. It loads once the rest of the page has finished loading, or sooner if the shopper scrolls toward it, so it doesn't slow down the product page and is usually in place before shoppers reach the bottom. A shopper who gets there first sees it appear above the footer. With the browser's data saver on, it loads only as the shopper scrolls toward it. The header shows how many products are recommended. The cards have the same controls as everywhere else, including the "Compare" checkbox when product comparison is set up.

• Related products come from Shopify's automatic recommendations, based on purchase history and product descriptions.
• Complementary products must be set for each product in the Search & Discovery app. Until you do, this row stays hidden.

A row with no recommendations is hidden. This section can only be added to product templates.

Recipes

Accessory template without specs

• Product section › Spec table: remove
• Product section › Add block: Collapsible row › "Heading": "Compatibility", "Content": a product metafield
• Assign the template to accessories under Theme template in Shopify admin

Stock urgency

• Inventory › "Low stock threshold": 5
• In Shopify admin, turn on inventory tracking and turn off "Continue selling when out of stock" for those products

Shipping and returns up front

• Theme settings › Commerce › "Free dispatch over": your free shipping amount, for example 200
• Buy buttons › "Returns note": your returns terms, for example "60-day returns."
• Add block: Collapsible row › "Heading": "Shipping", "Content": your delivery times
• Or, below the Product section, Add section: Icon row, with an Item each for shipping, returns and warranty, linked to your policies

See also

• Product sections: Featured product uses the same blocks
• Cart drawer & cart page: what happens after add to cart
• Blocks reference: every block setting