How to position the size button using CSS

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 required.

Step 1

To find out the CSS class, head over to any product page in your store and click on 'Inspect'




Step 2

Click on the selector icon




Step 3

Hoover over the component you wish (the button will be placed right below this component).





Step 4

Click on the component and check the code on the right pane. The relevant CSS class for this component will be selected. Copy this class (text contained between brackets ''").

In the example below: price price--large



Step 5

Paste the class in the relevant section and save the changes.



Step 6

Verify the new position in your store.


    • Related Articles

    • 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 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 by editing your Theme code (advanced)

      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 coding skills or access to a developer that administers your Theme. ...

    • 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 ...