Skip to main content

How to style your fit quiz button

Change the fit quiz button's label, recommendation message, link-or-button style, colors, corner rounding, and spacing from the Shopify theme editor.

The fit quiz button's styling lives in your Shopify theme editor — inside the SmartSize Fit quiz app embed — so the button always matches the rest of your storefront. In SmartSize, open Settings → Fit quiz button → 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 — FIND MY SIZE 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.


Set the recommendation message

Recommendation text is what the button shows once a shopper has completed the quiz. The [[recommendedSize]] placeholder is replaced with their result — so "Your size is [[recommendedSize]]" becomes "Your size is M". Reword the message however you like, but keep the placeholder so the size always appears.


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 — pair it with a light Text color so the label pops against the background. You can also add a small hanger, ruler, or arrows icon with the Icon dropdown.


Pick your colors and round the corners

Use Background color to match the button to your brand — the storefront preview updates live as you pick. The Corner radius slider rounds the button corners: set it to 0 for sharp edges, 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, like the size chart button in this example, 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?