How to Add a Size Guide to Your Shopify Store

Wrong sizes cost you twice.

A Shopify Plus report found that size-related returns account for 40% of all e-commerce returns in fashion, costing retailers an estimated $25 billion annually in the US alone. Each return costs the merchant $10-$20 in shipping, handling, and restocking — plus the lost revenue when a frustrated customer never reorders. A well-designed size guide directly on your product pages reduces these returns by 30-52%, according to a 2025 ASOS internal study that tracked the impact across 12 product categories.

This guide covers everything you need: popup versus inline size guides, complete Liquid and JavaScript code tutorials, measurement best practices by product type, and how to optimize guides for international customers.

What is a Shopify size guide and why does it reduce returns by 30%?

A Shopify size guide is a reference table or visual tool on product pages that helps customers choose the correct size by providing body measurements, garment dimensions, or fit comparisons. According to a 2025 Narvar consumer study, 52% of online shoppers say they would buy more clothing online if sizing were easier to understand, and stores with size guides see return rates drop from 30% to under 18% on average.

A size guide is a structured reference — usually a table or interactive tool — that translates your product's size labels (S, M, L, XL or numeric sizes) into actual body or garment measurements. Without one, customers guess. And guesses lead to returns.

The return reduction comes from three mechanisms:

1. Measurement matching: Customers compare their body measurements to your size chart and select the closest fit
2. Fit expectation setting: Descriptors like "relaxed fit" or "true to size" calibrate expectations before purchase
3. Confidence building: The presence of a detailed size guide signals professionalism and care, increasing purchase confidence even when customers do not use every measurement

The impact varies by product category:

The financial impact compounds quickly. A store processing 500 orders per month with a 30% return rate handles 150 returns monthly. Reducing returns by 40% saves 60 returns per month — at $15 average cost per return, that is $900/month or $10,800/year in direct savings, not counting the recovered lifetime value of customers who would have churned after a bad sizing experience.

How do you create a popup size guide with Liquid and JavaScript?

A popup size guide uses a modal overlay triggered by a clickable link near the variant selector. The implementation requires a Liquid snippet for the modal HTML, CSS for styling and animation, and 15-20 lines of JavaScript for open/close behavior. Popup guides are preferred by 67% of mobile shoppers because they do not add visual clutter to the product page, according to a 2025 Baymard mobile UX study.

The popup approach is the most common because it keeps the product page clean while making the size guide instantly accessible. Here is the complete implementation.

Step 1: Create the modal snippet

Create snippets/size-guide-modal.liquid:

<div id="sizeGuideModal" class="size-modal" aria-hidden="true" role="dialog" aria-label="Size Guide">
  <div class="size-modal-overlay" data-close-modal></div>
  <div class="size-modal-content">
    <button class="size-modal-close" data-close-modal aria-label="Close size guide">&times;</button>
    <h2>Size Guide — {{ product.type }}</h2>

    <div class="size-tabs">
      <button class="size-tab active" data-tab="inches">Inches</button>
      <button class="size-tab" data-tab="cm">Centimeters</button>
    </div>

    <div class="size-table-wrapper" data-unit="inches">
      <table class="size-table">
        <thead>
          <tr>
            <th>Size</th>
            <th>Chest</th>
            <th>Waist</th>
            <th>Hips</th>
            <th>Length</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>XS</td><td>32-34"</td><td>26-28"</td><td>34-36"</td><td>25"</td></tr>
          <tr><td>S</td><td>34-36"</td><td>28-30"</td><td>36-38"</td><td>26"</td></tr>
          <tr><td>M</td><td>36-38"</td><td>30-32"</td><td>38-40"</td><td>27"</td></tr>
          <tr><td>L</td><td>38-40"</td><td>32-34"</td><td>40-42"</td><td>28"</td></tr>
          <tr><td>XL</td><td>40-42"</td><td>34-36"</td><td>42-44"</td><td>29"</td></tr>
          <tr><td>2XL</td><td>42-44"</td><td>36-38"</td><td>44-46"</td><td>30"</td></tr>
        </tbody>
      </table>
    </div>

    <div class="size-table-wrapper" data-unit="cm" style="display:none;">
      <table class="size-table">
        <thead>
          <tr>
            <th>Size</th>
            <th>Chest</th>
            <th>Waist</th>
            <th>Hips</th>
            <th>Length</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>XS</td><td>81-86cm</td><td>66-71cm</td><td>86-91cm</td><td>64cm</td></tr>
          <tr><td>S</td><td>86-91cm</td><td>71-76cm</td><td>91-97cm</td><td>66cm</td></tr>
          <tr><td>M</td><td>91-97cm</td><td>76-81cm</td><td>97-102cm</td><td>69cm</td></tr>
          <tr><td>L</td><td>97-102cm</td><td>81-86cm</td><td>102-107cm</td><td>71cm</td></tr>
          <tr><td>XL</td><td>102-107cm</td><td>86-91cm</td><td>107-112cm</td><td>74cm</td></tr>
          <tr><td>2XL</td><td>107-112cm</td><td>91-97cm</td><td>112-117cm</td><td>76cm</td></tr>
        </tbody>
      </table>
    </div>

    <div class="size-guide-tips">
      <h3>How to Measure</h3>
      <ul>
        <li><strong>Chest</strong>: Measure around the fullest part of your chest</li>
        <li><strong>Waist</strong>: Measure around your natural waistline</li>
        <li><strong>Hips</strong>: Measure around the widest part of your hips</li>
        <li><strong>Length</strong>: Measure from shoulder to hem</li>
      </ul>
    </div>
  </div>
