How do I manually install SmartSize script on my theme?

How do I manually install SmartSize script on my theme?

Currently, SmartSize can programmatically install the necessary code to published themes. However, if you want to test on an unpublished theme and can not afford to turn it publish temporarily, you can follow this guide.


First click on "Edit code" in the dropdown to open the code editor for your theme:




There are 2 things to add to your theme:


First, on the left hand side, scroll to Snippet section and add a new snippet. 




Name it smartSize.liquid



Next, inside the file, copy the following content:


<script id='smartsizeScript'></script>
<script>
window.sizefox = window.sizefox === undefined ? {} : window.sizefox;
sizefox.shop = "{{ shop.permanent_domain }}";
{% assign t = template | prepend: '/' | append: '.' %}
{% if t contains '/product.' %}
sizefox.data = {
  collections: "{{ product.collections | map: 'id' | join: ',' }}",
  tags: {{ product.tags | join: ',' | json }},
  product: "{{ product.id }}",
  productname: "{{ product.title | replace: '"', '"' }}",
  type: {{ product.type | json }}
};
{% endif %}

fetch(`https://server.smartsize.io/sizepopupversion?shopname=` + sizefox.shop)
.then (response => response.json())
.then(json => {
scripturl = json.url;
  console.log('SmartSize script = ' + scripturl);
  const smartScript = document.getElementById("smartsizeScript");
  smartScript.src = scripturl
});
</script>




Then click save. You should have a file that looks like this (see below). Make sure that you SAVE it.




Second thing to do is open the theme.liquid file inside the Layout folder. And then add the following right before the end tag </head>:


{% include 'smartSize' %}
As shown in the screenshot below:



Click SAVE and that should be it! You should be able to see size charts on your unpublished themes now :)


    • Related Articles

    • How do I manually install SmartSize RECOMMENDER script on my theme? (registered users)

      Currently, SmartSize can programmatically install the necessary code to published themes. However, if you want to test on an unpublished theme and can not afford to turn it publish temporarily, you can follow this guide. First click on "Edit code" in ...
    • Embed SmartSize

      ✔️ Go to your Shopify admin page ✔️ Select Sales Channels > Online Stores > Themes ✔️ Select 'Customize' ✔️ Select 'Theme Settings' ✔️ Select 'App embeds' ✔️ Click on 'SmartSize' toggle ✔️ Click on 'Save'
    • How can I add a SmartSize block in my Shopify Theme?

      Before you start, please make sure that you have a Shopify 2.0 theme and ensure that the SmartSize app has been already installed and embedded in your Shopify store. Now, let's start with the process: 1. **Log in to your Shopify Store:** Start by ...
    • A countdown in my size charts?

      Are you seeing a countdown in your size chart? This means that your free trial has expired and you have reached the limit of size charts published. To eliminate this countdown you may upgrade to the Growth Plan of SmartSize and enjoy unlimited size ...