How to Add a Size Chart to Shopify Without an App

2026-09-16 · page builders

If you sell apparel, footwear, or anything with sizing, a size chart is the difference between a sale and a return. Shopify doesn't ship a native size chart field, so most merchants install an app. You don't have to. Using Shopify's built-in metafields and a small Liquid snippet, you can add a size chart to every product page for free, keep full control of the markup, and avoid another monthly subscription.

Why Add a Size Chart Without an App (and What It Saves You)

Size chart apps typically charge a recurring monthly fee, and pricing varies by plan and store volume — check current pricing before you commit. Beyond cost, apps inject their own scripts and styles into your theme, which can slow down product pages and clash with your design. They also store your chart data inside the app, so if you uninstall it, your charts disappear.

The metafield approach avoids all three problems:

No recurring cost. Metafields are a native Shopify feature included on all plans.
No third-party scripts. You add a few lines of Liquid and CSS to your own theme.
No data lock-in. Your chart content lives in your Shopify admin with your products, and it exports with your store data.
Full design control. The chart matches your theme because you write the styles.

The trade-off is a one-time setup of roughly 30–45 minutes, plus entering chart content per product (or per product type, if you use a shared metafield).

What You'll Need: Metafields, Theme Access, and a Backup

Before you start, confirm you have the following:

A Shopify plan that includes metafields. Metafields are available on all current Shopify plans, but the admin interface for creating definitions lives under Settings → Custom data (in older admin versions it may appear under Settings → Metafields). If you don't see it, your theme or plan may need an update — contact Shopify Support.
Theme access. You need permission to edit theme code. If you're a staff member, ask the store owner to grant it.
A theme backup. Go to Online Store → Themes → ⋯ → Duplicate and duplicate your live theme. Work on the copy, then publish when you're satisfied. This is the single most important step — a broken product template takes your store down.
A size chart source. Your own measurements, a supplier's chart, or a standard chart you've verified. Don't copy a competitor's numbers; measure your actual garments.

A quick note on metafield types, since this determines your workflow:

Metafield type	Best for	Editing experience
Rich text	Charts with headings, bold, and bullet points	WYSIWYG editor in admin
Multi-line text	Plain-text charts or HTML you write yourself	Plain text box
Single line text	Short notes like "Runs small — size up"	One-line field
File (image)	A size chart graphic exported from Canva or Illustrator	Image upload

For most stores, Rich text is the right choice. It renders formatted content without you writing HTML, and it handles the table markup Shopify's editor supports.

Step 1: Create a Size Chart Metafield Definition in Shopify

In Shopify admin, go to Settings → Custom data.
Click Products, then Add definition.
Name it Size chart. Shopify auto-generates the namespace and key — typically custom.size_chart. Note the key exactly; you'll need it in the Liquid code.
Set Type to Rich text (or File if you're using an image).
Under Access, enable Storefronts so the theme can read the value. Without this, your chart won't render even if you've entered content.
Optionally add a description like "Measurement chart shown on the product page" so other staff know what it's for.
Save.

If you want one chart shared across many products, create a second definition under Settings → Custom data → Product types or use a metaobject to store reusable charts. For stores with more than about 20 products in the same category, a metaobject saves significant data-entry time — you build the chart once and reference it from each product.

Step 2: Add Size Chart Content to Each Product

Go to Products and open a product.
Scroll to the Metafields section at the bottom of the product page. If you don't see it, click More actions → Show metafields, or check that your definition from Step 1 saved correctly.
Click into the Size chart field and enter your content.

For a rich text chart, enter a table with columns for size and each measurement. A typical women's tops chart looks like this:

Size	Chest (in)	Waist (in)	Length (in)
XS	32–33	25–26	24
S	34–35	27–28	25
M	36–37	29–30	26
L	38–40	31–33	27
XL	41–43	34–36	28

Add a sentence above the table with measuring instructions — for example, "Measure around the fullest part of your chest, keeping the tape level." That single line reduces sizing-related support emails more than any app feature.

Save the product. Repeat for each product that needs a chart.

If you're using an image metafield instead, upload your chart image here. Keep it under 200 KB and export at 2x resolution so it stays sharp on retina displays.

Step 3: Insert the Size Chart Code Into Your Product Template

Go to Online Store → Themes, open your duplicated theme, and click Edit code.
Find your product template. In most themes this is sections/main-product.liquid. In older themes it may be templates/product.liquid. If your theme uses JSON templates, edit the section file, not the JSON.
Locate where you want the chart to appear — usually after the product description or after the variant picker. Search the file for product.description to find a reliable anchor point.
Paste the following snippet at that location:

{% if product.metafields.custom.size_chart != blank %}
  <div class="size-chart">
    <details>
      <summary>Size chart</summary>
      <div class="size-chart__content">
        {{ product.metafields.custom.size_chart | metafield_tag }}
      </div>
    </details>
  </div>
{% endif %}

The {% if %} check is what makes this safe: products without a chart render nothing, so you can roll this out gradually without empty sections appearing.

If you used a file metafield for an image, replace the content line with:

{{ product.metafields.custom.size_chart | image_url: width: 800 | image_tag }}

Save the file.

Using <details> gives you a collapsible chart that's accessible by default and works without JavaScript. If you'd rather show the chart inline, remove the <details> and <summary> tags and keep the inner div.

Step 4: Style the Size Chart to Match Your Theme

Add CSS to your theme's stylesheet — usually assets/base.css, assets/theme.css, or a custom CSS file if your theme has one.

.size-chart {
  margin: 1.5rem 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.size-chart summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.size-chart summary::-webkit-details-marker {
  display: none;
}

.size-chart summary::after {
  content: "+";
  float: right;
}

.size-chart[open] summary::after {
  content: "−";
}

.size-chart table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.9em;
}

.size-chart th,
.size-chart td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  text-align: left;
}

