No. 02 · Theme block · v1.0.0
Fitting
The size question, answered kindly.
Three quick steps, then a recommended size with a fit match and the reason for it. Remembered across product pages.
Code complete · live Shopify store test pendingPreview shown with demonstration products and imagery from a fictional store, to show how the block can look on your product page. Included files and features are detailed below. The demo bag doesn't touch your Maisonblock bag.
What it does
Fitting asks for height, weight, body shape and fit preference, estimates the shopper's measurements and compares them with your garment chart. It shows a recommended size, a fit-match score and a size-by-size comparison so the advice is explained, not just asserted.
Answers are kept in the shopper's own browser so the next product page already knows them. Nothing is sent to a server.
Features
- Height and weight in cm / ft-in and kg / lb
- Body shape and fit preference steps
- Fit-match ring with a size-by-size comparison
- "Between sizes" handled honestly
- Stored only on the shopper's device
- Side drawer on desktop, swipe-to-close sheet on phones
You'll need
- Your garment measurements per size (chest, waist, hips, length) pasted into the block settings
Configuration options
Every setting this piece adds to the theme editor, read straight from its code.
| Theme-editor setting | Type | Default |
|---|---|---|
| Default sizing | select | menswear |
| Default height unit | select | cm |
| Default weight unit | select | kg |
| Product swatch colour | color | #2f5d3f |
| Menswear chart (JSON) | textarea | [{"size":"S","chest":102,"waist":96,"hips":100,"length":68},{"size":"M","chest":108,"waist":102,"hips":106,"length":70},{"size":"L","chest":114,"waist":108,"hips":112,"length":72},{"size":"XL","chest":120,"waist":114,"hips":118,"length":74}] |
| Womenswear chart (JSON) | textarea | [{"size":"S","chest":91,"waist":77,"hips":97,"length":62},{"size":"M","chest":96,"waist":82,"hips":102,"length":64},{"size":"L","chest":102,"waist":88,"hips":108,"length":66}] |
Screens
On desktop and phone
Every image is a capture of the live demo above, unedited. Demo store, products and photography are examples (photos: Unsplash and Pexels).
Questions about Fitting
How accurate is it?
As accurate as your size chart. It estimates measurements from height, weight and shape, then compares them with your garment measurements.
Is customer data stored?
Only in the shopper's own browser.
More from the house
