Docs
Page templates

Product page

The Product page template of Combine: gallery layouts, sticky add to cart, and the blocks for variants, buy buttons, siblings, size guides and more.

Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.

The Product page section shows one product: its media gallery on one side and its blocks (title, price, variant picker, buy buttons and more) on the other. It is the main section of the product template. The Product recommendations section sits under it in the same template.

Where to find it: Online Store → Themes → Customize → template picker → Products → Default product → Product page.

Theme editor Product page → Product gallery settings (Style & layout 1 column, Desktop media width, Mobile media width, Media aspect ratio, Fit images inside container, Gallery inner spacing, background and border, Media border radius, Show thumbnails, Enable image zoom, Enable video looping) beside a product page with thumbnails.

  • Style & layout sets the desktop gallery: a 1 column slider, a 1 column scroll or a 2 columns scroll (default). Mobile always uses a 1 column slider.
  • Enhance first image (2 columns scroll only) shows the first image at full width above the others.
  • Desktop media width gives the gallery one half or two thirds of the page.
  • Mobile media width and Add padding to the gallery on mobile let the next image peek in on mobile, or add space around the slider.
  • Media aspect ratio crops every image to one shape. Turn on Fit images inside container when your images have different shapes: they are no longer cropped.
  • Gallery inner spacing, Gallery background and Gallery border style the space around fitted images.
  • Media border radius rounds the image corners.
  • Show thumbnails adds thumbnails under the gallery. Enable image zoom opens the images full screen.
  • Enable video looping and Enable video autoplay play product videos in a loop, or on their own (muted, without controls). Fill videos to match the aspect ratio of the images crops videos to the image shape.

Functionality

  • Select the first available variant by default selects a variant when the page opens. Turn it off to make customers choose a variant before they can buy.

Sticky add to cart

Theme editor Product page Functionality and Sticky add to cart settings (Enable sticky add to cart, Style Wide / Floating, Background color, Text color) beside the storefront sticky bar with The Skin Spray and a Choose options button.

The sticky add to cart bar (since Combine 2.4.0) shows the product title, the price and a button while the main buy buttons are off screen.

  • On desktop, the bar appears once the add to cart button has scrolled above the top of the screen.
  • On mobile, it appears whenever the add to cart button is not on the screen, before and after it.
  • Enable add to cart for multiple variants makes the bar's button add the selected (or first available) variant. When it is off, products with variants show a Choose options button that scrolls back to the variant picker.
  • Style is Wide (a full-width bar) or Floating (a box). Background color and Text color set its colors.

Product page blocks

The default product template starts with the Vendor, Title, Price, Variant picker, Buy buttons, Description and Share blocks. Select Add block in the Product page section to add more, and drag them into order. App blocks from your apps can go between them.

Product information blocks

Vendor, Title and Price

  • Vendor shows the product vendor. Title shows the product title as the page heading.
  • Price shows the price of the selected variant, with the compare-at price and unit price when the product has them. Use it near the top when the buy buttons sit further down.

Product badges

  • Shows the sold out, discount and custom badges of the product. On the product page the discount badge shows the exact saving of the selected variant. The badges are set in Theme settings → Product card → Product badges. See Product badges theme settings.

Tax information

  • Shows "Tax included." when your prices include tax, and a link to your shipping policy when the store has one.
  • Open links in opens the shipping policy in a popup, in the same window or in a new window.

SKU / barcode

  • Shows the SKU and barcode of the selected variant.

Description

  • Shows the product description.
  • Truncate description shows a small, medium or large excerpt instead of the whole text.
  • Collapsible (whole description only) folds the description under the Title you write; customers open it with one click.

Product rating

  • Shows the star rating from your reviews app, chosen in Theme settings → Product card → Product rating. See Product review apps.

Text

  • Shows your own text. Text size, Text style (Regular or Opacity), Text color and Text transform (uppercase) set its look. Connect Text to a product metafield (dynamic source) to show a different text on each product.

Share

  • Shows share links. Show Facebook, Show X and Show Pinterest pick the networks. Show custom link adds a share button that opens the device's own share menu.

Divider

  • Draws a line between blocks, with its own Height, Color and Style (Solid, Dotted, Dashed, Double).

Image

  • Shows an image with an optional Link, for example a banner or a size chart image (since Combine 2.4.0).
  • Mobile image (optional) replaces it on mobile. Image border radius rounds the corners.

