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
In your Shopify admin, go to Online Store → Themes → Customize
On the left-and side, select App Embeds
Select the SmartSize App Embed
Scroll down to the Custom Trigger Settings section
Turn on the
Hide default SmartSize buttontoggle
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
- Log in to your Shopify admin panel
- Go to Online Store > Themes
- Find your current (published) theme
- Click the "..." button (three dots) next to the "Customize" button
- Select "Edit code"
Create the SmartSize Link Snippet
- In the code editor, click the
snippetsfolder in the left sidebar - Click Add a new snippet (file icon with the '+' sign)
- Name the snippet:
smartsize-link.liquidand hit Enter -
Copy and paste the following code into the newly created
smartsize-link.liquidfile
{% 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: