How to Add a Size Chart with Metafields in Shopify (Per-Product Charts)

1. Open Shopify Admin. Go to Settings → Custom data → Products.
2. Click "Add definition".
3. Name: "Size chart"
4. Namespace and key: Click "Edit". Set namespace to sizing, key to chart. Final identifier: sizing.chart.
5. Type: Choose Rich text (lets you write the chart with formatting in the product editor). Alternative: Reference → Page (lets you point to a Shopify Page; lets multiple products share one chart).
6. Save. The metafield is now available on every product.

Open any product in your admin. Scroll to the bottom — you'll see the new "Size chart" field.

Repeat for each product. For Page reference, you'll typically have 3–10 chart Pages total — one per product category — and each product points to its category's chart.

Edit your theme's product.liquid or product-template.liquid. Add this near where you want the size chart button to appear (near the variant picker):

{% if product.metafields.sizing.chart != blank %}
  <button type="button" class="size-chart-btn" onclick="document.getElementById('size-chart-modal').style.display='flex'">
    Size chart
  </button>

  <div id="size-chart-modal" class="size-chart-overlay" onclick="if(event.target===this)this.style.display='none'">
    <div class="size-chart-content">
      <button class="size-chart-close" onclick="document.getElementById('size-chart-modal').style.display='none'">&times;</button>
      <h2>Size Chart</h2>
      <div class="size-chart-body">
        {{ product.metafields.sizing.chart | metafield_tag }}
      </div>
    </div>
  </div>
{% endif %}

The Liquid filter | metafield_tag renders rich text properly. If you used the Page reference type instead:

{% assign chart_page = product.metafields.sizing.chart.value %}
{% if chart_page %}
  <button type="button" class="size-chart-btn" onclick="document.getElementById('size-chart-modal').style.display='flex'">
    Size chart
  </button>

  <div id="size-chart-modal" class="size-chart-overlay" onclick="if(event.target===this)this.style.display='none'">
    <div class="size-chart-content">
      <button class="size-chart-close" onclick="document.getElementById('size-chart-modal').style.display='none'">&times;</button>
      <h2>{{ chart_page.title }}</h2>
      <div class="size-chart-body">
        {{ chart_page.content }}
      </div>
    </div>
  </div>
{% endif %}

Add this CSS to your theme stylesheet (theme.css.liquid or base.css):

.size-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  margin: 8px 0;
}
.size-chart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.size-chart-content {
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.size-chart-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}
.size-chart-body table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.size-chart-body th, .size-chart-body td { padding: 8px 12px; border: 1px solid #eee; text-align: left; }
.size-chart-body th { background: #f7f7f7; }
@media (max-width: 600px) { .size-chart-content { padding: 20px; } }

If you have 50+ products and want to assign the same chart to many of them at once:

1. Filter products in Admin by collection (e.g., "Tops").
2. Select all filtered products.
3. Click "Bulk edit".
4. Add the metafield as an editable column.
5. Set the value once and bulk-apply across the selection.

This works best with Page reference metafields — you set every product in the "Tops" collection to point to the same "Tops Size Chart" Page.

Tailor Size Guide manages all of the above through its dashboard:

Both approaches use the same underlying metafield system, so you can start with theme code and migrate to the app later (or vice versa).

If you have a developer and 50+ products with 5+ chart types: go theme code + metafields. If you don't have a developer or you want to ship today: install Tailor Size Guide and assign charts in the dashboard. Both produce the same customer experience.

For the simpler one-chart-for-all approach, see how to add a size chart popup to Shopify. For the broader Shopify product-page sizing strategy, see how to add a size chart to a Shopify product page.