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:
First, on the left hand side, scroll to Snippet section and add a new snippet.
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' %}
Click SAVE and that should be it! You should be able to see size charts on your unpublished themes now :)