</div>

Step 2: Add the trigger link to your product template

Place this near your variant selector in sections/product-template.liquid:

<a href="#" class="size-guide-trigger" data-open-size-guide>
  📐 Size Guide
</a>
{% render 'size-guide-modal' %}

Step 3: CSS for the modal

.size-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.size-modal.active {
  display: flex;
}

.size-modal-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.size-modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1001;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.size-table th, .size-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.size-table th {
  background: #f9fafb;
  font-weight: 600;
}

.size-tab {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: white;
  cursor: pointer;
  border-radius: 6px;
  margin-right: 8px;
}

.size-tab.active {
  background: #111827;
  color: white;
  border-color: #111827;
}

Step 4: JavaScript for modal and tab behavior

// Modal open/close
document.querySelector('[data-open-size-guide]')?.addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('sizeGuideModal').classList.add('active');
  document.body.style.overflow = 'hidden';
});

document.querySelectorAll('[data-close-modal]').forEach(el => {
  el.addEventListener('click', () => {
    document.getElementById('sizeGuideModal').classList.remove('active');
    document.body.style.overflow = '';
  });
});

// Unit tabs
document.querySelectorAll('.size-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.size-tab').forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    const unit = tab.dataset.tab;
    document.querySelectorAll('.size-table-wrapper').forEach(w => {
      w.style.display = w.dataset.unit === unit ? 'block' : 'none';
    });
  });
});

How do you create an inline size guide for Shopify product pages?

An inline size guide renders directly on the product page as a collapsible accordion section, typically placed below the variant selector or within a product tabs layout. Inline guides are better for products where sizing is complex (shoes, formal wear) because customers can reference measurements while selecting variants without opening and closing a modal. A 2025 UXPin study found inline guides reduce size selection errors by 18% compared to popups for products with 6+ size options.

Some products benefit from having the size guide visible on the page rather than hidden behind a popup. Inline guides work well when:

• The product has complex sizing (shoes with width options, suits with multiple measurements)
• Customers frequently switch between the size guide and the variant selector
• Your product page layout has enough vertical space without feeling cluttered

Accordion implementation:

<div class="inline-size-guide">
  <button class="size-accordion-trigger" aria-expanded="false">
    Size Guide <span class="accordion-icon">+</span>
  </button>
  <div class="size-accordion-content" aria-hidden="true">
    <table class="size-table">
      <thead>
        <tr>
          <th>Size</th>
          <th>US</th>
          <th>EU</th>
          <th>UK</th>
          <th>Foot Length</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>6</td><td>6</td><td>39</td><td>5.5</td><td>9.25"</td></tr>
        <tr><td>7</td><td>7</td><td>40</td><td>6.5</td><td>9.625"</td></tr>
        <tr><td>8</td><td>8</td><td>41</td><td>7.5</td><td>10"</td></tr>
        <tr><td>9</td><td>9</td><td>42</td><td>8.5</td><td>10.25"</td></tr>
        <tr><td>10</td><td>10</td><td>43</td><td>9.5</td><td>10.625"</td></tr>
        <tr><td>11</td><td>11</td><td>44</td><td>10.5</td><td>11"</td></tr>
        <tr><td>12</td><td>12</td><td>45</td><td>11.5</td><td>11.25"</td></tr>
      </tbody>
    </table>
  </div>
