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. Let's dive deeper into customization options for the Fit Quiz button on a product page (PDP).

Available customization options:

Let's review each one of these in more detail.

The customization editor comes up as a split-screen interface, where you can both edit and preview these edits right away. On the left, you'll find all editing controls, while the right side displays a live demo of your changes.

You can toggle between desktop and mobile views using the top panel to ensure your button looks great across all devices. By default, styling remains consistent across both views, but you can create device-specific customizations by unticking the checkbox under the "Mobile" tab.

When you're ready to publish, click "Save" in the top left corner. Changes may take up to 15 minutes to appear on your live site. 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).

You can update all these settings at any time.

The layout section controls where the Fit Quiz button appears on your product pages (PDP) and its width.

Start by adjusting the width of the button – choose full width to span the entire placement area, or fit content to match the width of your text and icon.

Example for the "full width" setting:

Example for the "fit content" setting:

Today, Fit Quiz is used by 1,200+ fashion online-shops around the world. So we've got a lot of data on the best practices for the design and the placement of the button, that leads to the highest engagement metrics and optimal UX.

This is achieved via the "Automatic button placement" which would place the button right under the size selector/attributes. This option is always active by default and recommended for shops, that don't have technical resources for custom placements.

If you wish to go with a custom placement of the button, start by turning the "Automatic button placement" off.

You will then have to fill in and select the following:

1. Placement – e.g. where the button should be injected on the page. Choose between:

All of these options refer to the placeholders (see below) and where the Fit Quiz button should be placed in relation to these.

2. Placeholders – specify the placeholders, where the Fit Quiz button appear, based on the layout of your theme and product templates.

For more information about CSS selectors and how to find them on your page, please check out this guide.

NOTE: both placeholders must be saved with valid values. Leaving them empty will prompt an error message.

Here you can choose colors for the key elements of the buttons, such as

Simply use the color picker or enter a hex code to set each element.

Icons can make the Fit Quiz button stand out and add more clarity on what shoppers should expect. Our research shows, that using an icon increases the click rate of the button by 53%.

There are a few options to choose from:

You can further fine tune the icon's appearance by adjusting these settings:

The actual text of the button is edited on the "Text and Languages" page in the app – simply go to "Settings" and select a language you want to edit the text for.

Customization options of the visual appearance of the text are available here in the editor.

Here's what can be edited:

The Fit Quiz call-to-action can be displayed both as a simple text (with a link) or styled as a button with borders. The latter typically shows better results, when it comes to visibility of the call-to-action and the overall click rate.

You can configure borders by selecting from the following options:

Padding is used to control the internal spacing within the button itself. For example, if to add more space between the borders and the text, if you're using a version of the button with borders.

You can add vertical padding and horizontal padding by adjusting the values in the respective fields.

Margin, on the other hand, determines the external spacing between the Fit Quiz button and the other adjacent elements that surround it on the product page.

Add extra margins horizontally, at the top (above the button), or at the bottom (below the button) to ensure proper visual separation and prevent the button from appearing cramped or too close to neighboring page elements.