The Storefront Experience
This page describes the shopper’s side of Qivra Size Chart — useful for deciding your Appearance settings and for training support staff.
Opening the chart
Section titled “Opening the chart”Depending on your trigger setting, shoppers find the chart via a link/button next to the size label, under the size options, in a page corner, or as an expandable row. The default label is Size guide.
The chart opens as a popup dialog — closable with Esc or the ✕ — with the chart name as its title.
Inside the popup
Section titled “Inside the popup”| Element | Behaviour |
|---|---|
| Measurement basis | ”Measurements of your body” or “Measurements of the item, laid flat” — always stated, never hidden |
| Metric / Imperial switch | Toggles every measurable column at once; no page reload |
| Size-system pills | US / UK / EU / JP / Alpha — whichever systems the chart carries |
| The table | A real HTML table; the size column stays pinned while wide tables scroll sideways on mobile |
| Fit scale | A runs small → true to size → runs large indicator (when enabled) |
| How-to-measure content | Images and text blocks from the chart (e.g. tape-measure photos) |
The table is rendered with the page — not fetched after — so it appears instantly with no layout shift. Unit and system switching happen without a server round-trip.
Hover a size
Section titled “Hover a size”With the hover feature on, shoppers hovering (or tapping) a size option like M instantly see the M row’s measurements — no need to open the chart at all. The data comes from the page; nothing extra loads.
Find my size
Section titled “Find my size”With the recommender enabled, the popup’s first tab is Calculate my size:
- The shopper enters height & weight — or switches to exact measurements (bust/waist/hip).
- The result shows the recommended size, the reason (“bust 88 falls in M (86–91)”), and a fit verdict for every size.
- If the product’s variants match the recommended label, a Select size M button picks that size in the theme’s own variant picker. The shopper still reviews and adds to cart themselves.
Numbers are processed in the shopper’s browser. Nothing identifying is collected — no name, email, or account needed.
Performance notes
Section titled “Performance notes”- The chart table ships inside the page — zero additional requests to show it.
- The recommender script loads lazily — only when a shopper actually taps Find my size.
- Everything respects the theme editor’s design mode (no popups while you edit the theme).