Read before you start
This option is the most complex one and requires modifications to your theme's code. 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:Optional: alignment options
In case you want to configure the button's alignment on Desktop and Mobile, add the following optional properties to the previous `div` :
<div id="sizefox-container"
data-btn-horizontal="center"
data-btn-vertical="center"
data-btn-horizontal-mobile="center">
</div>
The three optional properties above accept the values
left, center or right. 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.