By branding your flow you can make it match the look and feel of your storefront, making it a seamless and familiar experience for your customers.

To get started, open your flow in the flow builder:
Open the flow in the Shopify admin app dashboard from the Flows overview, and click Edit in flow builder.
In the flow builder, select Theme settings at the bottom left of the screen. It will look similar to the image below:

Colors

You can change the Primary color to your brand color, this color is used for the main buttons and accents in the flow. Additionally you can set the background to match.

Font

Select a font for the flow in the Typography section. We currently support the most popular Google fonts, so we're confident there should be one that matches your brand.

Logo

Upload your logo in the Logo section, it will be shown in the top left of the finder.

Custom CSS

Use custom CSS to further modify your flow. Please note that CSS changes will only show in the live quiz flow and the preview, not while in the editor page. If you need help with custom CSS for your flow reach out to our live chat support and we can help!

The following classes can be used:

-> .buttons

-> .image

-> .background

-> .price

-> .match

-> .result

-> .loading

-> .welcome-heading

-> .welcome-subheading

-> .question-heading

-> .question-subheading

-> .email-heading

-> .email-subheading

-> .result-heading

-> .result-subheading

Email Capture Page

-> .optin-skip (for the "No Thanks" link on the Email Capture page)

Answers Page

-> .answer (for the individual answer container)

-> .answer-text (for the text in an answer - used for text-only and emoji answers)

-> .answer-text-with-image (for the text in an answer - used for answers accompanied by images)

-> .answer-image (for the image used in answer)

-> .answer-image-container (for the image container - e.g. when you modify the height of the image you also need to modify the height of its container)

-> .answer-description (for the optional description which can be used in an answer)

Additional settings

There are some additional settings you can configure for your flow:

• Display progress bar: toggle the progress bar at the top on or off.

• Display question indicator: toggle the question indicator at the top on or off.

• Language: set the language in which your flow is displayed. For more info please check out our translations guide.

This guide was last modified on March the 6th 2023.