Product page Free

Collapsible size guide

A tidy, expandable size chart that sits under the product form without needing an app or popup library.

<details class="size-guide">
  <summary>Size guide</summary>
  <table>
    <thead>
      <tr><th>Size</th><th>Chest (cm)</th><th>Length (cm)</th></tr>
    </thead>
    <tbody>
      <tr><td>S</td><td>92–97</td><td>68</td></tr>
      <tr><td>M</td><td>98–103</td><td>70</td></tr>
      <tr><td>L</td><td>104–109</td><td>72</td></tr>
      <tr><td>XL</td><td>110–115</td><td>74</td></tr>
    </tbody>
  </table>
</details>
<style>
  .size-guide{margin:16px 0;font-size:14px}
  .size-guide summary{cursor:pointer;font-weight:600}
  .size-guide table{width:100%;border-collapse:collapse;margin-top:10px}
  .size-guide th,.size-guide td{border:1px solid #e2e2e2;padding:8px;text-align:left}
  .size-guide thead{background:#f6f6f6}
</style>

Answers the “will it fit me?” question right on the page, which cuts return-driving guesswork. Paste into main-product.liquid (or your product template section) just below the add-to-cart form.

Notes

Replace the sample rows with your real measurements — one wrong number causes returns.
<details> is native HTML, so it works with zero JavaScript.
For per-product charts, move the table into a metafield and loop over it instead of hard-coding.