Shopify Size Guide Implementation: UX, CRO & Returns

If you sell apparel, footwear, or anything with fit, your size guide is a top-three PDP element. Done well, it lifts add-to-cart rate and cuts return rates by 5–15%. Done badly (or via a generic app), it slows the page and gets ignored.

Here's how we ship size guides on Shopify and Shopify Plus.

The pattern

• Trigger: a "Size guide" link inline with the variant picker. Not buried in tabs.
• Surface: a side drawer or modal — not a new page.
• Content: brand-specific tables, a body-measurement guide, and a fit recommendation when possible.

How to build it (no app required)

1. Create a size-guide metaobject (or template suffix) so each product type can have its own table.
2. Render the trigger in the product form section, opens a drawer powered by Dawn-style native dialog.
3. Pull the right table by product type, collection, or metafield reference.

{%- liquid
  assign guide = product.metafields.custom.size_guide.value
-%}
{%- if guide -%}
  <button type="button" data-size-guide-trigger>Size guide</button>
  <dialog id="size-guide">{{ guide.body | metafield_tag }}</dialog>
{%- endif -%}

What moves the metric

• Show measurements in both cm and inches. Detect locale, default smartly.
• Photo of the body part being measured. A small visual cuts confusion in half.
• Fit recommender based on user inputs (height, weight, usual size). Even a simple rule-based one outperforms no recommender.
• "How this product fits" copy from your reviews — pulled automatically if your reviews provider supports it.

What to avoid

• Generic third-party apps that load 200kb of JS for a table.
• Size guides on a separate page (kills the conversion path).
• One global guide for all products when fit varies by line.

---

We build PDP and CRO improvements on Shopify and Shopify Plus. Get a quote.