Product page

This page covers the product page (the Product information section and its blocks), the Featured product section, and everything else that shows a product: product cards, the quick add button and the quick add window.

How the product page is built

The product template holds three sections: Product information, Product recommendations and Recently viewed (see Sections). To edit it, go to Online Store > Themes > Customize and open a product page from the template picker at the top.

Product information is a media gallery beside a column of blocks that you can add, remove and reorder. Blocks that follow one another, such as the title, the price, the variant picker and the buy buttons, join into one rounded card. Collapsible rows, complementary products, the SKU and the share button stand on their own. The section's own settings control the gallery, the breadcrumbs, the color scheme and the spacing: see all Product information settings.

Media gallery

Gallery layouts

Gallery layout has four choices:

• Thumbnails: one photo or video at a time, with previous and next buttons and a counter. The thumbnails sit in a column beside the media on desktop and in a row under it on smaller screens.
• Stacked: all media in one column on desktop.
• Carousel: a row that customers swipe, or move with the previous and next buttons, on every screen.
• Grid: two columns on desktop, with the first media at full width.

On phones and tablets (screens narrower than 990 px), Stacked and Grid become a row to swipe, with previous and next buttons and a counter, so the buy buttons are not pushed far down the page. When the page opens, the selected variant's image comes first. A product with no media shows a placeholder illustration.

Ratio, zoom, video and 3D models

• Media ratio sets the shape of every frame: Portrait (4:5), Square, or Adapt to first media, which uses the proportions of the product's first media for all of them.
• Enable image zoom adds a plus button to each image. It opens the image enlarged in a lightbox, where customers move between images with the previous and next buttons or the arrow keys, and close with the close button, the Escape key or a click outside the image. Zoom applies to images only.
• Videos (uploaded to Shopify, or YouTube and Vimeo videos added as product media) and 3D models show their cover image with a button. The player loads when the customer presses the button, which keeps the page fast, and stops when the customer moves to another media.
• A 3D model opens in Shopify's viewer, with its controls for zoom and full screen. On devices that support augmented reality, a "View in your space" button also shows on the model.
• Loop videos repeats videos that are uploaded to Shopify.

Sticky content

With Enable sticky content on desktop on, one side stays in view while the other scrolls. With Thumbnails and Carousel the gallery stays in view beside a long column of blocks. With Stacked and Grid the product information stays in view beside the tall gallery.

Variant picker

The Variant picker block shows one group per product option. It is hidden for products with a single variant.

• Style is Pills (every value is a button, and the selected value's name shows beside the option's name) or Dropdown (one menu per option).
• Show swatches applies to pills. It replaces the pills of an option with round swatches when its values have swatch colors or images in Shopify (see Color swatches).

When a customer chooses a value, the price, stock message, SKU, buy buttons and pickup availability update without a page reload, and the page address changes to that variant, so a shared link opens the same variant.

Color swatches

Swatch colors and images come from Shopify, not from the theme. The theme reads the swatch that Shopify stores with each option value: a color, an image, or both (the image is drawn over the color). It does not guess a color from a value's name, such as "Red", and it has no color list of its own.

In Shopify, a swatch belongs to an option value that comes from a category metafield, such as Color. When you edit a product's options in the Shopify admin and connect the option to that metafield, each of its entries carries a color or an image.

An option shows as swatches when all of this is true:

1. The block's Style is Pills.
2. Show swatches is on.
3. At least one value of the option has a swatch color or image in Shopify.

If an option shows as text pills, its values have no swatch in Shopify yet. If only some values have one, the others show as empty circles, so give every value a swatch.

The same swatch data fills the color dots on product cards, the options panel of the quick add button and swatch filters on collection pages.

Variant images

When a customer picks a variant that has its own image, the gallery moves to that image. Assign the image to the variant in the Shopify admin.

Sold-out and unavailable values

A value that cannot be bought with the rest of the current selection stays selectable, so customers can still see it, and is marked: a pill is struck through with a dashed border, a swatch is faded with a line across it, and a dropdown entry ends with "unavailable". The add to cart button then reads "Sold out" when the variant exists but has no stock, or "Unavailable" when the combination does not exist. In that second case the price, the SKU, the stock message and the pickup information are hidden until the customer chooses another value.

