The product page
Chapter 6 of the Hooray user guide.
The two product templates
| Template | Assign it to | What's on it |
|---|---|---|
product (the default) | Balloons, tableware, decorations, kits: anything sold as it is | Occasion chips, title, price, description, variant picker, buy buttons, back-in-stock request, pickup, a Delivery note and a Trust row. Under it, Product details (What's in the kit, Good to know) and Product recommendations. |
product.garland | Garland kits, and anything you make in the shopper's colours | The same page with the Garland builder under the variant picker (chapter 9) |
To assign one, open the product in Shopify admin and choose it in the Theme template field, then Save. A new product starts on product.
To change a template, open the theme editor, click the page selector at the top, choose Products and pick the template. Changes apply to every product using it. Fixed words on a template, such as a trust row or an accordion, show on every product that uses it, so keep them true of all of them.
The Product section
| Setting | Default | What it does |
|---|---|---|
| Show breadcrumbs | On | |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Pre-orders | Off | See Pre-orders below |
The gallery shows your product photos on a warm tile, never cut as balloons, so packshots stay whole. It takes images, video, external video and 3D models. Choosing a variant shows that variant's image if it has one.
Product page blocks
| Block | Settings | What it shows |
|---|---|---|
| Occasion chips | Fallback occasions, Link chips to, Occasion metafield (custom.occasions), Most chips to show (6, from 1 to 12) | The product's occasions as chips that link to the occasion filter (chapter 8) |
| Product metadata | Show vendor in metadata (off) | A small line above the title: the product type, the vendor and the selected variant's SKU. Not in the shipped templates. |
| Product vendor | The vendor | |
| Title | The product's name, with the star rating under it once a review app fills Shopify's reviews metafields | |
| Price | Show tax note (on, but off in both templates) | The price and the sale price |
| Inventory | Show "Only 3 left" at or under (10, from 1 to 40) | A stock line. Not in the shipped templates; add it if you want one. |
| Variant picker | The options (see below) | |
| Garland builder | See chapter 9 | Colours, style and the live preview |
| Description | The product description | |
| Buy buttons | See below | The add to cart button and everything around it |
| Back-in-stock request | Heading ("Notify me when available"), Text | See below |
| Pickup availability | See below | |
| Delivery note | Icon (Van), Heading ("Delivery and setup across the Inner West from $25."), Text ("Pick your event date and check your postcode in the cart."), Link label ("Delivery zones"), Link | A short delivery line with a link. Leave Link blank to use the Delivery zones page from Theme settings › Event date and delivery. Rewrite the heading to your own areas and prices. |
| Trust row | Three items, each an Icon and a Label: "Packed in your mix", "Order by 2 pm, ships today", "Air-filled, lasts weeks" | Three short promises side by side. An item with no label is left out, and an empty row shows nothing. |
| Kit contents | Heading ("What's in the kit"), Kit contents row position (Above product details or Below product details), Show SKU, Show product type, Show vendor in kit contents, Show weight, Show variant options (all on), Show barcode (off) | A table from the product data you already keep in Shopify. The shipped templates show it in Product details instead (chapter 4). |
| Kit contents row | Label, Product metafield, Value, Unit | One row in the Kit contents table. Set Product metafield to a namespace and key, such as custom.pack_size. The sample label is "Pack size": change it to match the metafield. A row with no value is hidden. |
Add the general blocks in chapter 5 too.
Buy buttons settings:
| Setting | Default | What it does |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans |
| Show quantity selector | On | |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and the like. Customers see the payment methods available on their device. Hidden while Theme settings › Event date and delivery › Hide Buy it now and express buttons is on, which it is by default (chapter 10). |
| Show Shop Pay Installments | On | Appears when Shop Pay Installments is enabled on your store |
| Show sticky add-to-cart bar | On | Product pages only. Appears when the add to cart button scrolls out of view. |
| Returns note | Shown under the add to cart button. Leave it empty to hide. |
Under the button sits "Free shipping over $100." when you've set Free shipping over (Theme settings › Commerce), followed by your Returns note.
Variants and swatches
- If an option's values have swatches (a colour or image set on the option in Shopify admin), it shows swatches.
- With more than eight values and no swatches, it's a dropdown.
- Otherwise it's a row of rounded buttons.
A combination you don't sell stays selectable, struck through, and the button says it's unavailable. The page updates in place as shoppers choose, and the address follows the variant so it can be shared. Products with more than 250 variants work, and so do Shopify combined listings.
A foil number balloon sold as one product with a Number option (0 to 9) works well here: ten values is a dropdown, or give them swatch images of each digit to show them as tiles.
Pickup
Pickup availability shows whether the selected variant can be collected, and where. It shows nothing unless you've turned on Pickup in store for a location in Settings › Shipping and delivery (chapter 10).
Pre-orders
Two opt-ins, both off, in the Product and Featured product sections:
- Show oversold variants as pre-orders: for tracked variants that keep selling at zero stock ("Continue selling when out of stock" in Shopify admin). Useful for garland kits you pack to order.
- Show single-delivery purchase options as pre-orders: for products sold only through a pre-order app. Leave it off for try before you buy.
When a variant qualifies, the button, badge and stock line say pre-order. Product cards say it too once you turn on Theme settings › Badges › Show "Pre-order" for oversold products (chapter 2). Pre-order note is shown under the button, for example "Ships in March": give a date or a range. To choose per product instead of for the whole template, connect a true or false product metafield to the opt-in, and a product metafield to the note, with the dynamic source button.
Subscriptions
With a subscription app, such as Shopify's free Shopify Subscriptions app, the buy box shows the product's purchase options with the real price of each. Nothing to set up in the theme beyond Show subscription options.
Back-in-stock request
Under a sold-out variant, shoppers can leave their email. Each request is emailed to your store's sender address (chapter 12), naming the product and variant. Nothing is sent to shoppers automatically: reply when the stock is back. For automatic emails, use a back-in-stock app instead and remove this block.
Gift cards
Gift card products show Shopify's recipient fields, so a shopper can send the card to someone else on a chosen date. Accelerated checkout buttons never show on a gift card.
Quick view
With Show quick view button on, cards open the product in a panel with its gallery, price, stock, options and buy buttons. A product on product.garland also gets its Garland builder, with the colours and settings of the builder on its product page, and its Buy it now stays hidden until a colour is picked, the same as on the page.
Quick view can't read your product templates' other block settings. It uses each block's default settings, so Accelerated checkout buttons show there unless Hide Buy it now and express buttons is on, and the Product section's pre-order opt-ins don't reach it.
B2B
Shopify B2B is available on the Basic, Grow, Advanced and Shopify Plus plans, not on Starter or Retail, and what you can use depends on your plan. For customers buying for a company location, such as an events company or a venue reordering tableware, the buy box shows their catalog's quantity rules ("Minimum 10 · Multiples of 5") and volume pricing. Everyone else sees no change.
Quick order list (product pages only) lists every variant of a product in a table with quantity fields. Heading ("Quick order"), Variants per page (25, from 10 to 50 in steps of 5) and Show SKU (on). It adds one-time purchases, and it doesn't show on a product with only one variant or a product that requires a subscription plan. Don't add it to product.garland: it adds kits without the shopper's colours.