"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: