The product page
Chapter 6 of the Scruff user guide.
The four product templates
| Template | Assign it to | What's on it |
|---|---|---|
product (the default) | Collars, harnesses, leads, coats, beds, toys: anything sold in sizes, and anything else | Metadata, title, price, the Pet fit row, the variant picker with its Size guide link, buy buttons, back-in-stock request, pickup, a Trust row, then Description, a Shipping and returns accordion and Specifications. Under it, two Product recommendations rows. |
product.tag | Engraved ID tags | The same page with the Name tag preview under the variant picker, and no fit row or size guide (chapter 10) |
product.embroidery | Collars, leads and bandanas you embroider | The product page plus the Embroidery preview ("Add embroidery") under the size guide link (chapter 10) |
product.food | Food and treats | Free-from chips under the price, the Feeding calculator under the variant picker, an Ingredients accordion first, and a Shipping and autoship accordion; no fit row or size guide (chapter 11) |
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 main photo in a large squircle on colour block A, with the product's round tag hanging at its top left, and thumbnails under it (on phones, a swipe carousel with dots). It takes images, video, external video and 3D models. Choosing a variant shows that variant's image if it has one. From 990px the buy box beside it stays in view as the page scrolls.
Product page blocks
| Block | Settings | What it shows |
|---|---|---|
| Product metadata | Show vendor in metadata, Show SKU (both off) | A small eyebrow line above the title: the product type, and the vendor and SKU if you turn them on |
| Product vendor | The vendor | |
| Title | The product's name | |
| Price | Show tax note (on, but off in the shipped templates) | The price, the sale price with the compare-at price struck through, and the unit price |
| Inventory | Show "Only 3 left" at or under (10, from 1 to 40) | A stock line: "In stock" in green, "Only 3 left" or "Sold out". Not in the shipped templates; add it if you want one. Quick view always shows it. |
| Variant picker | The options (see below) | |
| Pet fit | Choose the size that fits (on) | "Fits Mabel in M" with the pet's weight and the size's range, and the fitting size selected (chapter 8) |
| Size guide | See chapter 9 | The "Size guide" link in the size option's label row, and the guide |
| Name tag preview | See chapter 10 | Engraving or embroidery with a live preview |
| Feeding calculator | See chapter 11 | The daily amount, how long the bag lasts and the delivery interval |
| Free-from chips | The product's custom.free_from values as small chips (chapter 11) | |
| Ingredients | Heading ("Ingredients"), Open by default (off) | An accordion with the product's custom.ingredients (chapter 11) |
| Description | Show as a collapsible row (on), Open by default (on; shows while collapsible) | The product description. The shipped templates show it as a closed row. |
| Buy buttons | See below | The quantity, the add to bag button and everything around it |
| Back-in-stock request | Heading ("Notify me when available"), Text ("Leave your email and we'll write to you when it's back in stock.") | See below |
| Pickup availability | See below | |
| Trust row | Three items, each an Icon, a Label and a Text: "Free size swaps" / "60 days, in shop or by post", "Ships tomorrow" / "Order by 2 pm", "Stitched in Brunswick" / "Lifetime repairs" | Three short promises side by side. An item with no label is left out. The Barkery and Whisker presets, and every preset's product.food, have their own words. Rewrite them to your own. |
| Specifications | Heading ("Specifications"), Spec row position (Above product details or Below product details), Show SKU, Show product type, Show vendor in spec table, Show weight, Show variant options (all on), Show barcode (off) | A two-column table from the product data you already keep in Shopify |
| Specification row | Label, Product metafield, Value, Unit | One row in the Specifications table, inside it. Set Product metafield to a namespace and key, such as custom.material. The sample label is "Material": change it to match the metafield. A row with no value is hidden, and the theme editor says why. |
Add the general blocks in chapter 5 too, and app blocks, such as a reviews app's star rating.
Buy buttons settings:
| Setting | Default | What it does |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans (chapter 11) |
| 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 a tag or embroidery is being personalised (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 bag button scrolls out of view. |
| Returns note | Shown under the add to bag button. Leave it empty to hide. |
The button reads "Add to bag · $64", and its price follows the variant, the purchase option (an Autoship plan shows its own price, such as "$80.10" at 10% off), the quantity and any embroidery fee. Under it sits "Free shipping over $79." when you've set Free shipping over (Theme settings › Commerce), followed by your Returns note.
Variants and swatches
- The size option (the option named in Size option names, Theme settings › Pet profile) shows as size tiles: the size in the heading font with a small line under it, the neck range or weight range from your size table (Size tile detail, chapter 9). The size that fits the shopper's pet wears a small green "Mabel" pill. Size names over six characters turn the tiles into wider pills.
- An option whose values have swatches (a colour or image set on the option in Shopify admin) shows round swatches.
- Any other option is a row of tiles, and an option with more than twelve values and no swatches is a dropdown.
Each option's label row shows the chosen value at the right ("Colour · Tan"). 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.
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.
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 beds or collars you make 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 and stock line say pre-order. 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. Product cards don't show a pre-order tag.
Subscriptions
With a subscription app, the buy box shows the product's purchase options as plan cards ("One-time purchase", "Every 4 weeks · $80.10 · save 10%"). On food and treats the feeding calculator preselects the right plan. Chapter 11 has the details.
Back-in-stock request
Under a sold-out variant, shoppers can leave their email. Each request is emailed to your store's sender address (Settings › Notifications), 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, or Show quick add button on a product with options, cards open the product in a panel with its gallery, price, the Pet fit row, a stock line, options, the Size guide link and the buy buttons, then View full details. A product you engrave or embroider shows "Personalise on the product page" in place of the preview; an engraved tag shows it as a button, with no buy buttons, so it can't go in the bag without its words (chapter 10).
Quick view can't read your product templates' block settings. It uses each block's default settings, so Accelerated checkout buttons show there, the stock line uses its default threshold, and the Product section's pre-order opt-ins don't reach it.
Quick view and quick add don't personalise, so they send the shopper to the product page instead: quick add opens it, and quick view keeps the buy buttons only for optional embroidery. Which products count is in chapter 10, under Quick view and quick add.
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 a groomer or a dog café reordering treats, 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.tag or product.embroidery: it adds items without their engraving or embroidery.