How to Add a Custom HTML Size Guide Using Shopify Metafields and a Modal Popup

July 4, 2025, 10:23 a.m.

If you want to provide a detailed size guide for your Shopify products, adding it as a modal popup is a clean and user-friendly solution. This guide will walk you through creating a multiline metafield in Shopify for your HTML size guide and showing it as a modal on your product page.

Why Use a Metafield for Size Guide?

Shopify’s default product fields don’t always offer enough flexibility to add custom content like HTML tables for size guides. Metafields allow you to add extra information to products without changing your theme code drastically. Using metafields with HTML also means you can design rich, formatted size guides.

Step 1: Create a Multiline Metafield in Shopify

Log in to your Shopify Admin.
Go to Settings > Custom data > Products.
Click Add definition to create a new metafield.
Fill in:
- Name: Product Sizing Guide
- Namespace and key: custom.product_sizing_guide
Content type: Select Multi-line text
Save the metafield definition.

Step 2: Add Your HTML Size Guide to the Metafield

Open a product where you want to add the size guide.
Scroll down to the Metafields section.
Find your newly created Product Sizing Guide metafield.
Paste your HTML code for the size guide table, for example:

<table>
  <thead>
    <tr>
      <th>Size</th>
      <th>S</th>
      <th>M</th>
      <th>L</th>
      <th>XL</th>
      <th>XXL</th>
      <th>3XL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chest (to fit)</td>
      <td>36/38</td>
      <td>40/41</td>
      <td>42/44</td>
      <td>46/48</td>
      <td>50/52</td>
      <td>54/55</td>
    </tr>
    <tr>
      <td>Weight</td>
      <td>610g</td>
      <td>620g</td>
      <td>660g</td>
      <td>710g</td>
      <td>780g</td>
      <td>810g</td>
    </tr>
  </tbody>
</table>

5. Save the product.

Step 3: Add the Modal Code Using a Custom Liquid Block

Instead of editing your main product template directly, you can add a Custom Liquid block in your product page builder or theme editor. This makes it easier to manage and update without touching core theme files.

In your Shopify admin, go to Online Store > Themes > Customize.
Navigate to the product page where you want the size guide button.
Add a new Custom Liquid block or section.
Paste the following Liquid, HTML, CSS, and JavaScript code into that block.

This code will:

Show a Size Guide button with an icon.
Open a modal popup displaying your metafield content when clicked.
Include a close button and close the popup when clicking outside it.

{% if product.metafields.custom.product_sizing_guide %}
<button class="open-size-guide" type="button" style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-bottom: 20px;">
<svg xmlns="http://www.w3.org/2000/svg" style="width: 18px; height: 18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17v-6m4 6V7m4 10v-4"/>
</svg>
Size Guide
</button>

#sizeGuidePopup > div {
background: #fff;
width: 100%;
max-width: 700px;
max-height: 80vh;
border-radius: 0.5rem;
overflow-y: auto;
position: relative;
}

#sizeGuidePopup header {
padding: 1rem;
text-align: right;
}

#sizeGuidePopup .close-popup {
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
}

#sizeGuidePopup section {
padding: 1rem;
}

#sizeGuidePopup table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 1rem;
margin-top: 1rem;
}

#sizeGuidePopup th,
#sizeGuidePopup td {
padding: 0.75rem;
border: 1px solid #ccc;
}

#sizeGuidePopup th {
background-color: #f9f9f9;
font-weight: bold;
}

@media (max-width: 480px) {
#sizeGuidePopup > div {
max-width: 95vw;
max-height: 90vh;
}

#sizeGuidePopup section {
padding: 0.5rem;
}

#sizeGuidePopup table {
font-size: 0.9rem;
}

#sizeGuidePopup th,
#sizeGuidePopup td {
padding: 0.5rem;
}
}
</style>

<div id="sizeGuidePopup">
<div>
<header>
<button class="close-popup" aria-label="Close">×</button>
</header>
<section>
{{ product.metafields.custom.product_sizing_guide.value | raw }}
</section>
</div>
</div>

if (openBtn && popup && closeBtn) {
openBtn.addEventListener('click', () => {
popup.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
closeBtn.addEventListener('click', () => {
popup.style.display = 'none';
document.body.style.overflow = '';
});
window.addEventListener('click', (e) => {
if (e.target === popup) {
popup.style.display = 'none';
document.body.style.overflow = '';
}
});
}
});
</script>
{% endif %}

Final Thoughts

Using Shopify metafields for size guides keeps your product pages neat and professional. Customers get instant access to sizing details without cluttering the page.

At Web Wizard, we specialise in custom Shopify development including metafields and interactive UI elements. Contact us if you want expert help to boost your online store.

Back