How to Add a Size Chart Popup to Shopify Product Pages (2026)

For per-product charts via metafields specifically, see our deeper companion guide: how to add a size chart with metafields in Shopify.

1. Install Tailor Size Guide from the Shopify App Store.
2. Open the dashboard. The default chart template loads automatically.
3. Choose "Popup" as the display style from the layout dropdown.
4. Customize the chart. Edit rows/columns, add measurements, choose a design template.
5. Save and publish. A "Size Chart" button appears on every product page within seconds.

The app handles theme compatibility, mobile responsiveness, popup z-index, ESC-key closing, and styling. No code edits, no theme conflicts.

For one chart used across all products. Edit your theme's product.liquid or product-template.liquid file (path varies by theme; check Online Store → Themes → Edit Code).

Step 1. Add the button next to your variant picker:

<button type="button" class="size-chart-btn" onclick="document.getElementById('size-chart-modal').style.display='flex'">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M2 12h20M12 2v20"/></svg>
  Size chart
</button>

Step 2. Add the modal at the bottom of the same file (just before the closing tag):

<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>
    <table>
      <thead>
        <tr><th>Size</th><th>Bust</th><th>Waist</th><th>Hips</th></tr>
      </thead>
      <tbody>
        <tr><td>XS</td><td>32"</td><td>25"</td><td>34"</td></tr>
        <tr><td>S</td><td>34"</td><td>27"</td><td>36"</td></tr>
        <tr><td>M</td><td>36"</td><td>29"</td><td>38"</td></tr>
        <tr><td>L</td><td>38"</td><td>31"</td><td>40"</td></tr>
        <tr><td>XL</td><td>40"</td><td>33"</td><td>42"</td></tr>
      </tbody>
    </table>
  </div>
</div>

Step 3. Add CSS in 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: 600px;
  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-content table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.size-chart-content th, .size-chart-content td { padding: 8px 12px; border: 1px solid #eee; text-align: left; }
.size-chart-content th { background: #f7f7f7; }
@media (max-width: 600px) {
  .size-chart-content { padding: 20px; }
}

Step 4. Add ESC-key close at the end of the modal HTML:

<script>
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    const m = document.getElementById('size-chart-modal');
    if (m && m.style.display !== 'none') m.style.display = 'none';
  }
});
</script>

Save, preview the product page, click the button. The popup should open and close cleanly on desktop and mobile.

For 1–10 products with different charts. Open a product, switch the description editor to HTML mode, and paste:

<button type="button" onclick="document.getElementById('chart-1').style.display='flex'" style="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
</button>

<div id="chart-1" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;padding:16px;" onclick="if(event.target===this)this.style.display='none'">
  <div style="background:#fff;border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;padding:32px;position:relative;">
    <button onclick="document.getElementById('chart-1').style.display='none'" style="position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;cursor:pointer;">&times;</button>
    <h2>Size Chart</h2>
    <table style="width:100%;border-collapse:collapse;margin-top:16px;">
      <tr><th style="padding:8px 12px;border:1px solid #eee;">Size</th><th style="padding:8px 12px;border:1px solid #eee;">Bust</th><th style="padding:8px 12px;border:1px solid #eee;">Waist</th></tr>
      <tr><td style="padding:8px 12px;border:1px solid #eee;">S</td><td style="padding:8px 12px;border:1px solid #eee;">34"</td><td style="padding:8px 12px;border:1px solid #eee;">27"</td></tr>
      <tr><td style="padding:8px 12px;border:1px solid #eee;">M</td><td style="padding:8px 12px;border:1px solid #eee;">36"</td><td style="padding:8px 12px;border:1px solid #eee;">29"</td></tr>
    </table>
  </div>
</div>

Save the product. The button shows in the description, the popup works. Repeat per product, changing id="chart-1" to chart-2, chart-3, etc., and updating the table data.

If you have any inventory size or want zero theme-code maintenance: app. If you have a single chart for all products and a developer: theme code. If you have under 10 products with different charts and you'll never grow: product-description HTML.

For the next-level setup (different charts per product collection, automatically), see our metafields guide. For the why-it-matters context, see our apparel returns playbook.