Pages

Product page

To edit the product page, open the theme editor and choose Products > Default product from the page selector at the top. Changes to this template apply to every product that uses it.

By default, the product page has these sections:

  1. Product information: images, title, price, options, buy buttons and product details.
  2. Multicolumn: a "Key ingredients" row. Connect it to metafields to show each product's own ingredients.
  3. FAQ: questions about the product.
  4. Product recommendations: related products chosen by Shopify.
  5. Recently viewed: products the customer looked at before.

You can add, remove and reorder sections, as on any other page.

Product information settings

  • Color scheme: the colors of the section.
  • Show breadcrumbs: shows links above the product, such as Home > Collection > Product.
  • Keep product information sticky on desktop: the product details stay in view while customers scroll through the images.
  • Show sticky add to cart bar: appears when the main buy button scrolls out of view. See Sticky add to cart bar.

Under Media:

  • Desktop layout: Thumbnails below, Thumbnails left or Stacked. Stacked shows all media in a column on desktop. On phones, customers swipe through media in every layout.
  • Media size: Small, Medium or Large. Sets how much of the width the media takes on desktop.
  • Desktop media position: Left or Right.
  • Enable image zoom: customers can select an image to see it full screen.
  • Autoplay videos: videos play muted when they enter the screen.
  • Loop videos: videos start again when they end.

Under Spacing: Top padding and Bottom padding.

Product information blocks

Drag blocks in the sidebar to change their order. Each block can be hidden with the eye icon or removed.

  • Vendor: the product vendor, linked to a list of that vendor's products.
  • Title: the product title. Size: Small or Large.
  • Product rating: shows the rating stored by product review apps in the product reviews metafields. See Star ratings.
  • Benefit chips: short benefits with check marks, such as "Reduces hair fall".
    • Benefits: separate with commas. Shown on every product. Products with tags that start with "benefit:" show those tags instead. See Benefit chips.
  • Price: the price, the compare-at price when the product is on sale, a sale badge, and the unit price when set. A line about taxes and a link to your shipping policy show when they apply.
  • SKU: the SKU of the selected variant. Hidden when the variant has no SKU.
  • Inventory status: shows whether the selected variant is in stock. It uses your real inventory and shows only for variants where Shopify tracks quantity.
    • Low stock threshold: from 1 to 50. At or below this number, the status says the item is low in stock.
    • Show exact count when stock is low: shows, for example, "Only 3 left" instead of "Low stock".
  • Text: your own text.
    • Text: connect a metafield to show different text on each product.
    • Style: Body, Subtitle or Caption.
  • Variant picker: lets customers choose options. See Variant picker and swatches.
  • Quantity selector: lets customers choose a quantity. If you set quantity rules for a product, such as a minimum, they show here.
  • Buy buttons: the add to cart button.
    • Show dynamic checkout buttons: customers see their preferred payment method, such as Shop Pay or PayPal.
    • Show recipient form for gift card products: lets customers send a gift card to someone else, with a message and a send date.
    • Show pickup availability: see Pickup availability.
  • Description: the product description from your Shopify admin.
  • Collapsible row: a heading that opens to show more content. Use it for ingredients, how to use, or shipping and returns.
    • Heading: the row title. If empty and you chose a page, the page title is used.
    • Icon: None, Leaf, Sparkle, Truck, Return arrow, Shield, Info, Clock or Heart.
    • Row content: the text inside the row.
    • Row content from page: shows the content of a page instead, for example your shipping policy page.
    • Use product description: shows the product description instead.
    • Open by default: shows the content when the page loads.
  • Icon row: up to four icons with a short label each, such as "Vegan" or "Free shipping". Use First icon and First text through Fourth icon and Fourth text. Leave a text empty to hide that item. Icons: Leaf, Shield, Truck, Return arrow, Heart, Sparkle or Lock.
  • Payment icons: icons for the payment methods you accept, with a short line of Text above them.
  • Complementary products: products that go well with this one. See Complementary products.
  • Share: a share button. On phones, it opens the device's share options. On other devices, it copies the product link. Text: the button label.
  • Custom Liquid: add app snippets or other Liquid code. See Custom code.
  • App blocks: blocks from your installed apps, such as reviews, subscriptions or size guides.

A collapsible row shows its content in this order of priority: Use product description first, then Row content from page, then Row content. Rows with no content are hidden.

Variant picker and swatches

The Variant picker block has two settings:

  • Style: Pills shows each option value as a button. Dropdown shows a list for each option.
  • Swatch shape: Circle or Square.

When a customer chooses an option:

  • The price, SKU, inventory status, pickup availability and Shop Pay Installments message update.
  • If the variant has its own image, the gallery shows it.
  • The page link updates, so customers can share the exact variant.

Values that are sold out, or don't exist with the other options chosen, are crossed out. Customers can still select them to see that they're unavailable.

Swatches

