Product pages

Gallery, media, variants and swatches, other colors, inventory, subscriptions, installments, unit prices, B2B, size guide, specifications, recommendations, reviews and gift cards.

Product pages use the Product information section. To edit it, open a product template in the theme editor with the page selector at the top. Most product data, such as variants, metafields and inventory, comes from the product in your Shopify admin.

Product information settings

Image format Same as product cards, Square, Portrait, Tall, Original image format: The shape of the gallery. Square takes less room above the product details on phones. Original image format uses the shape of the first image.
Gallery on desktop Thumbnails, Two columns: One large image with thumbnails, or all images in two columns.
Open images full screen with zoom: Adds a full-screen viewer that opens on the selected image. Without JavaScript, the zoom button opens the full image in a new tab.
Slide product details over the images on mobile: On phones, the product details sit in a panel that slides up over the images.
Show sticky add to cart bar: At the bottom of the screen on mobile, at the top on desktop. It appears once the main add to cart button is out of view and hides near the footer.

Product information blocks

Add, remove and reorder blocks to build the product details column. Numbers in brackets are the maximum per section.

Breadcrumbs (1): The path from the home page to the product. Search engines read the same path as structured data.
Vendor (1): The vendor, linked to a page with all its products.
Title (1): Size: Medium or Large. Show product rating: uses the rating saved by your reviews app in the standard reviews metafield.
Price (1): The price, compare-at price and unit price. Unit prices show when they are set on the variant. A tax note and a link to your shipping policy show when they apply.
SKU (1): The SKU of the selected variant, when it has one.
Variant picker (1): The product options. See Variants.
Other colors (1): Links to related products sold separately. See Other colors.
Inventory status (1): See Inventory.
Size guide (1): See Size guide.
Buy buttons (1): The add to cart form. See Buy buttons.
Pickup availability (1): Shows where the selected variant can be picked up, from locations with local pickup turned on. See Local pickup in Shopify Help.
Highlights (1): Up to three short lines, each with an Icon and a Text. Empty lines are hidden.
Description (1): The product description. Show in a collapsible row and Open by default control how it opens.
Collapsible row: A row that opens and closes. Heading, Icon, Content (connect a metafield to show different content per product), Or show a page (shows the content of a page instead), Open by default. Rows without content are hidden.
Specifications (2): See Specifications.
Complementary products (1): See Recommendations.
Quick order list (1): See B2B and wholesale.
Share (1): Opens the share menu of the device. Where it isn't available, copies the link.
Text: Free text, for example about care or materials.
Custom Liquid: Your own Liquid or HTML code.
App blocks: Blocks from your installed apps, such as a reviews widget.

Gallery and media

The image of the selected variant comes first. To link an image to a variant, edit the variant in your Shopify admin and choose its image. When a customer picks a variant, the gallery moves to its image.
Product media can be images, videos hosted on Shopify, YouTube or Vimeo videos, and 3D models. Add them in the Media area of the product in your Shopify admin.
Thumbnails of videos show a play icon, and thumbnails of 3D models show a 3D label.
When a product has a 3D model, a View in your space button lets customers see it in augmented reality on supported phones and tablets.
The full-screen viewer shows each image whole, with zoom on click.
Write alternative text for each image in your Shopify admin. Screen readers read it, and search engines use it.

Variants

The Variant picker block shows each product option as a row of buttons. The first available variant is selected when the page opens, never a sold-out one. Sold-out values stay visible and are marked as unavailable.

Without JavaScript, the buy form shows a plain drop-down list of variants instead, so customers can still buy.

Swatches

Nappa uses Shopify's native swatches. When an option value has a swatch color or image, it shows as a round swatch instead of a button. The same swatches appear on product cards and in filters.

To set swatches:

In your Shopify admin, open the product and choose its Category, for example a clothing category.
In the variants area, link the option to the category metafield, for example Color.
Choose a color or an image for each value. You can use Shopify's standard colors or create your own entries.

See Variants in Shopify Help. On product cards, swatches need Show color swatches turned on in Product cards, and the option needs at least two values.

Other colors and combined listings

Some stores sell each color as a separate product. Nappa supports two ways to link them.

Combined listings

With the Shopify Combined Listings app, separate products appear as one product with one option. When a customer picks a value that belongs to another product, Nappa opens that product's page with the chosen options. The Combined Listings app is available only on Plus and enterprise plans, according to Shopify Help (read on November 13, 2026).

Other colors block

On any plan, the Other colors block shows small images of related products, each linked to its page. The current product comes first and is marked as selected.

In your Shopify admin, create a product metafield definition of type product list. You choose its name and key.
On each product, fill the metafield with the other products of the family.
In the theme editor, select the Other colors block. Next to Products, click the connect dynamic source button and choose your metafield.
Set the Heading, for example Other colors.

The block is hidden on products where the metafield is empty.

Inventory

The Inventory status block shows real stock only.

Low inventory threshold 1 to 20: Shows the real quantity left, for example "Only 3 left", when it is at or below this number.
Show the in-stock message above the threshold: Shows In stock when the quantity is above the threshold.

