The product page
Chapter 6 of the Tress user guide.
The Product section's settings:
| Setting | Default | What it does |
|---|---|---|
| Show breadcrumbs | On | The trail above the product |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
The gallery is a mirror pair. On desktops, the first two images stand side by side in tall 9:16 capsules, the second set a little lower, with capsule thumbnails in a column beside them; clicking a thumbnail brings that image into the first mirror. On phones it is one capsule, swiped, with the thumbnails in a row under it. It handles images, video, YouTube and Vimeo, and 3D models (video and 3D play in a soft-cornered capsule). When a variant has its own image, choosing it brings that image first. For the capsule crop, centre the product in your photo and leave about 15% free above and below it.
Under the gallery sit two blocks that every product page has, which you select in the editor's block list under the Product section:
- Hair details: the label with stat pills and rows from your metafields (chapter 11).
- Care: the care steps, and for wigs the "Find your cap size" guide (chapter 11).
Both show nothing on products without the data, so a product with no hair metafields and no care text shows just its gallery. The section also has the pre-order settings below. Its buy box is built from blocks you can reorder, remove or add again.
Selling hair, press-ons and lashes in one store? Every preset ships three product templates: Default product (hair: "Hair details", install trust rows), nails (press-ons: "Set details", prep-kit trust rows, "How to apply press-ons") and lashes ("Lash details", "How to apply strip lashes"). Open a product in Products, and under Theme template pick nails or lashes. Edit each template's wording in the theme editor by choosing it from the page menu at the top (Products › nails).
Buy box blocks
The presets' order is Product metadata, Title, Price, Variant picker, Buy buttons, Back-in-stock request, Pickup availability, Trust rows, Description, two Collapsible rows ("Shipping and returns", then "How to install a frontal", "How to apply press-ons" or "How to apply strip lashes") and Share.
| Block | What it shows | Settings |
|---|---|---|
| Product metadata | The line above the title: the collection the shopper came from (or the product type) as a link, then the rating ("4.9 · 186 reviews") after five accent stars | Show vendor in metadata (off). The rating needs a reviews app that fills the product's reviews.rating and reviews.rating_count metafields, and hides when a product has none. |
| Title | The product title, in the heading font | None |
| Product vendor | The vendor, linked to its products | None |
| Price | The selected variant's price and compare-at price with the Sale badge beside them, the tax note, and Shopify's own instalments message under it, styled to wrap neatly on small phones | Show tax note (on) and Show Shop Pay Installments (on). The instalments message appears only when Shop Pay Installments is enabled on your store (chapter 7). |
| Inventory | The selected variant's stock ("Only 3 left", "In stock", "Pre-order" or "Sold out"). Counts show only for variants whose inventory Shopify tracks. | Low stock threshold (10, 1 to 40) |
| Variant picker | The length scale, texture chips, glossary buttons, nail chips and sizes, the cap guide link, swatches, tiles and select menus (below) | Figure beside the length scale: Use the theme setting (default), Show or Hide (chapter 8) |
| Description | The product description | Show as an accordion row (on), Heading ("Description") and Open by default (off) |
| Buy buttons | The add button with the price in it ("Add to bag · $219.00"), quantity, subscriptions, accelerated checkout and the sticky bar | See below |
| Back-in-stock request | Under a sold-out variant: an email field and a Notify me button | Heading ("Notify me when available") and Text ("Leave your email and we'll write to you when it's back in stock.") |
| Pickup availability | Whether the variant can be picked up from your locations ("Pickup available at Parramatta studio") | None |
| Trust rows | Up to three short lines, each with an accent icon | Icon (None, Truck, Bonnet, Return, Ruler, Sparkle or Clock) and Text for each row. Defaults: Truck "Order by 2 pm for same-day dispatch", Bonnet "Free silk bonnet with every install", Return "30-day returns on unopened lace". State only what your store really offers; a row with no text is skipped. |
| Hair details | The hair details label (chapter 11). It can also go in the buy box. | Chapter 11 |
| Care | The care steps (chapter 11). It can also go in the buy box. | Chapter 11 |
| Share | "Share" and the product's own web address as a link, for shoppers to copy or open | None |
The theme blocks from chapter 5 (such as the presets' Collapsible rows) and app blocks can go between them. Blocks with nothing to show for a product take no space: a product without reviews shows 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 ("Length: 18 in (46 cm)"). Which one is decided by the option's name, matched against the names in Theme settings › Hair, lashes and nails (capitals and spaces around the name don't matter):
- Length scale: an option named in Length option names (Length, Hair length), when every value is a length ("18 in", "45 cm", "18"). Chapter 8.
- Texture chips: an option named in Texture option names (Texture, Pattern), when every value has a picture: a Shopify swatch image, a line in Texture images, or a texture Tress can draw. Chapter 8.
- Nail chips: options named in Nail shape option names (Shape, Nail shape) and Nail length option names (Nail length), on press-on sets. Chapter 10.
- Nail sizes: an option named in Nail size option names (Size) on a press-on set: tiles, the tip numbers for the chosen size, and ten custom size fields for the Custom size value (Custom). Chapter 10.
- An (i) glossary button after the label of an option named in Options with a glossary (Lace, Density, Grade, Cap size), when at least one of its values has a definition. Chapter 8.
- "Find your cap size" beside the label of an option named in Cap size option names (Cap size). Chapter 11.
- Swatches: an option whose values carry Shopify swatches (a color or an image), as tiles with a swatch dot.
- A select menu: an option with more than eight values and no swatches.
- Tiles: every other option, as a row of lacquer tiles; the chosen one is filled.
A feature only takes an option when every value fits, so a row is never half chips and half tiles: if one length doesn't read as a number, the whole option shows as tiles. Sold-out values stay selectable (except on the length scale, chapter 8) and are struck through, so shoppers can still see the price; screen readers hear that the value is sold out. Choosing a value updates the price, stock, images, hair details and buy buttons without a reload, and arrow keys move between tiles, chips and stops. Combined listings (Shopify Plus) work too: a value that belongs to another product loads that product in place.
In the theme editor, the variant picker also shows samples tagged Sample: on a product without a length or texture option, a texture row, lace tiles with a working (i) and a short length scale (12 to 22 in, 22 sold out); on a product that isn't a press-on set, nail chips and a custom size panel. So you can see and style every feature before your products have the options. Shoppers never see them.
Buy buttons
| Setting | Default | What it does |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans, such as lash refills every month |
| Show quantity selector | On | A stepper beside the add button |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and so on: customers see the payment methods available on their device. Tress hides them while a shopper's custom nail sizes are incomplete (chapter 10). |
| Show sticky add-to-cart bar | On | Product pages only: a 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 "Unopened bundles can be returned within 30 days" |
The add button is a full-width primary button with the price in it, which follows the chosen options. With Theme settings › Commerce › Free dispatch over above 0, "Free shipping over $150." shows under it. Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.
Pre-orders
For a restock that's on its way, or a new texture you're taking orders for. Tress 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 that keep selling at zero stock (Continue selling when out of stock) with 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 bag 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), and becomes the property's value; connect a product metafield to set it per product. The Featured product section has the same three settings.
B2B and wholesale
For customers buying for a company location (a salon restocking bundles, a lash tech buying trays), the buy box shows their catalog's quantity rules ("Minimum 5", "Multiples of 5", "Maximum 50") and volume pricing (the price per unit at each quantity), and the quantity field follows the rules. Customers without B2B see none of it. Add the Quick order list section to a product template for a table of every variant with quantity fields; Flutter's product.trade template is one, ready to assign to your trade products.