The product page
Chapter 6 of the Littles user guide.
The Product section's settings are Show breadcrumbs (on), Enable image zoom (on: adds a zoom button to each image and opens images full screen) and the pre-order settings below. Its buy box is built from blocks you can reorder, remove or add again.
The gallery
The active image stands on a large square pastel tile, with the product's badges at the top left and the Zoom and View in your space buttons at the bottom right, beside a column of small pastel thumbnails. On phones the thumbnails become dots under the tile and shoppers swipe between images. The gallery handles images, video, YouTube and Vimeo, and 3D models. When a variant has its own image, choosing it brings that image forward.
Buy box blocks
| Block | What it shows | Settings |
|---|---|---|
| Product metadata | Show: Age badge and rating (the large age badge, "Fits 0–12 months", and the stars and "4.9 · 128 reviews"), Subtitle (custom.subtitle) (a line such as "Organic cotton rib, short sleeves and snaps all the way down.") or Type, vendor and SKU (a small muted line). The presets use the first above the title and the subtitle under it. | Show vendor in metadata (off; Type, vendor and SKU only). The rating reads reviews.rating and reviews.rating_count, which review apps fill in; it hides when a product has none. The age badge reads the age range or the size option (chapter 8). |
| Title | The product title | None |
| Product vendor | The vendor, linked to its products | None |
| Price | The selected variant's price and compare-at price, with "Tax included." (and "Free shipping over $75." with a threshold set, chapter 2) beside it | Show tax note (on) |
| Certifications | Chips such as "GOTS certified organic", "+2 more" for the rest | See chapter 11 |
| Variant picker | One selector per option (below) | None |
| Size helper | "Not sure which size?" and the size helper | See chapter 9 |
| Age warning | A butter-yellow box with a warning triangle: "Not suitable for children under 3. Small parts." | See chapter 11 |
| Buy buttons | Quantity, the add button with the price in it ("Add to bag · $39.00"; the price drops out where the button is too narrow for it, such as beside the quantity and heart on a phone), the large heart, subscriptions, accelerated checkout, installments and the sticky bar | See below |
| Perk | One short line with an icon, such as "Free shipping over $75. Sent in 1 to 2 days." Perks stack. | Icon (Truck, Gift, Return, Leaf, Ruler, Heart or Clock) and Text (bold words lead the line) |
| Inventory | "Only 3 left in 6–12 m" at or under the threshold, otherwise "In stock"; "Pre-order" or "Sold out". Counts show only for variants whose inventory Shopify tracks. | Low stock threshold (10, 1 to 40). This is separate from the card badge's threshold in Theme settings › Product cards. |
| Back-in-stock request | Under a sold-out variant: an email field and "Tell me when it's back" | Heading ("Sold out for now") and Text ("Leave your email and we'll write to you when it's back.") |
| Pickup availability | Whether the variant can be picked up from your locations | None |
| Description | The product description. The presets put it after pickup, before "Shipping and returns". | None |
| Materials and care | Materials and care rows, if you'd rather have them in the buy box than under it | See chapter 11 |
| Spec table | A table of the product's facts (SKU, type, vendor, weight, barcode, variant options) and Spec row blocks for your own metafields | Heading ("Specifications"), Spec row position (Above or Below product details) and a switch for each fact. Each Spec row: Label ("Fabric weight"), Product metafield (namespace.key, such as custom.pieces), Value (used when the metafield is empty; a typed value shows on every product that uses the template) and Unit. Useful for toys: pieces, dimensions, batteries. |
The theme blocks from chapter 5 (such as the Collapsible row "Shipping and returns" in the presets) and app blocks can go between them. Blocks with nothing to show for a product take no space: a product without an age warning shows no warning box, a product without reviews no stars.
Back-in-stock requests are sent to you, not to the shopper: each request reaches your store's sender address as a contact message naming the product and variant. Nothing is sent to the shopper automatically, and nothing subscribes them to marketing. Reply when the stock is back, or use a back-in-stock app instead.
The variant picker
Each option shows as the selector that suits it, with the option's name and the chosen value in its label ("Colour · Oat"):
- Size tiles: the option named in Theme settings › Sizing › Size option names ("Size" or "Age" by default), as rounded tiles, up to five to a row (three on phones). Under each size, with Detail under size tiles set, its height or age from the size table ("62–68 cm", chapter 9). The label row ("Size · 6–12 m") carries a Size guide link with a ruler at its end, which opens the size helper, when the section has a Size helper block (the presets do, and quick view always does). Without one, the link appears when the page has the Size guide and safety section's size guide, and takes the shopper there. A size option with more than 20 values shows as a select menu instead.
- Swatches: options whose values carry swatches (set them in the product's options in admin), as round color circles.
- A select menu: every other option.
Sold-out values stay selectable and are struck through, so shoppers can still see the price and ask to be told when it's back. Choosing a value updates the price, stock, images and buy buttons without a reload. Combined listings (Shopify Plus) work too: a value that belongs to another product loads that product in place.
Buy buttons
| Setting | Default | What it does |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans from a subscriptions app. Each option shows the price Shopify calculates for that plan. |
| Show quantity selector | On | |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and so on: customers see the methods available on their device |
| 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: a floating bar with the photo, title, price and add button appears when the add button scrolls out of view |
| Returns note | Empty | A line under the add button, such as "Free returns within 30 days" |
The large heart beside the add button saves the product, and the size chosen, to the shopper's wish list (chapter 10). If an Age warning block is in the section, the add button is linked to it, so screen readers read the warning with the button.
Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.
Pre-orders
Littles labels a variant as a pre-order only from real data, with two opt-ins on the Product section (both off by default; connect a true or false product metafield to either to choose per product):
- Show oversold variants as pre-orders: for tracked variants set to Continue selling when out of stock that have 0 or fewer in stock.
- Show single-delivery purchase options as pre-orders: for products sold only through a pre-order app's purchase options (leave it off for try before you buy).
A pre-order variant shows "Pre-order" in the stock line and on its add button, and its cart line carries a "Pre-order" property. Pre-order note adds a line under the button, such as "Ships in March" (give a date or a range); connect a product metafield to set it per product.
B2B and wholesale
For customers buying for a company location, the buy box shows their catalog's quantity rules (minimum, multiples and maximum) and volume pricing ("10+" with the price per unit), and the quantity field follows the rules. Customers without B2B see none of it. Add the Quick order list section to the product template for a table of every variant with quantity fields: handy for shops that also sell wholesale to other boutiques.