Price

The Price block shows the selected variant's price.

• Sale price: when the variant's compare-at price is higher than its price, the price shows as a sale price with the compare-at price struck through.
• Unit price: shows with the price when the variant has one in Shopify, for example per 100 ml.
• Show taxes and shipping note adds a line that reads "Tax included." or "Taxes calculated at checkout.", depending on whether your store's prices include tax, followed by "Shipping calculated at checkout."
• Show Shop Pay Installments shows the installments message when your store offers them.

To add the currency code, turn on Show currency codes in Theme settings > Currency format.

Stock message

The Inventory status block shows a message such as "Only 3 left". The number is the variant's real inventory quantity in Shopify; the theme never invents one. The message shows only when all of this is true:

• Show low inventory message is on in Theme settings > Product.
• Shopify tracks the variant's inventory.
• The variant is in stock, and its quantity is at or below Low inventory threshold (1 to 20, 5 by default).

Above the threshold nothing shows, unless you turn on Show in-stock message above the threshold in the block, which shows "In stock". A sold-out variant shows no stock message, because the button already says so. To turn the message off everywhere, turn off Show low inventory message; to remove it from one template, remove the Inventory status block.

Buy buttons

The Buy buttons block holds the quantity selector, the add to cart button and the other parts of the product form described below. What happens after a customer adds a product depends on the cart type.

• Show quantity selector shows a field with minus and plus buttons.
• Quantity rules: when Shopify applies quantity rules to a variant (for example in a B2B catalog), the selector starts at the minimum and moves in the right steps, and a line under the buttons states the minimum, the multiples and the maximum. If the variant has volume pricing, a table lists the price for each quantity. The theme has no settings for these rules.
• If the cart declines an add, for example because there is not enough stock, the reason shows under the button.
• Show dynamic checkout buttons adds Shopify's button for the customer's preferred payment method, such as Shop Pay or PayPal, under the add to cart button. Shopify draws this button and the theme does not restyle it. It is hidden while the selected variant cannot be bought, and while customers must agree to terms in the cart (Theme settings > Cart).

Subscriptions and other purchase options

Selling plans, such as subscriptions, come from a subscription app; the theme does not create them. When a product has selling plans and Show purchase options is on, the block lists "One-time purchase" and every plan with its price, and the customer picks one before adding to the cart. Products that can only be bought with a plan have no one-time choice. The plan's name then shows on the line in the cart.

If your subscription app adds its own selector as an app block, turn Show purchase options off so that customers do not see two.

Gift card recipient form

For gift card products, Show recipient form for gift cards adds the checkbox "I want to send this as a gift". When the customer checks it, four fields show: the recipient's email (required), the recipient's name, a message of up to 200 characters and a send date up to 90 days ahead. The details also show on the line in the cart. While the form is on, gift cards have no dynamic checkout button, because that button skips the check of the recipient's details.

Pickup availability

The Pickup availability block shows whether the selected variant can be picked up at your first pickup location and when it is usually ready. A link opens a panel with every pickup location, its status, address and phone number. The block shows nothing for a sold-out variant, or until a location offers local pickup, which you set up in your shipping and delivery settings in Shopify.

Size chart

The Size chart block adds a link, labeled "Size guide" by default, that opens a page in a dialog.

1. Create the page under Online Store > Pages and put the chart in its content.
2. In the theme editor, add the Size chart block to Product information and drag it where the link should show, for example under the variant picker.
3. Choose the page in Page, and change Link label if you want.

The link does not show on the storefront until a page is chosen. The block belongs to the product template, so every product that uses the template opens the same page. To give some products another chart, assign them a different product template with its own Size chart block.

Description and collapsible rows

• The Description block shows the product's description. With Show as a collapsible row on, it is a row titled "Description" that starts open; with it off, the text sits on the card.
• Each Collapsible row block is a closed row with a Heading, an Icon and its Content. Choose a Page to add that page's content after the row's content, which lets you keep shipping or care information in one place for all products. A row with neither does not show.

Rating

