Skip to main content

How to style your size chart button

Change the size chart button's label, link-or-button style, colors, corner rounding, and spacing from the Shopify theme editor.

The size chart button's styling lives in your Shopify theme editor — inside the SmartSize Size chart app embed — so the button always matches the rest of your storefront. In SmartSize, open Settings → Button size charts → Styling for an overview of everything you can change, then click Customize in theme editor to jump straight to the right place.


Change the button text

In the theme editor's Button settings, the Button text field controls the label shoppers see — SIZE GUIDE by default. This is your store-wide default label. If you sell in more than one language, you can translate it with Shopify's free Translate & Adapt app — see How to translate your size chart button.


Text link or full button

The Style setting switches between two looks. Link shows the label as a simple text link that blends in with the rest of your product page.

Button turns it into a full button that stands out next to your size selector. You can also add a small hanger, ruler, or table icon with the Icon dropdown.


Pick your colors

Use Text color and Background color to match the button to your brand. The background is optional — leave it unset to keep the button transparent.


Round the corners

The Corner radius slider rounds the button corners. Set it to 0 for sharp corners, or push it all the way up for a pill shape.


Adjust the spacing

The Margin sliders add outer spacing around the button — top, right, bottom, and left — which is handy when it sits too close to neighboring elements and needs a little breathing room.


💡 Tip: don't forget to click Save in the theme editor. These settings are your store-wide defaults — if you've placed the button with an app block, you can also override the styling on that page by setting Button styling to Customize on this page.

Did this answer your question?