Fit Quiz for Shopify: Design customization

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

Updated over a week ago

"Customization" is the first 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.

Call-to-action text

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.

The "BUTTON TEXT" field refers to the initial call-to-action shoppers see when interacting with the Fit Quiz. Popular options include "Not sure about the size?" and "Find your size". You can modify the text directly in this field.

After the Fit Quiz recommends a size, the following notification usually appears "We recommend size XX." You can edit this message in the "RECOMMENDED TEXT" field. Make sure to keep the special element {s} used in the field, as it dynamically updates with the recommended size. Removing this element will prevent Fit Quiz from displaying the recommended size in the notification

You can revert the text to default options at any time by clicking "Reset to default".

Multi-language support

Currently, shops can choose from 12 languages to localize the call-to-action text. To customize the text in different languages, select the language from the dropdown and edit the text.

If your shop has multiple language options, you can update the call-to-action text in all of them. Simply select one language at a time, edit the text, and click save. Once saved, select another language and repeat the process.

If your language is missing from the list, please contact us. We can add new languages via our internal translation admin free of charge.

Custom colors and icons

You can select one of the default colors or go with a custom option – simply click the "Choose your own" button and add a Hex color code of your preferred color (remember to add the "#" symbol).

Additionally, you can select one of our default icons, choose not to use an icon, or upload your own by clicking on the "Choose your own" button.

Advanced Settings

The "Advanced Settings" block provides more control over the appearance of the Fit Quiz button on your product page.

Mobile and Desktop settings

You can apply different settings for desktop and mobile views. To do so, simply keep "Similar settings for desktop and mobile" toggled off and expand each section to edit the settings.

If you wish to keep the same styling both for desktop and mobile, toggle "Similar settings for desktop and mobile" on.

Text Settings

Here you can further customize the appearance of the the call-to-action text, for example:

  • font-weight (regular, bold, etc.)

  • font size (in px)

  • underline

  • use of capital letters

  • text alignment (left, center, or right)

Button Design

You can further modify the appearance of the Fit Quiz button. Options include adjusting the width to auto or fit the text content, setting border shape and color, corner radius, and selecting a background color.

Padding and Margins

You can adjust the space between the Fit Quiz button and other elements on the product page by updating vertical and horizontal padding. Additional margins (related to the text inside the call-to-action button) can be added as well.

All these settings can be reset to the default options at any time by clicking the “Reset all settings to default” link.

Unit of measurements

This new option lets you select the unit of measurement for the "What is your height?" question in Fit Quiz. You can choose between centimeters, inches, or show both.

Previewing changes

A live preview shows how your changes will look on desktop and mobile. You can switch between views by clicking the icons on top of the preview 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.

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?