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. For assistance with CSS styling and quiz design customizations please upgrade to our Enterprise plan.

The following classes can be used:

Generic

.main-container (the overall container for all quiz elements. This can be very useful for changing the background of the quiz)

.button (buttons such as Start, Next question, Add to cart, View more picks)

.progress-bar-container (the overall container for the progress bar)

.progress-bar (the part that shows the actual progress)

.progress-percentage (the progress pecentage - the text showing the completion percentage)

.navigation-left (left side of the navigation bar - showing the logo)

.navigation-center (center part of the navigation bar - showing the question number / progress)

.navigation-right (right side of the navigation bar - showing the Finish later / Close button)

.close-button (Finish later / Close button)

.close-button-text (Close button text)

.close-button-icon (Close button icon)

.logo-container (logo container)

.logo-wrapper (logo wrapper)

.logo (logo)

.question-progress (question progress - e.g. Question 1 / 4)

Welcome Page

.image-wrapper (image wrapper for layouts that feature an image)

.video-wrapper (video wrapper for layouts that feature a video)

.welcome-heading (heading or title)

.welcome-subheading (subheading or description)

.start-button (Start button)

.welcome-content (content on the Welcome page (heading, subheading and Start button))

.welcome-container (container for the content)

Question Pages

.back-button (Go Back button)

.back-button-icon (Go Back button icon)

.back-button-text (Go Back button text)

.question-form (question form - contains the questions, answers and submit button)

.question (question - wraps the question heading and subheading)

.question-heading (question heading or title - main question)

.question-subheading (question subheading or description)

.answer-text (answer options WITHOUT images- answer text)

.answer-description (answer options WITHOUT images - answer description (optional, by default smaller and displayed under the main answer text))

.answer-text-container (answer options WITHOUT images - answer text container (contains the answer text and the answer description))

.answer-checkbox (answer options WITHOUT images - checkbox (or radio button) next to the answer)

.answer-container (answer options WITHOUT images - answer container (contains the answer text, description and checkbox))

.answer-text-with-image (answer options WITH images - answer text)

.answer-image (answer options WITH images - answer image)

.answer-image-container (answer options WITH images - answer image container)

.answer-image-text-container (answer options WITH images - container for the image and the answer combined)

.answer (answer (the overall container for any type of answer))

.all-answers (all answers container)

.answers-section (answers section (parent of the answers container))

.next-question-button (Next question button)

.next-question-button-container (Next question button container)

.selected-answer (answer options WITH images used in multichoice questions- useful for changes such as border color)

Email Capture Page

.email-form (email form)

.email-icon (email icon displayed at the top of the form)

.email-icon-container (container of the email icon)

.email-heading (heading or title)

.email-subheading (subheading or description)

.email-input-container (input container where customers enter their email address)

.email-submit-button (email optin form button - Submit & get results)

.optin-skip (No thanks link - if customers don’t want to optin)

.optin-skip-container (container for the No thanks link)

.email-top-section (email form top section - contains the icon, title and description)

.email-bottom-section (email form bottom section - contains the input, button and skip link)

.email-button-container (email button container - contains the optin button and the skip link)

Results Page

.results-section (results section)

.results-container (results container)

.start-over-container (Start over container)

.start-over (Start over button)

.start-over-link (Start over link)

.start-over-icon (Start over icon)

.results-heading-section (section wrapping the heading and the subheading)

.results-heading-container (results heading / title container)

.results-heading (results heading)

.results-subheading (results subheading / description)

.results-top-3-products-container (top 3 products container)

.results-top-3-products (top 3 products)

.results-other-products-container (the rest of the products - after the top 3 recommendations - container)

.results-other-products (the rest of the products - after the top 3 recommendations)

.button-view-more-container (View more button container)

.button-view-more (View more button)

.product-card (product card)

.match-score-container (match score container (contains the actual match score and the corresponding icon)

.match-score (match score)

.match-score-icon (icon displayed next to the match score)

.match-score-tooltip (the tooltip that shows when hovering over the match score, with the match details)

.add-to-cart-button (Add to cart button)

.price (product price)

.product-title (product title)

.reviews-container (container for the rating / reviews, if any are displayed)

.product-container (container which includes everything in the product card, aside from the image)

.product-details (product details (title, price, reviews, rating)

.product-image-container (container for the product image)

.product-image (product image)

.positiveMatch ( the positive match text elements in the match score tooltip)

.negativeMatch ( the negative X match text elements in the match score tooltip)

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 May the 2nd 2023.