Product page

The gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.

In the editor

Product information

Where it goes

Its own template – open that kind of page in the editor

In the presets

Index: Product; Poster: Product; Petal: Product; Every preset: Product (pre-order)

Settings

25

Blocks

Text, Vendor, Title, Rating, Price, Badges, Variant picker, Quantity, Buy buttons, Inventory status, SKU, Pickup availability, Description, Collapsible tab, Side panel, Icons with text, Share, Complementary products, Image, Highlights, Specifications, Other colors, Delivery estimate, Buy it together, Custom Liquid

App blocks

Yes

Open any product in the theme editor (use the page selector at the top) to edit the product template. The default template has three sections: Product information, Related products and Recently viewed. Every element of Product information is a block you can reorder, hide or remove.

Gallery

• Gallery layout: Carousel, Slider with thumbnails on the side, Stacked grid, Large first photo, then two columns or One column.
• Photo shape: crop every photo to square, portrait or landscape, or keep each photo's own shape with Like the photo.
• Keep photos in view while scrolling: on desktop, the photo stays at the top with its thumbnails below while the product details scroll. The photo shrinks to fit the screen and makes room when the sticky add to cart bar appears. It uses the carousel with thumbnails.
• Open images in a zoom gallery: a click opens the photos full screen, where shoppers can zoom, swipe and use the arrow keys.
• Magnify photos on hover: with a mouse, the photo enlarges under the pointer.

Photos per color

With Show only the selected color's media on, the gallery shows only the photos of the color the shopper picked. Give each color its photos in one of two ways:

1. Set the color name as the photo's alt text (for example Red), or
2. Assign a variant image to each color under Variants, and place that color's other photos right after it in the product's media list.

Photos before the first variant image show for every color. If the product's color option is not called Color (for example Colour or Finish), enter its name in Option to filter by.

Layout options

• Keep product info visible while scrolling: the details column stays in view next to a long gallery.
• Show sticky add to cart bar: a bar with the product, the price and the add button appears at the bottom of the screen once the main button scrolls out of view.
• Side panel color scheme colors the panels opened by Side panel blocks.

Blocks

The full list of blocks and their settings is at the end of this page. These are the ones with the most to set up.

Price

Shows the price, the compare-at price and a saving badge. Show tax and shipping note adds the "Tax included" or "Shipping calculated at checkout" line from your store settings. Show Shop Pay Installments shows the installments banner when Shop Pay Installments is available in your store.

Variant picker

Shows each option as Pills or a Dropdown. With Show color swatches, the color option uses swatches:

1. Give the product a category in its admin page.
2. Fill the Color category metafield (Shopify's colors, or your own with a hex code or a pattern image).
3. Connect the product's Color option to that metafield under Variants.

Swatches on the product page and on product cards then use those colors. If a value has no color, Index uses its name as a color: CSS color names such as Navy or Teal, plus common store color names (Cobalt, Sage, Oat, Sand, Clay, Charcoal, Marl, Cream, Ecru, Mustard, Rust, Denim, Camel, Burgundy, Mauve, Mint and more). Any other name shows an empty ring, so give it a color in the metafield.

Swatch shows > Variant photo shows the image assigned to each color under Variants instead of a color dot.

Buy buttons and pre-orders

The add to cart button, plus dynamic checkout buttons (Shop Pay, Apple Pay, Google Pay and others, depending on your payment settings) and the gift card recipient form for gift card products.

Pre-order button:

• When out of stock and selling continues turns the button into Pre-order for variants that have Continue selling when out of stock on and no stock left.
• Always does it for every product using the template – use it in the product.preorder template.
• Pre-order note shows under the button, for example "Ships in the first week of March", and is added to the order so you see it when fulfilling.

Inventory status

Shows In stock, Low stock (below the Low stock threshold) or Out of stock. Show stock bar when low adds a short bar that empties as stock runs out; Stock bar full at is the stock level at which the bar is full. Inventory must be tracked for the variant.

Pickup availability

Shows whether the variant can be picked up at your locations, with a link to all locations. Set up local pickup in Settings › Shipping and delivery.

Description

Shows the product description. Shorten long descriptions shows the beginning with a Show more button.

Collapsible tab

A row that opens to show text or a page – for details, materials, care or shipping. Connect a metafield to the content to show product-specific text.

Side panel

A link that opens a panel from the side: a size guide, delivery information or care instructions.

• Pick a Page (its text shows in the panel; tables are styled and scroll sideways on small screens) and/or write Text and Highlights.
• Add an Image such as a size chart or a measuring guide; it can enlarge on click.
• Choose a Row with lines or a Text link, an icon and a Regular or Wide (for tables) panel.
• In the editor, selecting the block opens its panel.

Highlights

Short key facts with an icon, shown as a list, two columns or chips. Write them in the block (one per line; text before a | is bold, for example Organic cotton | soft and breathable), or leave it empty and fill the product metafield custom.highlights (a list of single line texts) on each product.

Specifications

A table of Label: value rows, for example Material: Oak. Write the rows in the block, or leave it empty and use a multi-line text metafield such as custom.specs with one pair per line. The Compare table uses the same metafield. With a heading, the table opens from a row like a collapsible tab.

Other colors

Links to the same product in other colors or styles when they are separate products (for example a mug sold as three products). Two ways to set it up:

• With metafields (recommended): on each product, fill custom.siblings (a list of products – the same list on each of them), custom.sibling_label (the color name, such as Sage), and optionally custom.sibling_color (a color for the swatch) and custom.sibling_group (the heading, such as Color or Style).
• In the block: pick the products in Products. They link to each other, and the block stays hidden on products outside the group.

Shown as Photos, Color swatches or Pills.

Delivery estimate

"Order within 3 h 20 min to get it Thu, Nov 6 – Mon, Nov 10". The dates are counted in your store's time zone from Fastest delivery in days and Slowest delivery in days, the Same-day dispatch until cut-off and business days only (if on). In the text, [countdown] is the time left until the cut-off and [dates] the delivery dates. The block is hidden while the variant is sold out.

Buy it together

Up to four products shoppers add together with this one in one click. Each one can be unticked and the total updates.

Complementary products

Products that go well with this one, set up in the Search & Discovery app (Search & Discovery › Product recommendations).

Icons with text

Three short lines with an icon, for example Free delivery over $60, 30-day returns and 2-year warranty. Upload your own SVG or PNG icon for any line. Theme settings › Shapes › Icon line weight makes the built-in icons thinner or bolder.

Other blocks

Text, Vendor, Title, Rating (from a reviews app), Badges (one per line; connect a metafield for product-specific badges), Quantity, SKU, Share, Image, Custom Liquid and app blocks.

Related products

Products related to the one shown, from Shopify's product recommendations. They improve over time, and you can adjust them in the Search & Discovery app.

Featured product

The Featured product section shows one product with its gallery and buy buttons on any page, such as the home page. It has its own set of blocks.

Recently viewed

Shows the products a shopper opened most recently on this device. The section stays hidden until they have viewed a product, and shoppers can clear the list. It is also on the home page.

All settings

Every setting in the order of the theme editor, with its options and its default value.

Block settings

Vendor block – no settings, place it where you want it.

Quantity block – no settings, place it where you want it.

SKU block – no settings, place it where you want it.

Pickup availability block – no settings, place it where you want it.

Related