.size-chart th {
  font-weight: 600;
}

Two things to watch: use your theme's existing font stack rather than hardcoding a font family, and avoid fixed pixel widths on the table so it reflows on mobile. If your theme uses CSS custom properties for colors, reference those instead of hardcoded values so the chart updates if you change your palette.

Step 5: Test Across Products, Devices, and Themes

Run through this checklist before publishing:

A product with a chart — the chart appears and expands correctly.
A product without a chart — no empty box, no stray heading.
A product with variants — confirm the chart sits logically relative to the variant picker.
Mobile at 375px width — the table scrolls or wraps without breaking the layout.
Tablet and desktop — spacing matches surrounding elements.
Theme editor preview — open the theme customizer and confirm nothing shifted.
A second theme, if you have one installed — metafields are theme-independent, but your Liquid snippet is not, so it won't appear until you add it there too.

Only after all of these pass should you click Publish on the duplicated theme.

Common Issues and How to Fix Them

The chart doesn't appear at all. The most common cause is storefront access being disabled on the metafield definition. Go back to Settings → Custom data → Products → Size chart and confirm Storefronts access is on. Second most common: the namespace and key in your Liquid don't match the definition. Check for typos — custom.size_chart is not the same as custom.size-charts.

The chart appears but shows raw HTML or tags. You're using metafield_tag on a plain text field, or the field type doesn't match the filter. Use metafield_tag for rich text and multi-line text; use metafield_text for single-line text.

Formatting looks wrong inside the chart. Shopify's rich text editor supports a limited tag set. If you pasted HTML from Word or Google Docs, strip it first — paste as plain text, then reapply formatting in the editor.

The table overflows on mobile. Wrap the table in a scroll container or reduce padding at small breakpoints. Adding overflow-x: auto to .size-chart__content is usually enough.

The chart shows on the wrong template. If you edited main-product.liquid but your products use a different template (for example, a custom template assigned to specific products), you'll need to add the snippet to that template file as well.

Content disappeared after a theme update. Theme updates don't touch metafield data, but they do overwrite customized section files. Keep a copy of your snippet in a text file so you can re-add it in seconds.

Conclusion

Adding a size chart to Shopify without an app comes down to three moves: define a metafield, fill it in per product, and render it with a conditional Liquid snippet. The whole setup costs nothing beyond your time, keeps your product pages fast, and gives you complete control over how the chart looks. Once it's in place, you can extend the same pattern to care instructions, materials, or fit notes.

FAQ

Do I need Shopify Plus to use metafields? No. Metafields are available on all current Shopify plans. If your admin doesn't show Settings → Custom data, your admin may need updating — contact Shopify Support.

Will this work with any Shopify theme? The metafield data works with any theme, but the Liquid snippet must be added to each theme you publish. Themes with Online Store 2.0 JSON templates store product markup in section files, so you'll typically edit sections/main-product.liquid. Older themes may use templates/product.liquid.

Can I use one size chart across many products? Yes. Create a metaobject to store the chart once, then reference it from each product's metafield. For smaller catalogs, you can also assign the same rich text content to each product manually, or use Shopify's bulk editor to update metafields across many products at once.