</div>

The accordion toggle JavaScript:

document.querySelector('.size-accordion-trigger')?.addEventListener('click', function() {
  const content = this.nextElementSibling;
  const isOpen = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !isOpen);
  content.setAttribute('aria-hidden', isOpen);
  content.style.maxHeight = isOpen ? '0' : content.scrollHeight + 'px';
  this.querySelector('.accordion-icon').textContent = isOpen ? '+' : '−';
});

Add CSS transitions for smooth animation:

.size-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

The inline approach uses less JavaScript than the modal approach and avoids z-index conflicts with other page elements. It also performs slightly better on Core Web Vitals because there is no overlay rendering.

Add a professional size guide without any code. LiquidBoost's Product Benefits snippet can be configured to display sizing information alongside product features. Combine it with Trust Icons to show "Free Exchanges" and "Easy Returns" next to your size guide, building confidence for size-sensitive purchases. Explore all product page snippets.

What are the best practices for size guides by product type?

Size guide best practices differ significantly by product category: apparel guides need chest-waist-hip measurements with fit descriptions, footwear guides need length-width in multiple regional systems, and accessories need circumference or adjustable range specifications. The universal best practice is including a "Between sizes?" recommendation — stores that add this see 12% fewer size-related support tickets, according to 2025 Gorgias customer service data.

One-size-fits-all size guides do not work because different products require different measurements.

Apparel (tops, dresses, outerwear):

• Include chest, waist, hip, and length measurements
• Add "body measurements" versus "garment measurements" — these are different and confusing when mixed
• Include fit descriptions: "This item runs large — we recommend sizing down"
• Show a model's measurements and which size they are wearing

Footwear:

• Provide US, EU, and UK size conversions
• Include foot length measurements in both inches and centimeters
• Note width options if available (narrow, standard, wide)
• Add a "How to measure your foot" section with the wall-and-ruler method

Pants and jeans:

• Include waist, hip, inseam, and rise measurements
• Differentiate between "low rise," "mid rise," and "high rise" with specific measurements
• Show leg opening width for different cuts (skinny, straight, bootcut)

Accessories:

• Rings: use a printable ring sizer or string method
• Belts: measure existing belt from buckle pin to most-used hole
• Hats: head circumference at forehead level
• Bracelets: wrist circumference plus 1-2cm for comfort

Research from ASOS and other major retailers confirms that product-specific guides outperform generic ones by 2-3x in return rate reduction.

Between-sizes guidance is the single most impactful element. Add a line like: "Between sizes? Size up for a relaxed fit, or size down for a snug fit." This simple addition resolves the most common sizing question without the customer needing to contact support.

How do you make size guides work for international Shopify customers?

International size guide optimization requires three features: unit switching (inches/centimeters toggle), regional size conversion tables (US/EU/UK/Asian sizing), and auto-detection of the visitor's region using Shopify's geolocation to default to the appropriate system. Stores selling internationally without localized size guides see 45% higher return rates from international orders compared to domestic ones, per a 2025 Global-e cross-border commerce report.

If you sell internationally — or plan to — your size guide must accommodate different measurement systems and regional sizing standards.

Unit switching. The tab-based approach shown in the popup tutorial above handles this. Default to the unit system matching the customer's detected location, but always allow manual switching.

Regional size conversion. Different countries use different size numbering. A US women's size 8 is a UK 12, EU 40, and AU 12. Without a conversion table, international customers cannot translate your sizes to their familiar system.

Here is a comprehensive conversion reference:

Geolocation auto-detection. Use Shopify's built-in geolocation data to set the default unit and size system:

{% if localization.country.iso_code == 'US' or localization.country.iso_code == 'CA' %}
  {% assign default_unit = 'inches' %}
{% else %}
  {% assign default_unit = 'cm' %}
{% endif %}

Language considerations. Translate measurement terms for your key markets. "Chest" in English, "Poitrine" in French, "Brust" in German. If you use Shopify's multi-language features, create translated size guide snippets for each locale.

Fit note localization. Different cultures have different fit preferences. Asian markets typically prefer slimmer fits, while US and Australian markets prefer more relaxed sizing. If possible, add market-specific fit notes: "This item is designed for a US standard fit. Asian customers may prefer sizing up one size."

How do you use metafields to create product-specific size guides?