The quantity shows only when Shopify tracks the inventory of the selected variant and the variant stops selling at zero. If you let customers buy when out of stock, the quantity stays hidden. Product cards have their own badge: Low stock badge threshold in Product cards.

Buy buttons

Show quantity selector: Follows quantity rules and volume pricing from B2B catalogs.
Show dynamic checkout buttons: Customers see their preferred payment method, like Shop Pay or PayPal. The buttons depend on the payment methods turned on in your store.
Show Shop Pay Installments banner: Shown when installments are available for the price. See Shop Pay Installments.
Show gift card delivery note: On gift card products, shows the note that the card is sent by email, and the form to send the card to someone else. See Gift cards.

The add to cart button shows the price of the selected variant. Without JavaScript, the button sends the product to the cart page.

Subscriptions

Subscription options appear on products sold with a selling plan. To sell subscriptions, install a subscription app, such as Shopify Subscriptions, and create a plan for your products. See Subscriptions in Shopify Help.

The Buy buttons block shows a Purchase options choice: one-time purchase and each plan, as cards with their price. When a plan costs less than a one-time purchase, the card shows the saving as a percentage.
If a product can only be bought with a subscription, the first plan is selected and there is no one-time option.
The cart shows the plan name under the product.
Product cards show a subscription badge when Show subscription badge is on.

Shop Pay Installments

With Show Shop Pay Installments banner on, the product page shows the installments message under the price when installments are available for the price. Shop Pay Installments needs Shopify Payments and is available only in some countries. See Shop Pay Installments in Shopify Help.

Unit prices

Unit prices show under the price, on product cards and in the cart, for example $2.81/fl oz. Set them on each variant in your Shopify admin. See Unit pricing in Shopify Help.

B2B and wholesale

If you sell to companies with B2B catalogs, Nappa shows their quantity rules and volume pricing to signed-in business customers. See Quantity rules and volume pricing in Shopify Help.

Quantity rules: turn on Show quantity selector in the Buy buttons block. The selector starts at the minimum, moves by the increment and stops at the maximum. A note under it explains the rules.
Volume pricing: a Volume pricing table lists the price for each quantity break of the selected variant.
Quick order list block: a table of every variant with a quantity field, for wholesale or bulk buyers. It respects quantity rules. Customers enter quantities and add the whole selection at once. It works without JavaScript. Heading sets its title. Hidden on products without variants.

If your B2B catalogs set a minimum quantity above 1, turn on Show quantity selector. Without it, the add to cart button adds one unit, and Shopify refuses quantities below the minimum.

Size guide

In your Shopify admin, create a page with your size chart, for example "Size guide".
In the theme editor, select the Size guide block and choose the page in Page.
Change the Link label if you want.

The page content opens in a panel. Without a page, the link is hidden.

Specifications

The Specifications block shows a list of labels and values, such as weight or heel-to-toe drop. It has up to 8 rows, each with a Label and a Value. Empty rows are hidden.

Connect each value to a product metafield, so each product shows its own data:

In your Shopify admin, create a product metafield definition for each value, and fill it on your products.
In the block, type the Label, for example Weight.
Next to Value, click the connect dynamic source button and choose the metafield.

You can add two Specifications blocks, for example one for dimensions and one for materials. The Heading setting titles each list.

Recommendations

Complementary products

The Complementary products block shows products that go well with this one, under the heading "Pairs well with". Set complementary products in the Search and Discovery app. See Product recommendations in Shopify Help.

Products to show: 1 to 6. The block is hidden when a product has no complementary products. The same data feeds the recommendations in the cart.

The Related products section, under the product information, shows similar products. Shopify picks them automatically from sales and product data. You can also choose them in the Search and Discovery app.

Product comparison

To compare products side by side, add the Product comparison section to any template. Its rows read the price, vendor, product type, colors, sizes, availability, or any product metafield whose namespace and key you enter, for example custom.weight. The theme doesn't need any fixed metafield. See Product comparison.

Reviews

Nappa shows star ratings from Shopify's standard product rating metafields, reviews.rating and reviews.rating_count. Only review apps can fill these metafields, so you need a reviews app that writes them. Most reviews apps in the Shopify App Store do; check the app's documentation.

On product pages: turn on Show product rating in the Title block. The stars and the number of reviews show under the title.
On product cards: turn on Show star rating in Product cards.
To show the reviews themselves, add the app's block to the Product information section, or the app's section under it.

Products without reviews show no stars. Nappa never shows sample ratings.

Gift cards

Create gift card products in your Shopify admin. See Gift card products in Shopify Help.

On a gift card product page, with Show gift card delivery note on, customers can send the card to someone else: they tick a box, then enter the recipient's email, name, a message and a send date. This form works without JavaScript.
The person who receives the card gets a gift card page with the code, a QR code, buttons to copy the code and print the page, and an Apple Wallet button when available.

Different layouts for different products

To give some products a different layout, create a new product template in the theme editor, change it, then assign it to products in your Shopify admin. See Templates in Shopify Help.