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.
Add the Sizefox Block on your Shopify store
Transcript
Let’s add the widget to your product pages. Go to your Shopify store. Go to “Online Store”. Click on 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”.
Select the Sizefox block to access the contextual menu to 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. Drag the new app-block to the position you want the find-my-size button to appear. Don’t forget to save.
Add the Sizefox widget to your custom theme
Transcript
Let’s add the widget to your product pages. Copy the code snippet to your clipboard and go to your Shopify admin.
In the code edit console look for the file named ‘product_template.liquid’ or ‘main-product.liquid’. Scroll down at the very bottom, add a new line and paste the snippet. After 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.
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 then save.