How to Add a Size Guide to Your Shopify Store

Size-related returns are the single most expensive operational problem in fashion ecommerce. In the UK, approximately 30-40% of all online clothing returns are due to sizing issues — wrong size ordered, inconsistent sizing between brands, or uncertainty about fit. Each return costs an average of £10-15 to process when you factor in shipping, inspection, restocking, and potential markdown.

A well-implemented size guide directly addresses this problem. It gives customers the information they need to choose the right size the first time, reducing returns and increasing purchase confidence. Stores that implement comprehensive size guides typically see a 15-25% reduction in size-related returns and a measurable improvement in conversion rate on sized products.

This guide covers three methods for adding size guides to your Shopify store, from the simplest approach to the most sophisticated. We include complete code examples so you can implement them yourself, or hand them to your Shopify developer for integration.

Why size guides matter for ecommerce

The business case for size guides extends beyond return reduction. Here are the five ways a good size guide impacts your bottom line:

• Reduced returns. Fewer size-related returns means lower operational costs and higher net revenue per order.
• Increased conversion. Customers who can verify their size are more likely to complete the purchase. Size uncertainty is a significant conversion barrier.
• Higher customer satisfaction. Receiving the right size first time improves the customer experience and drives repeat purchases.
• Lower customer service load. "What size should I order?" is one of the most common pre-purchase questions. A good size guide answers it proactively.
• Better reviews. Products that fit as expected receive better reviews. Products returned for sizing issues often receive negative reviews that damage conversion for future customers.

For fashion brands on Shopify, size guides are not optional — they are a commercial imperative.

Method 1: Dedicated size guide page

The simplest approach is creating a standalone page for your size guide and linking to it from product pages. This works well for stores with a single product category and consistent sizing.

Step-by-step setup

1. Go to Online Store > Pages > Add page
2. Title it "Size Guide" (this creates the URL /pages/size-guide)
3. Add your size chart as an HTML table
4. Include measuring instructions with illustrations
5. Save and publish the page

Size chart HTML template

<div class="size-guide">
  <h2>Women's Sizing</h2>
  <p>All measurements in centimetres. If between sizes, we recommend sizing up.</p>

  <table class="size-chart">
    <thead>
      <tr>
        <th>UK Size</th>
        <th>EU Size</th>
        <th>US Size</th>
        <th>Bust (cm)</th>
        <th>Waist (cm)</th>
        <th>Hips (cm)</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>6</td><td>34</td><td>2</td><td>78-80</td><td>60-62</td><td>84-86</td></tr>
      <tr><td>8</td><td>36</td><td>4</td><td>82-84</td><td>64-66</td><td>88-90</td></tr>
      <tr><td>10</td><td>38</td><td>6</td><td>86-88</td><td>68-70</td><td>92-94</td></tr>
      <tr><td>12</td><td>40</td><td>8</td><td>90-92</td><td>72-74</td><td>96-98</td></tr>
      <tr><td>14</td><td>42</td><td>10</td><td>96-98</td><td>78-80</td><td>102-104</td></tr>
      <tr><td>16</td><td>44</td><td>12</td><td>102-104</td><td>84-86</td><td>108-110</td></tr>
    </tbody>
  </table>

  <h3>How to measure</h3>
  <ul>
    <li><strong>Bust:</strong> Measure around the fullest part of your bust.</li>
    <li><strong>Waist:</strong> Measure around your natural waistline.</li>
    <li><strong>Hips:</strong> Measure around the widest part of your hips.</li>
  </ul>
</div>

Linking from product pages

Add a link to your product template that opens the size guide. The simplest way is adding it near the variant selectors:

<a href="/pages/size-guide"
   class="size-guide-link"
   target="_blank"
   rel="noopener">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2">
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
    <circle cx="12" cy="10" r="3"/>
  </svg>
  Size guide
</a>

Method 2: Product page modal popup

A modal popup keeps customers on the product page while viewing size information. This is the approach we recommend for most fashion brands because it reduces friction — the customer does not navigate away from their purchase context.

Complete modal implementation

<!-- Size guide trigger button -->
<button class="size-guide-trigger"
  type="button"
  aria-haspopup="dialog"
  aria-label="Open size guide">
  Size guide
</button>

<!-- Size guide modal -->
<div class="size-guide-modal" id="sizeGuideModal"
  role="dialog" aria-modal="true" aria-label="Size guide"
  hidden>
  <div class="size-guide-modal__overlay"></div>
  <div class="size-guide-modal__content">
    <button class="size-guide-modal__close"
      aria-label="Close size guide">&times;</button>
    <h2>Size Guide</h2>
    <!-- Your size chart content here -->
  </div>
</div>

CSS for the modal

.size-guide-trigger {
  background: none;
  border: none;
  color: var(--color-base-accent-1, #2D5A27);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.size-guide-modal[hidden] { display: none; }

.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-guide-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.size-guide-modal__content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.size-guide-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px;
}

JavaScript for the modal

(function() {
  var trigger = document.querySelector('.size-guide-trigger');
  var modal = document.getElementById('sizeGuideModal');
  var close = modal.querySelector('.size-guide-modal__close');
  var overlay = modal.querySelector('.size-guide-modal__overlay');

  function openModal() {
    modal.hidden = false;
    document.body.style.overflow = 'hidden';
    close.focus();
  }

  function closeModal() {
    modal.hidden = true;
    document.body.style.overflow = '';
    trigger.focus();
  }

  trigger.addEventListener('click', openModal);
  close.addEventListener('click', closeModal);
  overlay.addEventListener('click', closeModal);

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !modal.hidden) closeModal();
  });
})();

