> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/free-gift-tiers/size-calculator.md). # Size Calculator Wrong sizes are the #1 cause of apparel returns. Reign's **Size guide block** fights back with a calculator: the shopper enters height and weight (and optionally gender), the theme factors in the garment's **fit type**, and recommends a size — with a one-tap **"ADD SIZE M TO CART"** button. It even remembers the shopper's size (in their browser via localStorage) and shows a **"Your size: M"** badge on their next visit. ## Adding it It ships enabled on the default product template, between Price and the Variant picker. To add or move it: product template → **Product information** → the **Size guide** block. ⚠️ The calculator works with standard letter sizing (S/M/L/XL-style variant options). Test it on your products before launch. ## Trigger settings | Setting | What it does | Default | | -------------------------------------------- | ----------------------------------------------------- | ----------------------------- | | Trigger type | **Button** ("FIND MY SIZE") or a small ruler **Icon** | Button | | Button text / Icon tooltip text | Labels | "FIND MY SIZE" / "Size guide" | | Desktop width / alignment / mobile alignment | Placement | 100% / Center / Center | **Button style** group: background/text/border colors, border thickness (0), radius (50 — pill), font size/weight/letter-spacing, padding, hover opacity. **Icon style**: color + size. ## Fit types — the important part The recommendation shifts depending on how the garment fits: | Setting | What it does | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Default fit type | True to Size / Slim Fit / Oversized / Skinny — used when a product isn't assigned to a list below | | Products — Slim Fit / Skinny / Oversized / True to Size | Assign specific products to each fit. First match wins, checked in this order: **Slim Fit → Skinny → Oversized → True to Size** | 👉 Set the default to your brand's most common cut, then list the exceptions. An oversized-cut hoodie flagged correctly will recommend a size down from the raw measurement result. ## Inputs & results * **Show gender selector** (on) — adds a gender toggle to the calculation * **Input labels** — Height, Weight, and the "CALCULATE MY SIZE" button text * **Result styling** — accent color, big size letter font size (48), message font size ### Message templates Every result message is editable, with placeholders in `{curly braces}`: | Template | Default | Placeholders | | --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------ | | Message | "Based on your measurements and the {fit\_type} of this piece, we recommend a size {size}" | `{fit_type}`, `{size}` | | Add to cart text | "ADD SIZE {size} TO CART" | `{size}` | | Sold out button | "SIZE {size} — SOLD OUT" | `{size}` | | Headline when no close size | "NOT OFFERED IN YOUR SIZE" | — | | No viable match message | Explains the estimate ({ideal\_size}) isn't close to this product's size run ({sizes\_list}) | `{ideal_size}`, `{sizes_list}` | | Recommended size sold out | "Your recommended size is {size}, but it's currently sold out." | `{size}` | Note the honest behavior: if the shopper's estimated size isn't in the product's size run, the calculator says so rather than pushing a bad substitute — that's deliberate return-prevention. ## The saved-size badge Once a shopper calculates, their size is stored in the browser: | Setting | What it does | Default | | ------------------------------ | ----------------------------------------------------------------------------------------------- | ------------------- | | Badge text template | Shown next to the trigger on return visits | "Your size: {size}" | | Badge color / font size | Styling | #000000 / 13 | | Saved badge when no close size | Optional badge using `{ideal_size}` when this product doesn't carry their size (blank = hidden) | — | ## Modal styling Background/text colors, backdrop color + opacity (60%), max width (440), radius, padding, product image height (180), body/input typography, and **Animation speed** (Fast / Medium / Slow). 💡 **Pro tip:** The size stays saved per browser, so returning customers see "Your size: M" across all products — one of those small touches that makes a store feel like it knows you. Mention it in your drop emails: "We'll remember your size." --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/free-gift-tiers/size-calculator.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.