Swatches show a color or an image instead of a text label, for example for shades. They come from Shopify's product options:

  1. In your Shopify admin, open a product and add an option that's linked to a category metafield, such as Color.
  2. Set a color or an image for each value. You can edit these in Content > Metaobjects.
  3. Unoque shows those values as swatches, in both the Pills and Dropdown styles.

Product cards can show swatches too. Turn on Show color swatches in Product cards. Cards show one row of swatches, from the first option whose values have swatch colors or images. If no option has them, cards use an option named Color, Colour or Shade.

Media, video and 3D models

Add media to a product in your Shopify admin. Unoque supports:

  • Images: use the same shape for all your product images, for example square, so the page doesn't jump between images. 2048 x 2048px works well.
  • Videos: upload a video, or add a YouTube or Vimeo link. Videos show a play button over their preview image.
  • 3D models: upload a .glb model. Customers can turn it around on the page. On supported phones, a View in your space button places the product in the room with augmented reality.

Add alt text to each image in your Shopify admin. See Performance and accessibility.

Pickup availability

When local pickup is on, the product page shows whether the selected variant can be picked up, and how soon. Customers can open a list of all your pickup locations, with addresses.

To set it up:

  1. In your Shopify admin, go to Settings > Shipping and delivery.
  2. Under Local pickup, turn on pickup for one or more locations.
  3. Make sure the product is stocked at those locations.
  4. In the theme editor, check that Show pickup availability is on in the Buy buttons block.

Pickup information doesn't show when the variant is sold out, or when no location offers pickup.

Shop Pay Installments

When Shop Pay Installments is available for your store, a message under the buy buttons shows how customers can split the payment. It updates when customers change the variant. There's no theme setting for it. Turn it on in Settings > Payments. Shopify decides which prices and countries qualify.

Unit prices

Unit prices show the price per measure, for example $4.50/100ml. To add one, open a product variant in your Shopify admin and fill in the unit price fields. Unoque shows unit prices on the product page, on product cards and in the cart. Unit prices are available in some countries only.

Sticky add to cart bar

When Show sticky add to cart bar is on, a bar slides up from the bottom of the screen when the main buy button scrolls out of view. It shows the product title, the price and an add to cart button. On tablets and desktops, it also shows the product image and, for products with options, a Choose options button that scrolls back to the variant picker.

The bar adds the variant and quantity the customer selected. It needs the Buy buttons block in the Product information section.

Quick add from product cards

Customers can add products to the cart from product cards, without opening the product page:

  • Products without options are added in one click.
  • Products with options, or with subscription options, open a quick view. It shows the images, price, variant picker, quantity selector, buy buttons and a View full details link.

Turn quick add on or off with Quick add in Product cards.

Complementary products

The Complementary products block shows products that go well with this one, each with an add button.

  • Heading: the heading above the list.
  • Maximum products to show: from 1 to 6.

To select complementary products, add the Search & Discovery app. In the app, open Product recommendations, choose a product and add its complementary products. The block stays hidden for products without complementary products.

Subscriptions

Unoque works with subscription apps that add an app block to the Product information section. Install the app, then add its block, usually right above Buy buttons. The cart shows the subscription plan each customer chose.

Show different content on each product

The product template is shared by all products. To show different text or images on each product, store the content in metafields and connect them to blocks and sections. This is called using dynamic sources.

Step 1: create metafield definitions

  1. In your Shopify admin, go to Settings > Metafields and metaobjects > Products.
  2. Select Add definition.
  3. Enter a name, such as "How to use", and choose a type:
    • Rich text or Multi-line text for paragraphs, such as how-to steps or ingredients.
    • Single line text for short text, such as a texture or skin type.
    • File with images only, for images such as a before and after photo.
    • Page to point to a page, such as a size guide.
  4. Save the definition.

Step 2: fill in the metafields

Open each product in your Shopify admin. Scroll to Metafields and fill in the values.

Step 3: connect the metafields in the theme editor

  1. Open the product page in the theme editor.
  2. Select a block or a section setting, for example Row content in a Collapsible row block.
  3. Select the Connect dynamic source icon next to the setting.
  4. Choose the metafield.
  5. Select Save.

Settings you can connect include:

  • Text in the Text block.
  • Row content and Row content from page in Collapsible row blocks.
  • Heading and Text in Multicolumn columns, for example to list each product's own ingredients.
  • Question and Answer in FAQ blocks.
  • Before image and After image in Before and after.

Tip: if a product leaves a metafield empty, the connected setting is empty on that product. Collapsible rows with no content are hidden.

Use a different template for some products

If some products need a different layout, for example kits, create a second template:

  1. In the theme editor, open Products in the page selector and select Create template.
  2. Name it, for example "kit", and base it on Default product.
  3. Change the sections and blocks.
  4. In your Shopify admin, open each kit and choose the new template under Theme template.

Updated 2026-10-24