Using a custom element to display the size guide button

To display SmartSize's size guide button on a very specific position on a page, you can add a code snippet to your store's theme and use it to attach SmartSize to a custom element on your page.

Here is how to do it:

Step 1: Disable SmartSize's standard button

1. In your Shopify admin, go to Online Store → Themes → Customize

2. On the left-and side, select App Embeds

3. Select the SmartSize App Embed

4. Scroll down to the Custom Trigger Settings section

5. Turn on the Hide default SmartSize button toggle

This will disable SmartSize's standard button and enable its API to be called by your page

Step 2: Prepare your theme

Access Your Theme Code Editor

1. Log in to your Shopify admin panel
2. Go to Online Store > Themes
3. Find your current (published) theme
4. Click the "..." button (three dots) next to the "Customize" button
5. Select "Edit code"

 

Create the SmartSize Link Snippet

1. In the code editor, click the snippets folder in the left sidebar
2. Click Add a new snippet (file icon with the '+' sign)
3. Name the snippet: smartsize-link.liquid and hit Enter
4. Copy and paste the following code into the newly created smartsize-link.liquid file
    

{% comment %}
  SmartSize Dynamic Link Snippet
  Usage: {% render 'smartsize-link', link_text: 'View Size Chart', link_class: 'my-custom-class' %}
  
  Parameters:
  - link_text: Custom text for the link (default: 'SIZE GUIDE')
  - link_class: Additional CSS classes (default: 'smartsize-custom-button')
{% endcomment %}

{% assign link_text = link_text | default: 'SIZE GUIDE' %}
{% assign link_class = link_class | default: 'smartsize-custom-button' %}

<span id="smartsize-slot">
  <script>
    (function() {
      var observer = null;
      var linkText = {{ link_text | json }};
      var linkClass = {{ link_class | json }};
      
      function createSizeGuideLink() {
        var slot = document.getElementById('smartsize-slot');
        if (!slot) return;
        
        if (slot.querySelector('.smartsize-link')) return;
        
        if (window.smartsize && typeof window.smartsize.hasChart === 'function') {
          if (window.smartsize.hasChart()) {
            var link = document.createElement('a');
            link.href = '#';
            link.textContent = linkText;
            link.className = 'smartsize-link ' + linkClass;
            link.style.cssText = 'text-decoration: underline; color: #000; cursor: pointer;';
            
            link.addEventListener('click', function(e) {
              e.preventDefault();
              if (window.smartsize && window.smartsize.openModal) {
                window.smartsize.openModal();
              }
            });
            
            slot.appendChild(link);
          }
        } else {
          setTimeout(createSizeGuideLink, 100);
        }
      }
      
      function setupObserver() {
        var slot = document.getElementById('smartsize-slot');
        if (!slot) {
          setTimeout(setupObserver, 100);
          return;
        }
        
        createSizeGuideLink();
        
        observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            createSizeGuideLink();
          });
        });
        
        observer.observe(slot, {
          childList: true,
          subtree: true,
          characterData: true
        });
      }
      
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setupObserver);
      } else {
        setupObserver();
      }
    })();
  </script>
</span>

5. Click Save on the top right corner of the code editor

The end result should look like this:


 

Step 3: add SmartSize to your desired location

Now you just need to render the newly created smartsize-link snippet on your theme, on your desired location.

To do that, simply add this to your desired location on your theme's code:

{% render 'smartsize-link', link_text: 'View Size Chart', link_class: 'my-custom-class' %}

When rendering the snippet, you have 2 properties to customise:

• link_text: the text to be displayed on the link. Defaults to "View Size Chart"
• link_class: one or more CSS classes to be added to the link for styling

In the example below, the link is being added to the Variant Picker, with "VIEW GUIDE" as link text and "size-label-legend" as custom class:

Which results in this positioning:

For more details on the methods available for programatically controlling SmartSize:

SmartSize JavaScript API Reference