Skip to main content
Fit Quiz for Shopify: Customization of the button

This is a detailed guide on all the currently available design customization options in the Fit Quiz Shopify app

Updated over a week ago

"Button customization" is the fifth step in the integration process of Fit Quiz on Shopify stores. This article will guide you through all the currently available customization options.

See the full step-by-step integration guide for Shopify shops here.

Every shop is different and unique, so we designed our Fit Quiz to be customizable as much as possible to make it fit your overall brand aesthetic.

Shoppers usually begin their interaction with Fit Quiz on a product page by clicking a dedicated button or link. This call-to-action button, typically located next to a size selector, opens Fit Quiz. Here, shoppers answer questions about their preferences and receive a size recommendation.

You can customize this "call-to-action" button, starting with its text. This is done via the "Language" screen, where you can create different localized/translated versions depending on a selected language.

Available customization options for the button

You can customize the appearance of the Fit Quiz button in a couple of different ways: 

  • Style – where you can choose colors and icons

  • Text – to set font styles, such as underlining the text or making it semibold

  • Border – this is used for cases, when you'd like to display the call-to-action as a button and select a shape, radius and border colors

  • Padding and Margins – to set vertical/horizontal paddings around the call-to-action button and margins in relation to other elements

  • Icon size and position – for more control over the appearance of the icon

Style

Here you can select: 

  • Text color

  • Background color – leave it as "transparent" or pick one from the available options

  • Button width – choose between "fit" (if you want the button borders to fit the text) or "full" to occupy the entire width

  • Icon – select one of the default icons, your own icon or remove any icons altogether. If you wish to use your own icon, please make sure to add a publicly available / accessible URL linked to an image in a .png, .svg or .jpg format.

Text

You can customize the appearance of the text by setting up:

  • Size of the font

  • Weight – such as regular, semibold or bold

  • Alignment

  • Additional style – for example, underlining or showing the text in uppercase

Border

Here you can further customize the design of the button (if you want the call-to-action to appear as a button) – for example, choose:

  • a border color

  • a border radius

  • position – whether the border should show up throughout, at the bottom or none at all

  • and, lastly, the shape of the border

Padding

Padding settings allow you to add extra space/padding around in the call-to-action button – vertically, horizontally or both.

Margin

Margin settings determine how much extra space/padding there is between the Fit Quiz button and other adjacent elements on the product page. You can add extra margins horizontally, on the top or the bottom. 

Icon size and position

Here you can further customize the appearance of the selected icon – for example, change its size and position (compared to the text). 

Button preview

You can view all the changes you make, as you go, on the right side of the screen, called "Button preview". The preview is updated right away, as soon as you make any changes.

Previewing the button in different languages

If your website is available in multiple languages, you can localize the call-to-action text on the "Language" page.

Here, on the "Button" customization page, you can then preview how the button will look in different languages – simply select the desired language in the preview dropdown for the "Button preview" to be updated.

Desktop and mobile customizations

You can choose to use the same customization settings both on mobile and desktop or customize these two separately.

By default, all the settings are saved for both views (desktop and mobile) – this is reflected in the checkbox "Use same settings for desktop and mobile".

If you wish to have different settings for mobile, you can simple uncheck this chekbox and set different settings – for example, using different colors, padding or border styling. You can preview all the changes in the separate "Button preview (mobile)" block.

Saving and updating customization settings

Remember to click "Save" after making changes. Updates are immediate, so you can see them reflected on your website right away. You can update these settings at any time.

If you want to view how these customizations look on your shop/product pages, please make sure to test it in the incognito mode on your browser (to avoid any cookies or cache).

Additional customization options

We are working hard to bring more customization options to the Fit Quiz Shopify app but not all of these are yet available directly in the app. If you need more customization options, such as changing the text of questions or answers, adding new languages, etc., please reach out to us.


You can find the full list of possible customizations here.


→What's next?

Congrats! You have just completed the first step of the Fit Quiz integration on your Shopify store. Time to move to the next steps:

Did this answer your question?