Product pages

The product page is the Product information section, built from blocks. Drag blocks to reorder them, hide the ones you don't need, and add blocks from apps you've installed. Below it, the default template adds the Image with numbered list, Image with testimonial, Product recommendations and Recently viewed sections. Change or remove them like any other section.

Every block and setting is listed in Sections and blocks › Product information.

Layout

• Gallery layout: Stacked shows the images down the page, every third one full width and the others in pairs. Carousel shows one image at a time, with an image count and previous and next buttons. On phones, shoppers swipe.
• Keep product information in view while scrolling: the right-hand column stays in place while the images scroll past.
• Show add to cart bar on mobile: a slim bar with the price and Add to cart appears once the main buttons scroll out of view.
• Enable image zoom: shoppers can open images full screen to look closer.
• Show measurements on the first image: draws the product's width and height over its first image as dimension lines. It uses the metafields set in Theme settings › Product cards and shows nothing for products without them.
• Loop videos: product videos play on repeat.

Images, video and 3D

Add media to the product in the Shopify admin. Nook shows images, videos, YouTube and Vimeo videos, and 3D models. When a shopper picks a variant, the gallery moves to that variant's image, so give each variant its own image (for example, one per fabric).

Add alt text to each image: in the Shopify admin, open the product, select the image and choose Add alt text. Screen readers read it out.

Variant picker and swatches

Options with swatches (for example fabric or color) show as swatches; other options show as pills.

• Swatch style (on the section): Image tiles for fabric photos, Color circles for flat colors, or Pills. An image tile without an image shows its color instead.
• Theme settings › Swatches: Shape (Square image or Circle, for image tiles) and Size on product pages. Product cards always show small dots.

Swatches come from Shopify's product category metafields. Set the product's category (for example Sofas), fill in a category metafield such as Color (each value can have a color or an image), then link it to the product's option. The Shopify Help Center (opens in a new tab) explains swatches step by step.

The Variant picker block can also show a Samples link beside the first option, for example a link to your fabric samples collection.

Price and installments

• Price: the price, compare-at price and unit price. Show tax and shipping note adds a line about taxes and shipping.
• Installments banner: shows Shop Pay Installments when your store uses Shopify Payments and qualifies. Shopify decides when it appears.

Buy buttons

• Show accelerated checkout buttons: Shop Pay, Apple Pay, Google Pay and others, in their own brand colors. Turn the payment methods on under Settings › Payments.
• Show price in add to cart button: for example "Add to cart — $2,480.00".
• Sold-out variants show Sold out and the button can't be pressed.

The Quantity selector block sits beside the add to cart button.

Subscriptions and purchase options

When a subscriptions app adds selling plans to a product, the Buy buttons block shows the purchase options (one-time or subscription) above the buttons. The cart shows the plan name under the item.

Pickup availability

When local pickup is on (Settings › Shipping and delivery › Local pickup) and the variant is stocked at a pickup location, the Pickup availability block shows where it can be picked up and how soon. Store details opens a panel with every location's address. It updates when the shopper picks another variant.

Fit note

The Fit note block shows the product's narrowest point and a Check it fits your doorway link. The measurement comes from the block's Narrowest point setting: connect any dimension, number or text metafield to it, or type a value such as 36 in. Left empty, it uses the custom.narrowest_point metafield. Without a measurement the block shows nothing to shoppers; in the theme editor it shows a note about what to add. Choose its Color scheme, and a Fit guide page for shoppers whose browser can't open the fit checker. See Custom data.

Collapsible tabs

Add up to five Collapsible tab blocks. Each has a Heading, Open by default, and any of:

• Content: your own text, or connect a metafield so each product shows its own.
• Page content: the content of a page, shared by every product, for example your delivery policy.
• Show product dimensions: a measurement table of width, depth, height, seat height and narrowest point. Connect each one to a metafield of your own (dimension, number or text), type a value with its unit, or leave it empty to use Nook's dimension metafields.

If you leave the heading blank, the tab uses the title of the page you chose. A tab with no heading and no page is hidden.

The default template comes with four tabs: Materials, Dimensions, Care, and Delivery and returns. Dimensions shows once your products have measurements. The other three stay hidden until you give them content: connect Materials and Care to the custom.materials and custom.care metafields, and choose your delivery page under Page content for Delivery and returns. The Description block can also show as a tab: set its Style to Collapsible tab.

Other blocks

• Breadcrumb: the path to the product, for example Home / Living / Harlow three-seat sofa.
• Text: a short line of text in Caption or Body style. The default template uses it for a line about lead time and delivery; edit it to match your own, or connect the custom.lead_time metafield to show each product's lead time. Separate parts with " · ": a part that's empty, such as a connected metafield a product doesn't have, is left out along with its separator.
• Divider: a thin line between blocks.
• Share: opens the device's share sheet where available, and otherwise copies the product link. Without JavaScript, it offers sharing by email.
• Custom Liquid: your own code.

Gift cards

Gift card products use the gift-card product template, which includes the Gift card recipient form block. Shoppers can send the card to someone else by email, with a message and a delivery date. To use it, open the gift card product in the Shopify admin and set Theme template to gift-card. Gift card image color scheme sets the colors of the card image.

The gift card shoppers receive opens on its own page with the card code, a QR code, an Add to Apple Wallet button and a print button.

Featured product on other pages

To feature a product on the home page or any other page, add the Featured product section. It has the price, variant picker, buy buttons and pickup blocks, and a View details link to the full product page.