Product page
Your product page works as soon as you add a product. Everything on this page is optional — it lets each product show its own images, benefits, specifications and content.
To edit it: Online Store → Themes → Customize, then navigate to any product.
What's on the page
The product page is built from sections you can reorder, hide or remove:
| Section | What it shows |
|---|---|
| Product information | Images, title, price, variants, Add to cart |
| Assurance strip | Four brand promises in a full-width band |
| Product content | Description, benefits, specifications, shipping |
| Customer reviews | Star rating and your review app |
| Complementary products | Items that go with this one |
| Product recommendations | Related products |
Drag any section to move it. Click the eye icon to hide one without deleting it.
Product images
Select the Product information section to find all image settings.
Choosing a layout
Layout on large screens gives you three choices:
- Slider — one large image with thumbnails. Best for most stores.
- Stacked, one column — every image shown down the page.
- Stacked, two columns — every image in a two-across grid.
Stacked layouts show everything at once, which suits products where customers want to see all angles without clicking. They work best when all your images are the same shape.
Mobile always shows a slider, whichever layout you choose. Stacked images on a phone mean a lot of scrolling before reaching the price.
Making mismatched photos look consistent
If your product photos aren't all the same shape, this is the fix.
Media aspect ratio sets one shape for every product image — Square, Portrait, or one of two Landscape options. Media crop then decides what happens to images that don't match:
- None — the image is shown in full with space around it. Nothing is ever cut off.
- Image focal point — crops to the focal point set on the image itself, in Files or the image picker. The one option that can differ per image rather than applying one rule to the whole gallery.
- Top — the image fills the shape, keeping the top. Good for clothing.
- Center — the image fills the shape, keeping the middle.
Use Natural ratio only if all your images already share one shape.
If you choose crop None, set Media background (under Colors) to match your photography backdrop. The empty space around your images then becomes invisible.
Zoom
Zoom mode on large screens:
- Open lightbox — clicking opens a full-screen view with arrows and thumbnails
- Magnify on hover — the image magnifies under the cursor as it moves
- Magnify on click — the same, but clicking turns it on and off
Zoom level controls how detailed the zoomed image is:
| Level | Best for |
|---|---|
| Medium | Most products |
| Large | Jewellery, textiles, anything with fine detail |
| Original image | Maximum detail — uses your full-size file |
The larger file only downloads when a customer actually zooms, so a higher setting doesn't slow down your page for everyone else.
Thumbnails
Show thumbnails on slider layout is set to Large screens only by default. On a phone, a thumbnail row takes up space that would otherwise show your price and Add to cart button, and mobile customers usually swipe instead of tapping thumbnails.
Thumbnail position puts them to the left of the image or below it.
If a product has many images, the thumbnail column scrolls rather than stretching taller than the photo.
All image settings
The rest of the settings in this section, in the order you'll find them:
| Setting | Default | What it does |
|---|---|---|
| Product title size | 32px | Size of the product name. Scales down automatically on phones. |
| Media width on large screens | Medium | How much of the row your images take. Large gives them more space. |
| Enable video looping | Off | Repeats product videos automatically. |
| Enable zoom | On | Turn off to disable zoom entirely. |
| Enable lightbox on mobile | On | Lets phone customers tap an image to view it full screen. |
| Scroll to variant media | On change | Stacked layouts only. Jumps to the image for the selected variant. |
| Underline active media | On | Stacked layouts only. Marks which image matches the current variant. |
| Show thumbnails in lightbox | On | Thumbnails inside the full-screen view. |
| Thumbnail shape | Square | Shape of the thumbnails. |
| Thumb crop | None | Whether thumbnails are cropped to fit their shape. |
| Show arrows | Large screens only | Previous and next arrows over the image. |
| Show slide count | On | The 3 / 8 counter on the image. |
| Media border | #EEEEEE | Border around images. Set to transparent to remove. |
| Media background | #F4F4F4 | Shows behind images when crop is None. |
| Keep the gallery in view while scrolling | On | Images stay visible while customers read down the page. |
| Show a sticky buy bar | On | See below. |
The sticky buy bar
A slim bar that appears at the bottom of the screen once the Add to cart button scrolls out of view, so customers can buy from anywhere on the page.
On desktop it shows the product image, name, selected variant and price. On phones it shows the price and button only, to leave room for the button.
It never appears while the main Add to cart button is still visible.
The buy area
Everything to the right of your images is a block. Drag blocks to reorder them, or click Add block to add something new.
The default order is: Badges, Title, Subheading, Rating, Price, Shop Pay Installments, Short description, Benefit icons, Variant picker, Quantity, Buy buttons, Trust row.
Badges
Small labels above the product title, like BEST SELLER or ‑25%.
Some appear automatically:
| Badge | When it appears |
|---|---|
| Sale | The product has a compare-at price |
| Sold out | Inventory has run out |
| New | Product was created recently |
| Low stock | Stock has dropped below your threshold |
Others come from product tags. Add these to a product in Shopify admin:
| Tag | Badge |
|---|---|
bestseller | BEST SELLER |
new | NEW |
limited | LIMITED |
badge:Your text here | YOUR TEXT HERE |
The badge: tag creates any badge you want:
badge:100% Pure and Natural
badge:Vegan
badge:Handmade
Type it in normal capitals — the theme uppercases it for you.
Maximum badges shown is 2 by default. Three or more competing labels stop any of them standing out. If a product qualifies for more, the most important ones are shown — a Sold out notice is never pushed off by a marketing label.
To show one badge on every product without tagging, turn on Show a badge on every product and type your text.
Set the overall style under Theme settings → Product page → Badge style: Solid or Soft tint.
Subheading
A short line under the title — 30ml – Therapeutic grade, Size 8 · Wide fit.
To show a different subheading on each product, click the database icon beside the field and connect it to a product metafield. See Using metafields below.
Rating and Ask a question
The star rating appears automatically once your review app has collected reviews. Products with no reviews show nothing rather than empty stars.
Ask a question opens a form where customers enter their name, email and question. You receive an email containing the question and the product it's about, so you can reply straight away.
The email goes to the address in Settings → Store details → Customer service email. Check this is correct before launching.
Set Action to Link to a page if you'd rather send customers to your FAQ page instead.
Pre-sale questions convert well. A customer who asks and gets a fast answer is far more likely to buy — and their question tells you what your product page is missing.
Price
Shows price, compare-at price and savings automatically. Nothing to configure here.
Choose how savings are displayed under Theme settings → Product page → Sale badge style:
- Percentage saved —
Save 25% - Amount saved —
Save $5.00 - Sale — a plain label
Shop Pay Installments
Shows or 4 interest-free payments of $3.74 with Shop Pay.
This only appears if Shop Pay Installments is available in your region and enabled on your store. Turn it off under Theme settings → Product page.
Short description
Two or three lines answering what is this and who is it for, shown before the variant picker.
Connect it to a metafield to vary it per product. Keep your long description in the Product content section further down the page.
Benefit icons
Four icons with short labels — Relax and unwind, Better sleep, Skin soothing, Aromatherapy.
Leave a label empty to hide that item. On phones these arrange into two rows of two.
This is the fastest-read element on your page. A customer who reads nothing else takes in four benefits in about two seconds. Use short labels — two or three words each.
Variant picker
Appears automatically for products with options. Nothing to set up.
Options that are sold out are dimmed but still clickable, so customers can see the price. Combinations that don't exist at all are crossed out and can't be selected.
Turn on Hide when the product has one variant to keep single-variant products clean.
Quantity and stock
The quantity selector, with a stock message beside it.
| Setting | What it does |
|---|---|
| Show stock status beside quantity | Turns the stock message on or off |
| Note shown after "In stock" | Adds text like Ships today |
| Show a low stock message at or below | When to switch to a low stock warning |
Stock comes from your real Shopify inventory. Products without inventory tracking always show as in stock.
Ships today is a delivery promise. If you can't guarantee it, leave the note empty. Shopify treats unfounded urgency claims as misleading, and customers notice when a promise isn't kept.
Buy buttons
Add to cart and the express checkout button (Shop Pay, PayPal, Google Pay or Apple Pay, depending on what you've enabled in Settings → Payments).
Local pickup availability appears here automatically if you've set up pickup locations.
Gift card products automatically get recipient fields — email, name, message and a send date — so customers can send a gift card directly to someone.
Trust row
Three small promises under the buy button — Free shipping / On orders over $49.
Leave a heading empty to hide that item.
This sits under the button on purpose. It answers the last three worries — cost, risk, security — at the moment a customer is deciding.
Wishlist button
This block is available but not added by default. It needs a wishlist app installed to work — the theme provides the button, the app stores the list.
Only add it once you have a wishlist app running.
Other blocks you can add
Click Add block in the Product information section for these:
| Block | What it does |
|---|---|
| Vendor | Shows the product's brand. Useful if you stock several brands. |
| Full description | Your Shopify product description, inside the buy area. Usually better placed in Product content below. |
| Accordion | A collapsible section beside the buy button — handy for a short shipping note. |
| Share | Social sharing buttons. |
| Custom Liquid | For developers, or code snippets an app has given you. |
| App blocks | Any product-page block from an app you've installed. |
Product content
The section below your buy area, holding your longer content.
Accordions or tabs
Layout switches the whole section between the two:
- Accordions — collapsible rows, one under another. Better for longer content and for phones.
- Tabs — a row of headings with one panel visible. Keeps the page shorter when you have several short sections.
Both work well for search engines. Switch whenever you like.
Panels
Each piece of content is a Panel block. Add as many as you need.
Give each one a heading, an icon, and choose where its content comes from:
| Content source | Use it for |
|---|---|
| Rich text | Text you type in the theme editor |
| Product description from Shopify admin | Your existing product description |
| Specifications from metafields | A table of product attributes |
Set your Description panel to Product description from Shopify admin. It then shows what you've already written on the product in admin — one place to update, not two.
If a panel has no content for a particular product, it disappears on that product rather than showing an empty section.
Specifications panels
Choose Specifications from metafields and you get a table built from your product data.
In the Metafields box, enter one line per row:
Material:shopify.material
Age group:shopify.age-group
Botanical name:custom.botanical_name
The format is Label:namespace.key. The label is what customers see; the key is where the value comes from.
Set this up once and every product shows its own values. Adding a new product needs no theme editing at all.
Other options:
- Right align values — puts values on the right, labels on the left
- Show metafields with no value — off by default, so rows without data disappear
- Text to use for empty fields — what to show if you turn the above on
The specification card
Beside your panels there's a card for key facts at a glance — Botanical name: Lavandula angustifolia.
Each row is a Specification row block with an icon, a label and a value.
To show a different value per product, fill in the Metafield field with namespace.key. The typed Value then acts as a fallback for products that don't have that metafield filled in — so the card never loses rows.
Remove all the rows and your panels take the full width.
Customer reviews
Shows your star rating and review count, plus a Write a review link.
The rating works with most review apps automatically — Judge.me, Loox, Yotpo, Stamped and Okendo all store ratings in the same place, so switching apps doesn't break it.
To show the reviews themselves, install a review app, then in the theme editor select the Customer reviews section, click Add block, and choose your app's block.
Collecting and storing customer reviews needs a database, which Shopify apps provide and themes cannot. The theme gives your reviews a designed home on the page.
Related products
Two sections, doing different jobs:
Complementary products shows items that go with this one — the carrier oil that goes with the essential oil. You choose these yourself in Shopify's free Search & Discovery app, under Product recommendations.
Product recommendations shows related products, chosen automatically by Shopify based on your catalogue and shopper behaviour. Nothing to set up.
Complementary products increase order value. Product recommendations rescue a customer who landed on the wrong product. Keep both.
Breadcrumbs
The trail at the top of the page: Home › Essential Oils › Single Oils › Lavender Essential Oil.
Breadcrumbs follow your navigation menu structure. To show a deeper trail, nest your collections in Online Store → Navigation → Main menu:
Essential Oils
└ Single Oils
└ Blends
A product in Single Oils then shows all four levels. If your menu is flat, you get Home › Single Oils › Product — still correct, just shorter.
Choose which menu to use under Theme settings → Product page → Menu used for breadcrumb hierarchy.
Using metafields
Metafields let each product show its own content in the same block — one setup, every product different.
Setting one up
- Go to Settings → Custom data → Products
- Click Add definition
- Give it a name, like Botanical name
- Choose a type — Single line text for short values, Rich text for paragraphs
- Save
Your new metafield now appears at the bottom of every product page in admin. Fill it in per product.
Connecting it to the theme
For text fields — Subheading, panel content — click the database icon beside the field in the theme editor and pick your metafield.
For specification rows and tables, type the reference directly: custom.botanical_name.
Category metafields
Shopify provides ready-made metafields for many product types. Set a product's Category in admin and you'll get fields like Material, Age group and Colour without creating anything.
These use the shopify namespace: shopify.material, shopify.age-group.
Suggested setup
For most stores, these four cover the product page:
| Metafield | Type | Used for |
|---|---|---|
custom.subtitle | Single line text | Subheading block |
custom.how_to_use | Rich text | A content panel |
custom.ingredients | Rich text | A content panel |
custom.care_guide | Rich text | A content panel |
Common questions
Ask a question opens a link instead of the form. Select the Rating block and set Action to Open a question form.
A specification row has vanished on some products. The metafield is empty for that product and the Value field is also empty. Fill in Value — it's used as a fallback.
My metafield content isn't showing. Check the namespace. Shopify's category metafields are shopify.something; ones you created are custom.something.
The savings badge shows a strange percentage. Check the compare-at prices on each variant in admin. A compare-at price that was never a real selling price produces a misleading discount — and can cause problems with Shopify's pricing rules.
Product images look cropped. Set Media crop to None under the Media settings. Images will then show in full.
My product page is very long on mobile. Turn Show thumbnails on slider layout to Large screens only, and switch Product content to Accordions.
Next steps
- Collection page — set up filtering, subcategories and collection content
- Getting started — theme settings, colours and fonts
- Changelog — what's new in each version
Still stuck? Contact support.