How to position the size button by editing your Theme code (advanced)

How to position the size button by editing your Theme code (advanced)

Read before you start

This option is the most complex one, before you continue make sure that:
  1. You have already tried to change the position via Add Block or  via CSS class
  2. You have 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 team and click on the icon with the three dots [ ... ]
Select 'Edit code'



Step 2

Seach 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 not always (it depends on each Theme)

Example:  {/} main-product.liquid , {/} product.liquid , {/} product-template.liquid 


Step 3

Enter the following Div in the relevant section of your code.

<div id="sizefox-container"> </div>

Example:




Step 4


If you wish to change the horizontal position of your button, adjust the Div as follows:

Copy this code snippet to align: center

<div class="sizefox-container-flex sizefox-container-center" id="sizefox-container"> </div>

Copy this code snippet to align: right

<div class="sizefox-container-flex sizefox-container-right" id="sizefox-container"> </div>

Copy this code snippet to align: left

<div class="sizefox-container-flex sizefox-container-left" id="sizefox-container"> </div>


    • Related Articles

    • How to position the size button using CSS

      Shopify helps merchant configure the layout of the theme with Blocks, if your theme does not support Add Block, try this method for changing the position of your size button. These instructions are for everyone. No previous coding knowledge is ...

    • Change the vertical position of your size chart button

      Floating button By default, the size button will appear floating on your store. You can change the position to 'inline' with the text in the Settings page of SmartSize. See image below. Inline button You can change the position of the button to ...

    • How to position the size button using App Block

      Step 1 Open your Shopify Theme and click on Customize Step 2 Go the search bar and search for a product in your store that already has a size chart linked to it Step 3 Once you have selected a product. Click on 'Add block', click on 'Apps' and select ...

    • Change the horizontal position of your size chart button

      Step 1 Head over to your Theme editor. Click on App Embeds (right menu) Click on the drop down icon next to SmartSize Step 2 Choose the desired position: left, center or right. Don't forget to save!

    • How to choose an icon and label for your size button

      Go to Settings and locate section 'Button icon and label'. Label Enter the label of the button that will be displayed in your product page. The label can be in any language and it will be recognized by translation services of the browser. Icon Select ...