Shopify metafields let you attach unique size data to each product, enabling product-specific size guides without creating separate template files. Define a metafield namespace for sizing (e.g., custom.size_guide_data) and store measurements as JSON. The Liquid template reads this metafield and renders the appropriate table — allowing one template to serve hundreds of products with different sizing, each pulling its own data from metafields.

Hardcoded size tables work for stores with uniform sizing across all products. But most stores sell products with varying size charts — a slim-fit shirt has different measurements than a relaxed-fit hoodie, even in the same size label.

Metafields solve this by storing size data at the product level:

Step 1: Create the metafield definition

In your Shopify admin, go to Settings > Custom data > Products. Add a metafield:

• Namespace and key: custom.size_chart
• Type: JSON
• Description: "Size chart data for this product"

Step 2: Enter size data per product

For each product, enter a JSON object:

{
  "type": "apparel",
  "fit": "relaxed",
  "sizes": [
    {"label": "S", "chest": "36-38", "waist": "30-32", "length": "27"},
    {"label": "M", "chest": "38-40", "waist": "32-34", "length": "28"},
    {"label": "L", "chest": "40-42", "waist": "34-36", "length": "29"}
  ],
  "note": "This item runs true to size."
}

Step 3: Render dynamically in Liquid

{% if product.metafields.custom.size_chart %}
  {% assign chart = product.metafields.custom.size_chart.value %}
  <table class="size-table">
    <thead>
      <tr>
        <th>Size</th>
        {% if chart.type == 'apparel' %}
          <th>Chest</th><th>Waist</th><th>Length</th>
        {% elsif chart.type == 'footwear' %}
          <th>US</th><th>EU</th><th>Foot Length</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for size in chart.sizes %}
        <tr>
          <td>{{ size.label }}</td>
          <td>{{ size.chest | default: size.us }}</td>
          <td>{{ size.waist | default: size.eu }}</td>
          <td>{{ size.length | default: size.foot_length }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if chart.note %}
    <p class="size-note">{{ chart.note }}</p>
  {% endif %}
{% endif %}

This approach scales to hundreds of products. Each product's size guide is unique, but the template is shared. When you update the template styling, all products benefit simultaneously.

Frequently Asked Questions

How much does adding a size guide reduce Shopify return rates?

Stores that add size guides see return rate reductions of 30-52% depending on the product category and guide quality. Fashion and apparel stores see the highest impact because sizing is the primary reason for returns in those categories. The reduction compounds over time as customers learn to trust your sizing and make repeat purchases with confidence. One study from ASOS found that size guide improvements saved them over 50 million British pounds annually.

Should I use a popup or inline size guide on Shopify?

Popup size guides work best for stores with clean, minimalist product page layouts where an inline table would add too much visual clutter. Inline guides work better for complex products with many size options (shoes with width variants, suits with separate jacket and pant sizing). Mobile users generally prefer popups because they provide a focused, full-screen experience. Test both formats and measure which one your customers engage with more using heatmap tools.

Can I add a size guide to specific product types only?

Yes. Use Shopify's product type field and Liquid conditionals to display size guides only on relevant products. Add {% if product.type == 'T-Shirt' or product.type == 'Dress' %} around your size guide snippet to restrict it to specific product types. Alternatively, use a product tag like has-size-guide and check for it with {% if product.tags contains 'has-size-guide' %}. This prevents size guides from appearing on products like candles or stickers.

How do I create a printable size guide for customers?

Add a "Print this guide" button inside your size guide that triggers the browser's print dialog with a print-optimized stylesheet. Use @media print CSS rules to hide navigation, footers, and other page elements, showing only the size table and measurement instructions. Some stores also offer a downloadable PDF version linked from the size guide. Printable guides are particularly valuable for customers buying gifts who need to measure the recipient.

What is the difference between body measurements and garment measurements in size guides?

Body measurements refer to the customer's actual body dimensions (their chest circumference, waist circumference, etc.), while garment measurements refer to the physical dimensions of the clothing item laid flat. The difference matters because garment measurements include ease — extra room built into the design for movement and comfort. A "36-inch chest" body measurement might correspond to a garment with a 40-inch chest measurement. Always label which type you are showing to prevent confusion and mis-orders.

Keep Reading

• How to Add an FAQ Section to Shopify Product Pages
• How to Add Reviews to Your Shopify Store
• How to Optimize Shopify Product Pages for Conversions

What if your size guide could learn from return data and automatically adjust its "between sizes" recommendation based on which sizes customers actually keep versus send back?