Rail product page

The product page is built from blocks you can reorder, hide and configure in the theme editor. This page covers each block, how to set up color swatches, fit notes and the size guide, and the extras: Complete the look, pickup and gift cards.

Product page blocks

Open the theme editor, choose Products in the template picker and select the Product section. The default order is: Badges, Title, Price, Variant picker, Size guide, Fit notes, Quantity, Buy buttons, Pickup availability, Description, two Collapsible tabs, Share and Complete the look. Drag blocks to change the order, or remove the ones you do not need.

Section settings

Layout Stacked column, Carousel with thumbnails: How product photos are laid out. Videos, external videos and 3D models are shown in the same gallery.
Media shape Alternating windows, Arch, Rounded rectangle, Plinth: The window shape of product photos.
Media ratio Tall (5:6), Portrait (4:5), Square, Match first image: Crop ratio of the photos.
Open images in a lightbox default on: Click a photo to view it large.
Keep the buy box in view on desktop default on: The buy box stays on screen as the shopper scrolls the photos.
Show hang tag default on: A decorative hanging tag on the buy box.
Show sticky add to bag bar on mobile default on: A bar with the add to bag button that follows phone shoppers down the page.
Show breadcrumbs default on: A trail back to the collection.

Blocks

Title max 1: The product title. Settings: Show vendor, Show caption (shows the card caption metafield under the title) and Show SKU.
Price max 1: Price, compare-at price and unit price. Settings: Show tax and shipping note and Show payment installments (Shop Pay Installments, when available for your store).
Badges max 1: Sale, new, low stock and sold out badges (rules are in Theme settings > Badges). Setting: Show product type.
Variant picker max 1: One control per product option. Settings: Style (Buttons, Dropdown), Show swatches for options that have them and Show stock note. Changing a variant updates the price, availability, photo and the page link.
Size guide max 1: A link that opens a pop-up. See Size guide.
Fit notes max 1: A "runs small, true to size, runs large" scale with notes. See Fit notes.
Quantity max 1: The quantity stepper.
Buy buttons max 1: Add to bag, disabled when the variant is sold out. Setting: Show dynamic checkout buttons (Shop Pay, Apple Pay and other payment buttons your store has turned on).
Description max 1: The product description. Settings: Show as a collapsible tab, Tab heading (default "Details") and Open by default.
Collapsible tab: An accordion row, for example "Fabric and care". Settings: Heading, Content, Page (replaces the content with a page) and Open by default. Add as many as you like.
Pickup availability max 1: Shows if the selected variant can be picked up in store. See Pickup availability.
Share max 1: A copy link button. Setting: Heading.
Complete the look max 1: A band of complementary products below the product. See Complete the look.
Text: A short message such as "Free returns within 30 days." Settings: Text and Style (Body, Small, Italic accent).
Custom Liquid: Your own Liquid or an app snippet. See the warning about custom code in the support policy.
App: Blocks from apps, for example reviews or wishlist buttons.

Below the main product, the Product recommendations section shows related products. See Sections.

Variant swatches

Rail shows a round color or image swatch instead of a text button for any product option that has swatches in Shopify. This uses Shopify's native option swatches, so no theme setting is needed apart from Show swatches for options that have them on the Variant picker block (default on).

In the Shopify admin, open the product and set a Product category that supports a color attribute (for example Clothing > Dresses).
Link the Color option to the category's color attribute (the category metafield) in the options section of the product.
Each color value now carries a swatch. Shopify lets you set the swatch color or upload a swatch image for each color. The same swatches then appear in filters if you use them in Search & Discovery.

Options without swatches, such as Size, stay as buttons (or a dropdown if you choose Style: Dropdown). Shopify's help center has the current screen-by-screen steps for category metafields and swatches, because Shopify updates that part of the admin often.

Cards: product cards show small color dots for the product's color option. The option name Rail looks for is set in Theme settings > Product cards > Color option name (default "Color"). If you named the option "Colour" or "Shade", add it there, separated by commas.

Fit notes and metafields

The Fit notes block shows a three-point scale (Runs small, True to size, Runs large) and optional notes such as the model's size. It is driven by product metafields so each product can have its own fit.

Set up the metafields

In the Shopify admin go to Settings > Custom data > Products and choose Add definition.
Create a Single line text definition with namespace and key custom.fit. Give each product a value that contains the word small, true or large, for example "Runs small", "True to size" or "Runs large".
Optionally create a second text definition with namespace and key custom.fit_notes for per-product notes, for example "Model is 175 cm and wears a size S."
In the theme editor, select the Fit notes block and enter custom.fit in Fit metafield and custom.fit_notes in Notes metafield.

Heading default "Fit notes": Block title.
Fit scale Hide scale, Runs small, True to size, Runs large: A fixed fit for every product, used when Fit metafield is empty.
Fit metafield: Namespace and key of a text product metafield. A value containing small, true or large moves the scale. Products without a value hide the scale.
Notes: Text shown on every product, for example a general sizing tip.
Notes metafield: Namespace and key of a text product metafield. When it is set, products without a value show no notes.

Card caption

A short italic line under the product title on product cards, such as "Satin, bias cut" or "Fits true to size". Create a Single line text product metafield (for example custom.card_caption) and enter its namespace and key in Theme settings > Product cards > Card caption metafield. On the product page, the same caption shows under the title when the Title block has Show caption turned on. Products without a value simply show no caption.

Size guide

The Size guide block adds a link (default text "Size guide") that opens a pop-up.

In the Shopify admin, create a page under Online Store > Pages, for example "Size guide", and add your size chart.
In the theme editor, select the Size guide block, and choose the page in the Page setting. Its content opens in the pop-up.
If you leave Page empty, the block shows the text from its Content setting instead. Change Link text to rename the link.

Tip: use a table in your page content, and keep it narrow so it reads well on phones.

Complete the look

The Complete the look block shows products that go with the one being viewed. The products are complementary products chosen by Shopify, so you decide the pairs in Shopify, not in the theme.

Install the free Shopify Search & Discovery app.
In the app, open Recommendations and Complementary products, choose a product and add the products that complete the look. Do this for the products you want.
In the theme editor, add or select the Complete the look block on the product template.

Eyebrow, Heading: Block title (default "Complete the look" and "Wear it with").
Products to show 2 to 4, default 3: How many complementary products appear.
Show add all button default on: Adds the pieces that have a single variant to the bag in one tap. Pieces with sizes are chosen on their own card.
Color scheme default Scheme 2: Colors of the band.

When a product has no complementary products set, the band does not appear. If you want a fully curated outfit builder with swappable pieces, use the Fitting room section on any page instead.

Pickup availability

The Pickup availability block tells shoppers whether the selected variant can be collected in store, and lists other pickup locations. It appears only when at least one of your locations offers local pickup. To set it up, enable local pickup in Shopify under Settings > Shipping and delivery > Local pickup, and make sure the product is stocked at that location. If no location offers pickup, the block shows nothing at all.

Gift cards

If you sell Shopify gift cards, the product page for a gift card shows an extra option: Send to a recipient. The shopper can enter a recipient email, name, a message (up to 200 characters) and a date to send it on. When the recipient fields are left off, the gift card goes to the buyer. Gift card recipients receive an email from Shopify, and the gift card page shows the code, balance and a QR code. See Gift card page.

More product page details

Sold out: sold-out variants are marked in the variant picker and the add to bag button is disabled.
Unit price: shown with the price when the product has one.
Subscriptions: the cart shows the selling plan name for subscription items. The subscription selector itself comes from your subscription app, usually as an App block on the product page.