Custom HTML / Liquid

  • Runs your own HTML or Liquid code inside the product information. Krown support does not help with custom code. See Custom work and code changes.

Variant and buy blocks

Variant picker

  • Shows the product options. Title is the line above them (default "Choose variants").
  • Variants style shows the values as Blocks or in a Dropdown. Show variant labels shows the option names.
  • Show color swatches turns color options into round swatches. See Color swatches.
  • Metaobject swatch metafields adds a small image or color to the values of other options, for example Material, from metaobject entries (Blocks style only, since Combine 4.0.0). See Setting up metaobject swatches.
  • Container background is Primary, Secondary or No background.
  • Handle unavailable variants shows sold out variants, disables them, or hides them.

Buy buttons

  • Shows the add to cart button. Show quantity selector adds a quantity field.
  • Show "pre-order" button label changes the button text to "Pre-Order". It is only a label: to sell sold out products, turn on Continue selling when out of stock on the product in Shopify admin.
  • Show dynamic checkout buttons adds the express buttons, for example Shop Pay or PayPal. Shopify builds them; their look cannot be changed in the theme.
  • Show recipient information form for gift card products lets customers send a gift card to someone else, with a name, a message (up to 200 characters) and a send date. See Gift card page.
  • Show price shows a price box with the saving above the button. Container background sets the box style: Primary, Secondary or No background.
  • Background (Custom colors) sets the color of the add to cart button.

On gift card products with the recipient form, the dynamic checkout buttons are hidden, so that the recipient details always go through the add to cart button.

Inventory level

  • Shows the stock of the selected variant. Inventory notification shows it always, or only below the Low inventory threshold (1 to 20).
  • Show progress bar adds a bar under the text. The variants need inventory tracking in Shopify admin.

Pickup availability

  • Shows whether the selected variant can be picked up at your locations, with the details of each location in a drawer. Local pickup is a Shopify setting (Shopify admin → Settings → Shipping and delivery).

Back in stock alert

Custom property

  • Adds a field (text, checkbox or dropdown) whose value goes with the product to the cart and the order (since Combine 2.6.0). See Setting up a custom property.

Product siblings

  • Shows other products as linked thumbnails, for example the same shoe in other colors, each a separate product (since Combine 3.1.0). See Setting up product siblings.

Variant metafield

  • Shows a metafield of the selected variant and updates when the customer changes the variant (since Combine 2.5.0). See Showing a variant metafield.

Information blocks

Collapsible tab

  • Shows a Heading that customers open with one click to see its content: Tab content (your text), Tab content from page (the content of a page) and Tab image. All three can be combined.
  • Hide block if dynamic content is not present hides the tab when it has no text, page or image, for example when its dynamic source is empty on a product.

Size guide

  • Shows a link with an optional icon (Show icon) that opens the Size guide page (since Combine 2.4.0). See Setting up a size guide.

Icons list

  • Shows up to 6 icons with labels, under a Title (up to 2 Icons list blocks per page). Each icon has an Icon image (128 x 128 px) and a Label.
  • Connect the icons and labels to product metafields (dynamic sources) to show different icons per product. Hide block if dynamic content is not present hides the block when Icon 1 has no image and no label.
  • The icons in product grids come from Theme settings instead. See Dynamic icons list.

Coupon code

  • Shows a discount code that customers copy with one click (since Combine 4.0.0). Code is the code, Caption a line under it, and Link label / Link an optional link.
  • The code must exist in Shopify admin → Discounts. The block only shows it. Custom text color and Custom background color set its colors.

Disclosures

  • Shows the disclosures attached to the product with Shopify's product disclosures, for example safety warnings, under a Title (since Combine 4.1.0). The disclosures are set in Shopify admin on each product.

Cross-selling blocks

Products list

  • Shows up to 8 products you pick, as small linked items with price, vendor and rating (Show price, Show vendor, Show rating). Connect Select products to a product list metafield to show different products on each product page.

Cross selling product

  • Shows one product with a variant dropdown and an add to cart button, under a Title (up to 5 per page). Connect Select product to a product metafield for a different product per page.

Product promotion

  • Shows one product as a small promotion, with a Description line (up to 2 per page). Show free price label shows "FREE" with the price struck through.
  • The block has no add to cart button. It does not make the product free: create a Shopify discount, for example Buy X get Y, for a free gift.

Complementary products

  • Shows the complementary products you set for this product in Shopify's Search & Discovery app, with price, vendor and rating options. Without complementary products in the app, the block shows nothing.

Setting up product siblings

