Product page

The product page: breadcrumbs, the product information section and related products. Product information is the largest section in the theme. Its blocks cover media, title, price, variants, add to cart, shipping notes, stock alerts and more, and their order in the panel is their order on the page.

Good for

• Laying out the buy area once and having every product use it
• Adding reassurance next to the buy button: shipping, stock, pickup and payment icons
• Cross-selling with complementary products, gift wrap and related blog posts
• Running a second layout for one product type through an alternate template

Set up the blocks that need data from your admin

1. Complementary products. Install Shopify's free Search & Discovery app, open Recommendations, pick a product and add its complementary products. The block fetches them for each product it's shown on; products with none assigned hide the block entirely.
2. Gift wrap. Create a product such as "Gift wrap", set a price, turn off Track quantity, and keep it available on the Online Store sales channel (set its status to Unlisted if you don't want it in collections or search). Then pick it in the block's Gift wrap product. When a shopper ticks the box, the wrap is added to the cart in the same quantity as the product.
3. Stock alert. Turn on Track quantity for the product's variants (Products → the product → Inventory). The low-stock warning and meter need a tracked stock count to work from.
4. Store pickup. In Settings → Shipping and delivery → Local pickup, turn on pickup for each location that should offer it, and stock the variant at those locations. The block has no settings; it shows "Pickup available" with the first location that has it, with a drawer listing the others.
5. Rating. Install a product reviews app that saves ratings to Shopify's standard product rating metafield (most do, such as Judge.me). Stars and the review count appear once a product has at least one rating; the block shows nothing for products without reviews.
6. Icon list. With Enable custom icons off, the block reads each product's own list from the metafield you name in Theme settings → Product card → Icon list. Turn that list on there and fill the metafield on each product.
7. Key stats. To show different stats per product, create a product metafield (namespace and key sublime.key_stats, type Rich text), fill it in on each product as Value: Label lines, then connect it to Stats with the dynamic source button.
8. Size guide. Create a page with your size chart (Online Store → Pages), then in the Variant picker block turn on Show size guide link, type the option name it belongs to in Show next to option, and pick the page or upload a Size chart image.

Breadcrumbs settings

Layout

Appearance

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Product information settings

Layout

Gallery

Image

Thumbnail image

Features

Badges

Appearance

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Product information blocks

Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.

Title block

Product metadata block

Icon list block

Icon list will be taken from global settings (product card)

Item 1–3

Each of the 3 items has the same settings, set separately for each one.

Rating block

Install a product reviews app to show ratings here. Its widget renders automatically.

Price block

Variant picker block

Layout

Size guide

Stock alert block

Displays only the "In stock" label when inventory is above the chosen threshold.

Appearance

Buy buttons block

Gift wrap block

Allow customers to add gift wrapping to their product. The gift wrap product is bundled with the main product in a single add-to-cart request.

The gift product should be unlisted and inventory tracking must be disabled.

Appearance

Key stats block

Appearance

Tags block

Content

Share block

Complementary products block

Content

Recommendations are set per product in the Search & Discovery app. No collection needed.

Related blog posts block

Source

Information table block

Content

Table content

Disclaimer

Appearance

Sticky add to cart block

Highlights block

Item 1–2

Each of the 2 items has the same settings, set separately for each one.

Style

Custom Liquid block

Spacer block

Accordion block

Related products settings

Shopify picks the products for each product page automatically, based on past orders, product descriptions and the collections a product is in. The picks get better over time as your store gets more orders.

To choose them yourself, install Shopify's Search & Discovery app, open Product recommendations and pick the related products for a product. Your picks show ahead of the automatic ones, and you can hide the automatic ones for that product.

The section shows as many products as you set in Products to show, and hides itself on a product with nothing to recommend. In the theme editor, that product shows sample cards instead, so you can still style the section.

Content

Layout

Appearance

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Tips

• Make a second product template for products that need a different layout. In the theme editor, open the page dropdown at the top, choose Products → Create template, name it (for example "Gift card" or "Bundle") and base it on Default product. Change its blocks, then in the admin open each product and choose the new template under Theme template.
• Use Page content accordions for shared text. Point your Shipping or Returns accordion at a store page; updating that one page updates every product.
• Use the Tags block's filter to hide internal tags. If you tag products with things like badge:new or internal:, add those prefixes to Tag filter so shoppers never see them.
• Turn on the Sticky add to cart block when the page is long. The bar only slides in once the main buy button has scrolled out of view, so it never doubles up.
• Keep the Custom Liquid and app blocks near the buy button if they add purchase options (subscriptions, bundles). Shoppers look for them before they decide.

Troubleshooting

The complementary products block doesn't show

It only appears when the product has complementary products assigned in the Search & Discovery app. With none assigned (or the app not installed) the block removes itself, even in the theme editor. Assignments can take a few minutes to start showing.

The gift wrap checkbox isn't on the product page

The block stays hidden until you choose a Gift wrap product, and that product needs an available variant. If the wrap product is sold out, drafted or not available on the Online Store channel, the checkbox doesn't appear. Turning off inventory tracking on the wrap product stops it from ever selling out.

The stock alert shows nothing, or never says "In stock"

The In stock label and the low-stock warning both need inventory tracking on the variant. Variants without tracking show no stock message at all. Sold-out variants always show Out of stock.

The size guide link doesn't appear

Check three things: Show size guide link is on, a Size guide page or Size chart image is set, and Show next to option matches the option name exactly, including capital letters ("Size", not "size").

Store pickup shows for some products but not others

The block only appears for variants stocked at a location with local pickup turned on. Variants that no pickup location stocks hide it.