Shopify Size Guide: Add a Size Chart Tab, No App

Why a Size-Guide Tab Beats a Size-Guide Page

Burying your chart on a separate page forces shoppers to click away mid-decision — and many never click back. A tab or accordion row next to the Size picker keeps the buyer on the product page, exactly where the conversion happens.

• Fewer returns: shoppers self-select the right size instead of guessing.
• Faster decisions: one tap expands the chart, no page load, no context switch.
• Zero app bloat: size-chart apps add scripts that slow your product pages. This method uses only Dawn's built-in blocks — and as we've seen, leftover app code can quietly tank your store's speed.

Step 1 — Add a Custom Liquid Block in the Theme Editor

Dawn's product template accepts a Custom liquid block anywhere inside the product information section. That's our container:

• Go to Online Store → Themes → Customize and open a product page.
• In the left panel, click Add block inside the "Product information" section.
• Choose Custom liquid and drag it to sit directly under the Variant picker block — that's where shoppers look for sizing help.
• Paste the code from the next card into the block's code field, tweak the measurements to match your garments, and hit Save.

This is the same no-app philosophy we used to add FAQ accordions to product pages without an app — native theme blocks, nothing to install.

Step 2 — Paste This Size-Chart Code

The snippet below renders a clean expandable "Size Guide" row with a measurement table. All styling is inline, so it works on Dawn and most Dawn-derived themes out of the box. Replace the table numbers with your own measurements:

<details style="border:1px solid #e5e7eb;border-radius:12px;padding:0 16px;max-width:44rem">
  <summary style="cursor:pointer;font-weight:700;padding:14px 0;list-style:none">
    Size Guide - will it fit?
  </summary>
  <div style="overflow-x:auto;padding-bottom:16px">
    <table style="width:100%;border-collapse:collapse;font-size:14px">
      <tr style="background:#f3f4f6">
        <th style="border:1px solid #e5e7eb;padding:10px;text-align:left">Size</th>
        <th style="border:1px solid #e5e7eb;padding:10px">Chest (in)</th>
        <th style="border:1px solid #e5e7eb;padding:10px">Waist (in)</th>
        <th style="border:1px solid #e5e7eb;padding:10px">Length (in)</th>
      </tr>
      <tr><td style="border:1px solid #e5e7eb;padding:10px">S</td><td style="border:1px solid #e5e7eb;padding:10px">34-36</td><td style="border:1px solid #e5e7eb;padding:10px">28-30</td><td style="border:1px solid #e5e7eb;padding:10px">27</td></tr>
      <tr><td style="border:1px solid #e5e7eb;padding:10px">M</td><td style="border:1px solid #e5e7eb;padding:10px">38-40</td><td style="border:1px solid #e5e7eb;padding:10px">32-34</td><td style="border:1px solid #e5e7eb;padding:10px">28</td></tr>
      <tr><td style="border:1px solid #e5e7eb;padding:10px">L</td><td style="border:1px solid #e5e7eb;padding:10px">42-44</td><td style="border:1px solid #e5e7eb;padding:10px">36-38</td><td style="border:1px solid #e5e7eb;padding:10px">29</td></tr>
      <tr><td style="border:1px solid #e5e7eb;padding:10px">XL</td><td style="border:1px solid #e5e7eb;padding:10px">46-48</td><td style="border:1px solid #e5e7eb;padding:10px">40-42</td><td style="border:1px solid #e5e7eb;padding:10px">30</td></tr>
    </table>
    <p style="font-size:12.5px;color:#6b7280;margin:10px 0 0">
      Measure around the fullest part of your chest and your natural waistline. Between sizes? We recommend sizing up.
    </p>
  </div>
</details>

The <details> element is pure HTML — no JavaScript to break, no theme conflicts, and it opens natively on mobile and desktop.

Step 3 — Tailor It Per Product (Without Duplicating Work)

One generic chart is fine for a start, but shoes, jackets, and pants measure differently. Use these rules:

Situation	What to do
Different charts per product type	Create alternate product templates in the theme editor (e.g. "product.shoes"), and give each its own Custom liquid block with the right chart.
Products with no sizes (mugs, one-size hats)	Don't add the block to those templates at all — a size tab on a mug looks broken.
US + EU sizing	Add a second column to the table instead of a second tab; shoppers compare side-by-side.
Inches vs centimeters	Put both in the header (e.g. "Chest (in / cm)") — one row of numbers, zero confusion.

And keep the product pages themselves tidy: redirect deleted product URLs before they become ghost towns so your size-guide work isn't wasted on dead links.

Wrap-Up: The 10-Minute Checklist

• Add a Custom liquid block under the variant picker in your Dawn product template.
• Paste the size-chart snippet and swap in YOUR real measurements.
• Preview on a phone — the table scrolls horizontally, the tab opens with one tap.
• Create alternate templates for product types with different sizing.
• Watch your size-related returns drop over the next 30 days.

Found this useful? Bookmark it and share it with someone who'd love it.

Which product type gives your store the most sizing headaches — apparel, shoes, or something else? Tell us in the comments.

Disclaimer: The tech tips provided in this article are for informational purposes only. AOP3D TECH is not responsible for any data loss or hardware damage. Always back up your devices before attempting troubleshooting.