The Rating block shows stars, the average and the number of reviews. It reads Shopify's standard product review metafields, reviews.rating and reviews.rating_count, which a review app fills in. The theme does not collect reviews, and the block shows nothing for a product without a rating.

Complementary products and recommendations

• The Complementary products block lists up to six products as compact cards with quick add, under the heading you set. You choose the products for each product in the Shopify Search & Discovery app; without the app there is nothing to show, and the block stays hidden.
• The Product recommendations section ("You may also like") shows related products that Shopify picks automatically, in a carousel or a grid. It stays hidden when Shopify has nothing to recommend. See its settings.

Sticky add to cart bar

With Enable sticky add to cart bar on in Theme settings > Product, a bar appears at the bottom of the product page once the buy buttons have scrolled out of view. It shows the product's image, title, selected variant and price (the price is left out on small phones) and an add to cart button. The button uses the quantity and purchase option chosen in the Buy buttons block. The bar steps aside at the end of the page so that it never covers the footer.

Other blocks

• Badges: chips above the title with the product type, the vendor and one badge (sold out, sale or new). Badges follow Theme settings > Badges.
• Title: the product title. Keep Heading level at Heading 1 on the product page.
• Vendor: the vendor's name, with Link to the vendor's products if you want it to be a link.
• SKU: the selected variant's SKU, when it has one.
• Share: a button that opens the device's share menu, or copies the link on devices without one.
• App blocks: review, subscription and other apps with app blocks go anywhere in the column.
• Theme blocks: Text, Image, Icon with text and the other theme blocks can be added too. Use the Custom Liquid block for app snippets or your own code.

Featured product section

Featured product puts one product, with its gallery and the same blocks, on any page. Choose the Product, then set up the blocks as on the product page. The differences are:

• Media position puts the gallery at the start or the end of the section.
• Show link to product page adds a "View full details" link under the blocks.
• Set the Title block's Heading level to Heading 2: the page already has a main heading.
• There is no Complementary products block and no sticky add to cart bar, and the page address does not change when a customer picks a variant.

See all Featured product settings.

Product cards

Product cards show products on collection pages, in search results, in Featured collection, Product tabs and recommendations, in the cart's suggestions and in the Product card block. A card shows:

• The product's photo, and its second photo on hover.
• One badge at the top: sale or new, or sold out when quick add is off.
• Color dots at the bottom: up to four dots and a count of the rest. They show when an option whose values have swatches, or an option named Color, has more than one value. The dots use the swatches from Shopify (see Color swatches); without swatches the card shows the number of colors as text.
• The quick add button.
• The product type or the vendor, the title and the price. When variants have different prices, the price reads "From" the lowest one.

Compact cards, used in the cart drawer, in complementary products and in shoppable images, show only the photo, the title, the price and a small quick add button.

Card settings apply to the whole store. Theme settings > Product cards has Image ratio, Image fit, Show second image on hover, Text above the title, Show color dots and Show quick add, and Theme settings > Badges sets which badges show, the sale badge's text and how many days a product counts as new. See the theme settings reference.

Quick add button

With Show quick add on, every card has a plus button in the corner of the photo. What it does depends on the product:

• One variant: the product is added to the cart at once. If the cart declines the add, for example because all the stock is already in the cart, the reason shows on the card.
• One or two options, with at most ten values each: an options panel opens inside the photo, with the price of the variant chosen. The customer picks the values and presses "Add to cart". Values that cannot be bought are struck through. A message from the cart stays until the next choice.
• Three options, or an option with more than ten values: the quick add window opens. Compact cards open it for every product that has options.
• Subscription only: the quick add window opens, so that the customer can choose a plan.
• Sold out: a "Sold out" label takes the place of the button.

Quick add can be turned off, but there are no settings to move or restyle it. With quick add off, a sold-out product shows the sold out badge on its photo instead, when Show sold out badge is on.

Quick add window

The quick add window is a small product page in a dialog (a sheet at the bottom of the screen on phones). It shows the gallery, the product type, the title, the price, the variant picker, the quantity selector, purchase options, the add to cart and dynamic checkout buttons, and a link to the product page. It has no settings and closes when the product is added to the cart.