Method 3: Metafields for product-specific guides

If you sell multiple product categories with different sizing (e.g., tops, trousers, shoes, accessories), metafields let you assign specific size guides to individual products or product types.

Setting up the metafield

1. Go to Settings > Custom data > Products
2. Click Add definition
3. Name: "Size Guide"
4. Type: choose either Rich text (for inline content) or Page reference (to link to a size guide page)
5. Save

Displaying the metafield in your theme

{% comment %} In your product template {% endcomment %}
{% if product.metafields.custom.size_guide %}
  <div class="product-size-guide">
    <button class="size-guide-trigger" type="button">
      Size guide
    </button>
    <div class="size-guide-content" hidden>
      {{ product.metafields.custom.size_guide | metafield_tag }}
    </div>
  </div>
{% endif %}

This approach is the most flexible because it lets you have entirely different size charts for different product types. A shoe product shows a shoe size chart. A dress shows a dress size chart. No one-size-fits-all compromises.

What to include in your size guide

A size guide is only useful if it contains the right information presented clearly. Here is what to include:

• Size chart table. With columns for UK, EU, and US sizing. Include both centimetre and inch measurements.
• Measuring instructions. Clear, illustrated instructions for how to take each measurement. Bullet points, not paragraphs.
• Fit notes. "This style runs small — we recommend sizing up" or "Relaxed fit — true to size". These notes are invaluable for products with non-standard fits.
• Model information. "Model is 5'8" and wears size 10" gives customers a real-world reference point.
• Garment measurements. In addition to body measurements, include actual garment dimensions (chest width, length, sleeve length). Some customers prefer to compare against a garment they already own.

Size guide design best practices

• Use alternating row colours in your table for readability
• Highlight the customer's most likely size if you have their data from previous purchases
• Use responsive tables that scroll horizontally on mobile rather than squashing content
• Include visual diagrams showing where measurements are taken
• Keep the language simple and direct — no jargon

/* Responsive size chart table */
.size-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.size-chart th {
  background: #f5f5f5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.size-chart td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.size-chart tr:nth-child(even) td {
  background: #fafafa;
}

/* Mobile: horizontal scroll */
@media screen and (max-width: 749px) {
  .size-chart-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .size-chart {
    min-width: 500px;
  }
}

Mobile-first considerations

Over 70% of fashion ecommerce browsing happens on mobile. Your size guide must work flawlessly on small screens. Here are the key considerations:

• Tables must scroll horizontally. Do not try to squeeze a multi-column table into a 375px viewport. Wrap the table in a horizontally scrollable container.
• Modal must be full-screen on mobile. A small centred modal does not work on phones. Make it full-screen with a clear close button.
• Touch targets must be large. Buttons and links need a minimum of 44x44px touch area on mobile.
• Text must be readable without zooming. Use at least 14px font size in the size chart.

International sizing conversions

If you sell internationally, include sizing conversions for your key markets. UK, EU, US, and Australian sizes all differ, and customers in each market expect to see their local sizing system first. For international selling setup, see our custom theme development guide.

Fit finder tools and AI sizing

Beyond static size charts, interactive fit finder tools use a questionnaire approach to recommend a size based on body measurements, fit preferences, and previous purchases. These tools can reduce size-related returns by an additional 10-15% compared to static charts alone.

Several third-party tools integrate with Shopify, using algorithms trained on return data and body measurement databases to provide personalised sizing recommendations. They are particularly effective for brands with proprietary sizing that does not map neatly to standard UK sizes.

Reducing returns with measurement instructions

Clear measurement instructions are the most undervalued part of a size guide. Many customers know their "dress size" but not their actual body measurements. Providing simple, visual measurement instructions bridges this gap.

Essential measurement instructions

1. Use a soft tape measure, not a metal one
2. Measure over light clothing, not over thick layers
3. Stand naturally — do not suck in or puff out
4. Keep the tape level all the way around
5. If between sizes, order the larger size

Common size guide mistakes

1. Hiding the size guide

If customers cannot find your size guide, it might as well not exist. Place the link directly next to the variant selector — the exact moment the customer is thinking about size.

2. Using only generic sizing

Generic UK/EU/US size labels are not enough. Include actual measurements. A "size 12" varies enormously between brands. Measurements are objective and brand-agnostic.

3. Not updating when products change

If you introduce a new fit or change suppliers, update your size guide immediately. Outdated size information is worse than no size information.

4. Forgetting menswear or unisex

If you sell across genders, provide separate size charts for each. Unisex products should show measurements for both men and women.

5. Image-only size charts

Size charts as images are inaccessible (screen readers cannot read them), do not render well on all devices, and cannot be updated easily. Always use HTML tables with proper semantic markup.

A size guide is not a nice-to-have. For any Shopify store selling sized products, it is as essential as product photography. Every return prevented is profit preserved.

Andrew Simpson, Founder

---

Adding a size guide to your Shopify store is one of the most straightforward improvements you can make to reduce returns and increase customer confidence. Start with Method 1 if you need something today, then upgrade to Method 2 or 3 as your store grows.

If you need help implementing size guides as part of a broader Shopify development or web design project, get in touch. We build fashion ecommerce stores that convert.