Skip to main content

How to Use an Existing Link or Button to Open the SmartSize Modal

Updated

If your theme already has a "Size Guide" link or button, you can wire it up to open the SmartSize modal — without adding a second button or changing your layout.

This guide uses a small inline script that automatically hides the element if no size chart exists for the current product.

 

Before You Start

  • SmartSize must be installed and active on your store
  • You need access to your theme's Liquid files via the Shopify Theme Editor
  • Basic familiarity with editing theme code is helpful

 

Step 1 — Open Your Theme Code

  1. In your Shopify admin, go to Online Store → Themes
  2. Next to your active theme, click ⋯ → Edit code
  3. Locate the file that contains the element you want to use as the trigger. For product pages, this is usually sections/main-product.liquid,  snippets/product-form.liquid or snippets/variant-picker.liquid

 

Step 2 — Find the Existing Element

Look for the link or button you want to use. It might look something like this:

<a href="/pages/size-guide">Size Guide</a>

or

<button class="size-guide-btn">Size Guide</button>

 

Step 3 — Replace It With the SmartSize Version

Replace your existing element with the following code:

<a
 id="smartsize-size-guide-link"
 href="#"
 style="display: none;"
 onclick="event.preventDefault(); window.smartsize.openModal();"
>
 Size Guide
</a>
<script>
 (function init() {
   if (!window.smartsize) { setTimeout(init, 100); return; }
   if (window.smartsize.hasChart()) {
     document.getElementById('smartsize-size-guide-link').style.display = '';
   }
 })();
</script>

 

What this does:

  • The link is hidden by default (display: none)
  • The script waits for SmartSize to finish loading, then checks if a size chart exists for the current product
  • If a chart exists, the link is made visible and clicking it opens the SmartSize modal
  • If no chart exists, the link stays hidden — so customers never see a broken or empty trigger

Example on an actual theme

 

 

Step 4 — Save and Preview

  1. Click **Save** in the Theme Editor
  2. Navigate to a product page that has a SmartSize size chart assigned — the link should appear
  3. Navigate to a product page without a chart — the link should be hidden
  4. Click the link to confirm the modal opens correctly

 

Customization Tips

Keeping your existing styles

The id attribute is only used to target the element with the script. You can keep your original class names and styles — just add the id, update the href , and add the onclick attribute:

<a
 id="smartsize-size-guide-link"
 href="#"
 class="your-existing-class"
 style="display: none;"
 onclick="event.preventDefault(); window.smartsize.openModal();"
>
 Size Guide
</a>

 

Using a <button> instead of a link

<button
 id="smartsize-size-guide-link"
 style="display: none;"
 onclick="window.smartsize.openModal();"
>
 Size Guide
</button>

 

Note: buttons don't need event.preventDefault().

 

Troubleshooting

 

The link never appears

  • Open your browser console (F12) and run window.smartsize.hasChart() — if it returns false, no chart is assigned to that product in SmartSize
  • Make sure SmartSize is loading on the page: run !!window.smartsize in the console; it should return true

 

The link appears but the modal doesn't open

  • Check the browser console for JavaScript errors
  • Confirm the `id` on your element matches exactly: smartsize-size-guide-link
Powered by Zendesk