Do you want to display your size chart in a separate page?
Before you continue, this is how the experience will look like at the end:
https://thenthstore.myshopify.com/pages/size-chart
Password: smart
This means that:
- There is a new page dedicated to a size chart.
- The page is displayed in the top menu of your store.
- Every time the user wants to view the size chart, he needs to click on that menu item.
-----
Step 1
Create a new template in your Shopify theme code. Leave it empty and save it.
Step 2
Create a new page and call it: Size Chart (or your preferred name). Assign the template that you created in Step 1. Save your changes!
Step 3
Go back to the template you created. Add the following code and save your changes.
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="sizefox-container-preview" style="width: 100%;">
</div>
<script type="text/javascript">
// Create the script src URL with the parameters, including showCloseButton=true
const scriptSrc = "https://static-smartsize.nyc3.cdn.digitaloceanspaces.com/smartsize/prod/smartsize-script.js?chart_id=1073754&shopname=thenthstore.myshopify.com&newFrontend=true&showCloseButton=true";
// Create a new script element
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = scriptSrc;
// Append the script element to the head (or body) of the document
document.head.appendChild(script); // You can also use document.body.appendChild(script) if preferred
</script>
</body>
Step 4
Important
In the code above, replace and insert the following:
a) the ID of the size chart that you want to use (see screenshot below)
b) the Shopify name of your store (must contain .myshopify.com at the end!)
const scriptSrc = "https://static-smartsize.nyc3.cdn.digitaloceanspaces.com/smartsize/prod/smartsize-script.js?chart_id=1073754&shopname=thenthstore.myshopify.com&newFrontend=true&showCloseButton=true";
Save your changes and test the result in your store.
Where to find the ID of your size chart?
To find the size chart ID, open SmartSize, open the size chart you wish to insert and check the last numbers in the url.
Note: this size chart does not need to be linked to a product and does not need to be published.
Example: