Skip to main content

Additional customization to your "Find my size" button

Updated

Depending on your shop's theme and page design, you might want to add additional customization to the Sizefox "Find my Size" button.

 

This article will guide you through the possible customizations you can make to the Sizefox "Find my size" button, without altering its performance and functions. Follow along for the basic CSS customizations. 

Note: If you do not feel confident with these type of manipulations, contact your front end developer or your web-agency.

 

See the list of properties that you can change on the button through CSS customization: 

  • Having/removing the border around the button
  • Changing the color of the border
  • Changing the color of the button text
  • Rounding the edges of the button
  • Changing the margin around the button and its width
  • Changing the color of the background
  • Changing the font of the text
  • Removing the CSV ruler image
  • Overwriting Theme 2.0 style

To implement the above customizations, please follow these steps: 

  • in your Shopify admin dashboard, navigate to your theme and click actions > edit code
  • enter your assets folder, depending on your file naming convention, look either for the file named, section-main-product.css, theme.css or custom.css
  • once you found this file, add the relevant string of code at the bottom of the file: 

 

Removing the border of the button

#sizefox {
 border: none !important;
}

 

Changing the color of the border and of the text within the button

#sizefox {
 border-color: #ffffff !important;
 color: #ffffff !important;
}

Note: these modifications will only impact the button colors. If you would like to modify the color selection within the Sizefox widget, follow the guidelines of this article. 

 

Align the Text of the CTA left/right/centre of the button

#sizefox {
  text-align-last: center !important;
}

 

Rounding the edges of the button

#sizefox {
 border-radius: 20px !important;
}

 

Changing the margin around the button and the width: 

#sizefox {
 margin-top: 10px !important;
 margin-bottom: 10px !important;
 margin-left: 10px !important;
 margin-right: 10px !important;
}
#sizefox {
 border-width: 10px !important;
}

Changing the color of the background

#sizefox {
 background-color: #ffffff !important;
}

Changing the font of the text

#sizefox {
 font-family: "Times New Roman", Times, serif !important;
}

Removing the CSV ruler image

#sizefox > span > svg {
       width: 0px !important;
       height: 0px !important;
       margin: 0px !important;
     }
#sizefox span:nth-child(2) {
       margin-left: -24px !important;
     };

 

If you are using a Shopify 2.0 Theme, in order to enforce the customization you will need to add the following mention <!important> at the end of each element: 

#sizefox {
 border-width: 10px !important;
}

 

Note: for all the above changes, you may adjust the values (colors, numbers of pixels, etc) to obtain the desired look of the button.

 

If you require more support, please create a support ticket with your specific request. 

Related articles