How to Set Up the Skin Quiz Section
The Skin Quiz section lets you create a guided quiz that recommends a routine or result based on customer answers.
This section is useful for beauty, skincare, wellness, haircare, or product recommendation flows where customers answer a few questions and receive a recommended routine.
The section can display:
- Intro screen
- Step-by-step questions
- Progress indicator
- Result panels
- Recommended products
- Add routine to cart button
- Restart quiz option
- Custom background animation
- Start button attention cue
- Custom color controls for the background animation and cue
This section is designed as an on-page quiz and product recommendation tool. It does not collect emails by default and does not replace a full quiz app with advanced analytics, customer profiles, or email capture.
STEPS:
1. Add the Skin Quiz Section
To add the section:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template where you want to add the section.
- Click Add section.
- Select Skin quiz.
- Add or edit Question blocks.
- Add or edit Result blocks.
- Configure the section settings.
- Click Save.
The section requires at least:
- One Question block
- One Result block
If the section has no questions or no results, the quiz cannot run.
2. Configure the Intro Screen
The intro screen appears before customers start the quiz.
Intro settings:
| Setting | Description |
|---|---|
| Heading | Adds the main quiz title. |
| Heading size | Controls the visual size of the heading. |
| Heading tag | Sets the HTML tag used for the heading. |
| Subheading | Adds short text above the heading. |
| Intro text | Adds the intro description. |
| Intro button label | Sets the button text customers click to start the quiz. |
| Start button attention cue | Adds an optional visual cue to draw attention to the start button. |
| Cue color | Sets the color of the start-button attention cue. |
| Show progress | Shows or hides the quiz progress indicator. |
When customers click the intro button, the first question appears.
3. Configure the Start Button Attention Cue
The Start button attention cue helps draw attention to the quiz start button on the intro screen.
Available options:
| Option | Description |
|---|---|
| None | No attention cue is shown. |
| Sketched arrow | Shows a sketched arrow pointing toward the start button. |
| Pulsing glow | Shows a pulsing glow around the start button. |
To configure it:
- Open the Skin quiz section.
- Find Start button attention cue.
- Choose None, Sketched arrow, or Pulsing glow.
- Optional: choose a Cue color.
- Click Save.
Behavior:
| Setup | Result |
|---|---|
| Cue color is selected | The attention cue uses the selected color. |
| Cue color is empty | The attention cue uses the section's Highlight color. |
| Start button attention cue is set to None | The cue color will not be visible. |
Important:
The attention cue is decorative and may be switched off for visitors who prefer reduced motion.
4. Add Question Blocks
Each Question block represents one quiz step.
The section supports up to 6 Question blocks.
Question settings:
| Setting | Description |
|---|---|
| Title (Question) | Adds the question text. |
| Help (Helper text) | Adds optional helper text below the question. |
| Option label (Answer) | Adds the answer text. |
| Option hint (Answer hint) | Adds optional helper text for the answer. |
| Option result (Scores toward) | Selects which result this answer should count toward. |
Each Question block can include up to 4 answer options.
To set up a question:
- Add a Question block.
- Enter the question title.
- Add answer labels.
- Optional: add answer hints.
- For each answer, choose the matching Option result.
- Click Save.
Important:
The Option result setting controls which result receives a vote when customers select that answer.
5. Add Result Blocks
Each Result block represents one possible quiz outcome.
The section supports up to 6 Result blocks.
Result settings:
| Setting | Description |
|---|---|
| Heading | Adds the result title. |
| Description | Adds explanation text for the result. |
| Product 1 (Step 1 product) | Adds the first recommended product. |
| Product 1 note (Why this step) | Adds a short note for the first product. |
| Product 2 (Step 2 product) | Adds the second recommended product. |
| Product 2 note (Why this step) | Adds a short note for the second product. |
| Product 3 (Step 3 product) | Adds the third recommended product. |
| Product 3 note (Why this step) | Adds a short note for the third product. |
Each Result block can show up to 3 products.
If products are selected, the result can show an Add routine button that adds the selected routine products to cart.
6. How Results Are Matched
Each answer option points to one result.
For example:
| Answer option | Option result |
|---|---|
| Tight and dry | Result 1 |
| Shiny through the T-zone | Result 2 |
| Red or reactive | Result 3 |
When the customer completes the quiz, the section counts which result received the most selected answers.
The result with the highest number of selected answers is shown.
Important:
- Each answer can point to Result 1, Result 2, Result 3, Result 4, Result 5, or Result 6.
- These result numbers match the order of the Result blocks.
- Make sure you have enough Result blocks for the result numbers used in the Question blocks.
- If multiple results have the same score, the earlier result wins.
7. Configure Recommended Products
Each Result block can include up to 3 recommended products.
To add routine products:
- Open a Result block.
- Select Product 1, Product 2, or Product 3.
- Optional: add a product note for each product.
- Click Save.
The result panel can display:
- Product image
- Product title
- Product price
- Product note
- Add routine button
The Add routine button adds the selected products from the result to Cart.
Important:
- The button adds the selected or first available variant of each product.
- Each routine product is added with quantity
1. - If no products are selected in a result, the Add routine button will not appear.
8. Configure Background and Layout
The section includes background and layout settings.
| Setting | Description |
|---|---|
| Background animation | Controls the decorative background animation style. |
| Background intensity | Controls how strong the background animation appears. |
| Background animation color | Sets the color used by the background animation. |
| Background image | Adds a custom background image when the background animation is set to image. |
| Section width | Controls the section container width. |
| Show divider | Adds a divider above the section. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Background animation options:
| Option |
|---|
| None |
| Aurora |
| Mesh |
| Rings |
| Sheen |
| Liquid |
| Silk |
| Grid |
| Waves |
| Image |
Background intensity options:
| Option |
|---|
| Subtle |
| Medium |
| Strong |
Section width options:
| Option |
|---|
| Narrow |
| Default |
| Full |
Background animation color behavior:
| Setup | Result |
|---|---|
| Background animation color is selected | The background animation uses the selected color. |
| Background animation color is empty | The background animation uses the section's Highlight color. |
| Background animation is set to None | The animation color will not be visible. |
Important:
The background animation is decorative and may be switched off for visitors who prefer reduced motion.
9. Configure Highlight and Colors
The section supports heading highlight and custom colors.
Highlight settings:
| Setting | Description |
|---|---|
| Enable highlight | Enables highlight styling for italic text. |
| Highlight style | Selects the highlight effect. |
When using highlight settings, please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
Color settings:
| Setting | Description |
|---|---|
| Use custom colors | Enables custom color controls for the quiz. |
| Text | Sets the quiz text color. |
| Background | Sets the quiz background color. |
| Button label | Sets the quiz button text color. |
| Button background | Sets the quiz button background color. |
| Highlight | Sets the highlight color. |
| Background animation color | Sets the color used by the background animation. |
| Cue color | Sets the color used by the start-button attention cue. |
If Use custom colors is not enabled, the section follows the theme's default color settings for the main section colors.
Important:
- Background animation color and Cue color are optional.
- If Background animation color is empty, it uses the section's Highlight color.
- If Cue color is empty, it uses the section's Highlight color.
- This keeps the previous highlight-based behavior unless you choose separate colors.
10. Notes and Limitations
Please note the following behavior:
- The section needs at least one Question block and one Result block.
- The section supports up to 6 Question blocks.
- Each Question block supports up to 4 answer options.
- The section supports up to 6 Result blocks.
- Each Result block supports up to 3 recommended products.
- Answer options must be connected to a result using Option result.
- Result numbers match the order of the Result blocks.
- If multiple results have the same score, the earlier result wins.
- The quiz result appears before asking for any email.
- The section does not collect emails by default.
- The section does not store customer answers in Shopify admin.
- The section does not provide analytics or quiz reports by default.
- The Add routine button adds the selected routine products to cart.
- The selected or first available variant of each routine product is added.
- If a product has multiple variants, customers do not choose variants inside the quiz result.
- Background animation color is available in Be Yours version 9.4.0 or later.
- Start button attention cue and Cue color are available in Be Yours version 9.4.0 or later.
- If Background animation color is empty, the background animation uses the section's Highlight color.
- If Cue color is empty, the start-button attention cue uses the section's Highlight color.
- If Background animation is set to None, the animation color will not be visible.
- If Start button attention cue is set to None, the cue color will not be visible.
- Background animations and attention cues may be switched off for visitors who prefer reduced motion.
- For advanced quiz logic, email capture, analytics, or customer profile storage, use a dedicated quiz app.
Troubleshooting
If the Skin Quiz section does not work as expected, please check the following:
- Make sure you are using Be Yours version 9.3.0 or later.
- To use Background animation color, Start button attention cue, or Cue color, make sure you are using Be Yours version 9.4.0 or later.
- Make sure the section has at least one Question block.
- Make sure the section has at least one Result block.
- Make sure each answer option has an Option result selected.
- Make sure the result numbers used by answers match existing Result blocks.
- If a result does not show products, make sure products are selected in that Result block.
- If the Add routine button does not appear, make sure the Result block has at least one product selected.
- If the wrong result appears, check the Option result settings for each answer.
- If the background image does not appear, make sure Background animation is set to Image and a background image is selected.
- If the background animation color does not appear, make sure Background animation is not set to None.
- If the cue color does not appear, make sure Start button attention cue is set to Sketched arrow or Pulsing glow.
- If either color setting is empty, check the section's Highlight color.
- If highlight styling does not apply, make sure the text is italicized and Enable highlight is turned on.
- If animation does not appear, the visitor's browser may have reduced motion enabled.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to set up the Shoppable Video section
New Default Theme Look in Be Yours 9.4.0