Product page
Sizing is the last question before add to cart, and returns are this category's margin problem. Folio's product page is built around answering both.
Block order
The buy column is assembled from blocks, so you can order it for what you sell. The shipped order is title, price, variants, size guide, buy buttons, inventory, fit, pickup, description, fabric, shipping, share.
Size guide
Add the Size guide block. It renders a link beside your size options rather than lower down the column, and opens a panel without leaving the product.
- Option name — the product option holding sizes, exactly as you named it. Size, Length and Waist all work. If nothing matches, the link falls back to wherever the block sits.
- Page — choose a page holding your measurements table. Shopify's rich-text fields reject tables, so the table lives on a page and you maintain it in one place.
Fit
A three-point scale — runs small, true to size, runs large — because fit is comparative and a position reads faster than a sentence. Add a model note underneath: height and the size worn.
Fabric
A composition line plus up to four claims, each with an icon from the performance set: four-way stretch, compression, squat-proof, breathable, moisture-wicking, lightweight, seamless, pockets, recycled, care.
Per-product values
Fit and fabric read the product first and fall back to the block. Without this every product on a template shows the same model note and the same composition, which is wrong the moment you sell more than one shape.
| Metafield | Type | Example |
|---|---|---|
custom.model_note | Single line text | Model is 5′9″ and wears a size S. |
custom.fit_scale | Single line text | small, true or large |
custom.fit_detail | Multi-line text | High rise, sitting at the natural waist… |
custom.composition | Single line text | 78% recycled nylon, 22% elastane |
Colour swatches
Swatches appear on cards and in the variant picker wherever Shopify supplies swatch data. Set them per product: Products → the product → Variants → the Color option → a swatch on each value. Without it the picker falls back to text buttons, which still works but loses the visual scan.
Sticky bar
On a phone a bar appears once the buy button scrolls away. It adds to cart directly, and on a multi-variant product carries a compact size select.