Product siblings link separate products, for example one product per color, as thumbnails on each product page.

Create the metafield

In Shopify admin, open Settings → Metafields and metaobjects → Products → Add definition. Name it, for example "Siblings" (custom.siblings), and choose the type Product, as a list of products.

Fill it on each product

Open each product of the group and select all the products of the group in the metafield, the product itself included.

Add the block

In the theme editor, open Products → Default product → Product page and select Add block → Product siblings.

Connect the metafield

Next to Products, select the dynamic source icon and choose the Siblings metafield. Set Heading and Media aspect ratio, and turn on Reduce opacity for unavailable products to fade sold out siblings.

The current product is marked in the list. The block shows nothing on products whose metafield is empty.

Setting up a size guide

Create the size guide page

In Shopify admin, open Online Store → Pages → Add page. Write the size guide, with a table or an image, and save.

Add the block

In the theme editor, open the product template and select Add block → Size guide. Select the page in Size guide page.

Choose how it opens

Set Open options to Popup (the page content in a window over the product page), Same window or New window. Change Text if needed (default "View size chart").

For a different size guide per product, connect Size guide page to a page reference metafield of the product and turn on Hide block if dynamic content is not present.

Setting up a back in stock alert

The Back in stock alert block shows an email form on sold out variants. It sends you, the store owner, an email through Shopify's contact form.

Add the block

In the product template, select Add block → Back in stock alert. Place it near the buy buttons.

Write the texts

Set Text, Button label and Success message. Email message is the line you receive with the customer's email address.

Notify the customers yourself

When the product is back in stock, email the customers who asked for it. The emails arrive at your store's sender email (Shopify admin → Settings → Notifications).

The block does not notify customers automatically. Combine sends you their requests; you contact them. For automatic restock emails, use a back in stock app.

Setting up a custom property

A custom property collects a detail from the customer, for example an engraving text, and adds it to the cart line and the order.

Add the block

In the product template, select Add block → Custom property. Write the Label, for example "Engraving".

Choose the type

Set Type to Text, Checkbox or Dropdown. For Text, set Allow long text and Maximum characters. For Checkbox, set Value (the word on the order, default "Yes"). For Dropdown, write the Values separated by commas.

Set the rules

Turn on Required to make customers fill the field before adding to cart. Turn on Hide at checkout to keep the value out of the checkout order summary.

For a Dropdown, Default value checked means that no value is selected in advance: customers see "----" and choose one.

Showing a variant metafield

Create the variant metafield

In Shopify admin, open Settings → Metafields and metaobjects → Variants → Add definition, for example "Material details" (custom.material_details).

Fill it on each variant

Open each product, select a variant and fill the metafield.

Add the block

In the product template, select Add block → Variant metafield. Type the metafield in Variant metafield key as namespace.key, and add a Title if you want one.

The block updates when the customer selects another variant, and shows nothing for variants without a value. See Show variant metafields on the product page.

Different content per product

All products use the Default product template unless you assign another one. There are two ways to show different content on some products: an alternate template, or dynamic sources.

Create the template

In the theme editor, open the template picker and select Products → Create template. Base it on Default product.

Change its blocks

Add, remove or change the blocks of the new template. The Default product template does not change.

Assign it to products

In Shopify admin → Products, open a product and select the new template under Theme template. Save.

With dynamic sources, one template shows different content per product. Connect a block setting to a product metafield, for example the Collapsible tab content, the Icons list icons, the Size guide page or the Cross selling product. Turn on Hide block if dynamic content is not present so the block disappears on products without a value.

See Use dynamic sources for unique product pages.

You can watch a tutorial about how to use page templates & dynamic content for rich customizations in our Kingdom theme update: Kingdom theme update, at 27:42

Why does my sticky add to cart not show?

Because Enable sticky add to cart is off, the product is sold out, or the main add to cart button is still on the screen. The bar needs the Buy buttons block on the page and appears only once that button scrolls out of view. On desktop it appears only after the button has passed the top of the screen.

Why does the sticky bar say "Choose options"?

Because Enable add to cart for multiple variants is off and the product has variants. The button then scrolls back to the variant picker. Turn the setting on to add the selected or first available variant directly.

Does the Product promotion block add a free product?

No. The block only shows the product with an optional "FREE" label. Create the free gift as a Shopify discount (for example Buy X get Y) in Shopify admin → Discounts, and describe it in the block.

All Product page settings

Every setting of this section, with its type and default.

On this page