In the videos below, we will guide you through the process of installing Sizefox on your Shopify store.
Depending on your Shopify theme, you can either add the Sizefox block on your Shopify store or add Sizefox snippet to your custom theme. Follow the instructions that best fit your store theme.
Let’s add the widget to your product pages. From your Sizefox dashboard in the drop down named “Add a block to your product page”, copy the org id and go to your Shopify store. From the side bar menu of your Shopify Admin, go to Online Store and then Themes. Now that you are here, click the customize button.
Open the dropdown located at the top of the page and choose “Default product”. On the left side panel you can now go to the product information section and click on add block.
In the dropdown, select Sizefox. Drag the new app-block to the position you want the find-my-size button to appear. Select the Sizefox block to access the contextual menu and paste your personalized orgId.
Here you may also change the Colour Settings reflected on the “Find my Size” button. The primary color is the default color of the button and the secondary is the color on hover. Once these steps are done, do not forget to save.
After these steps, go back to your Sizefox admin dashboard and click on Next. You are done! You can now move forward with creating your first size chart.
Let’s add the widget to your product pages. From your Sizefox dashboard in the drop down named “Add a code to your custom theme”, you can see the detailed instructions for the set up. Copy the Code Snippet to your clipboard and go to the your Shopify Admin.
In the code edit console look for the file named ‘product_template.liquid’ or ‘main-product.liquid’. Once on the right file, scroll down at the very bottom, add a new line and paste the snippet. Once this is done, do not forget to click on save.
Note that every theme is different and your files might have different names. It is important that you insert the snippet in the liquid file of your main product template page.
Little tip: by default our “Find my Size” button will put itself under your “add to cart” button. If you would like to change the position of the button on your product page, you can paste the second snippet in the same template file where you want your “Find my size” button to appear, and save. If you added this second snippet, again do not forget to save.
You have now added the snippet to your product pages. You can now return to your Sizefox dashboard, click on “next’ and move on to creating your first size chart.