Read before you start
This option is the most complex one, before you continue make sure that:
- You have already tried to change the position via Add Block or via CSS class
- You have basic coding skills or access to a developer that administers your theme.
Step 1
Navigate to your Sales Channels > Online Store > Themes
Go to your most recent theme and click on the icon with the three dots [ ... ]
Select 'Edit code'
Step 2
Search for the file in which you can modify the layout of your product page. This is a liquid file that generally contains the name of 'product' (but each theme is different!)
Examples: {/} main-product.liquid , {/} product.liquid , {/} product-template.liquid, {/} product-grid-item.liquid, {/} produt-info.liquid {/} product-card-grid.liquid, {/} card-product.liquid
Step 3
Enter the following Div in the relevant section of your code.
<div id="sizefox-enable" data-btn-horizontal="{{ block.settings.button_horizontal_aligment }}" data-btn-vertical="{{ block.settings.button_vertical_aligment }}" data-btn-horizontal-mobile="{{ block.settings.button_horizontal_aligment_mobile }}"></div>
Example:
Step 4
Finally, click on Save and test your changes in your store by opening a product that contains an active size chart.
If you would like to change the position of the button, repeat the steps above by inserting the Div in a different position of your code.