Add a Size & Fit Guide with Metafields

Display detailed, per-product sizing information on your product pages, including model measurements, fit type, and sizing recommendations.

Advanced Tutorial

This tutorial requires knowledge of HTML, CSS, and Shopify Liquid. May require adjustments depending on your theme.

Why Per-Product Size Guides?

Generic, store-wide size charts don't account for differences between product styles. A relaxed-fit hoodie and a slim-fit dress shirt need different guidance. Metafields let you store sizing data per product, which:

• Reduces size-related returns (one of the top reasons for apparel returns)
• Increases buyer confidence and conversion
• Lets you include model-specific details that generic charts can't

Step 1: Create the Metafields

In Metafield Studio, create the following metafields on your product:

Namespace	Key	Type	Example Value
size_guide	fit_type	Single line text	Relaxed fit
size_guide	model_info	Single line text	Model is 5'10" / 175cm, wearing size M
size_guide	size_recommendation	Single line text	Between sizes? We recommend sizing up
size_guide	chest	Single line text	S: 36" · M: 38" · L: 40" · XL: 42"
size_guide	waist	Single line text	S: 30" · M: 32" · L: 34" · XL: 36"
size_guide	length	Single line text	S: 27" · M: 28" · L: 29" · XL: 30"

Adjust the keys to match the measurements relevant to your products (inseam, shoulders, hips, etc.).

Step 2: Create a Liquid Snippet

Create size-fit-guide.liquid in Snippets:

{% assign sg = product.metafields.size_guide %}
{% if sg.fit_type or sg.model_info or sg.chest %}
<div class="size-fit-guide">
  <h3>Size & Fit</h3>

  {% if sg.fit_type %}
    <div class="size-fit-guide__fit-type">
      <strong>Fit:</strong> {{ sg.fit_type }}
    </div>
  {% endif %}

  {% if sg.model_info %}
    <div class="size-fit-guide__model-info">
      {{ sg.model_info }}
    </div>
  {% endif %}

  {% if sg.chest or sg.waist or sg.length %}
    <table class="size-fit-guide__table">
      {% if sg.chest %}
        <tr>
          <th>Chest</th>
          <td>{{ sg.chest }}</td>
        </tr>
      {% endif %}
      {% if sg.waist %}
        <tr>
          <th>Waist</th>
          <td>{{ sg.waist }}</td>
        </tr>
      {% endif %}
      {% if sg.length %}
        <tr>
          <th>Length</th>
          <td>{{ sg.length }}</td>
        </tr>
      {% endif %}
    </table>
  {% endif %}

  {% if sg.size_recommendation %}
    <div class="size-fit-guide__recommendation">
      {{ sg.size_recommendation }}
    </div>
  {% endif %}
</div>
{% endif %}

Step 3: Include in Product Template

In sections/main-product.liquid or sections/product-template.liquid, add below the variant selector or product description:

{% render "size-fit-guide" %}

Step 4: Add CSS

.size-fit-guide {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background-color: #fafafa;
}

.size-fit-guide h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.size-fit-guide__fit-type {
  margin-bottom: 8px;
  font-size: 15px;
}

.size-fit-guide__model-info {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.size-fit-guide__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.size-fit-guide__table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  width: 100px;
}

.size-fit-guide__table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e5e5;
}

.size-fit-guide__recommendation {
  margin-top: 8px;
  padding: 10px 14px;
  background-color: #fff8e1;
  border-left: 3px solid #f9a825;
  font-size: 14px;
}

Step 4: Populate in Bulk

Use the Bulk Editor to add size guide data across your catalog efficiently. You can also prepare all your sizing data in a spreadsheet and import via CSV.

Not every field is required

The snippet only renders fields that have values. You can fill in just the fit_type and model_info for simple products, and add full measurement tables only for products where sizing is more complex.