The Skin Quiz section lets you create a guided quiz that recommends a routine or result based on customer answers.
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 effects
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. |
| Show progress | Shows or hides the quiz progress indicator. |
When customers click the intro button, the first question appears.
3. 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.
4. 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.
5. 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.
6. 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.
7. Configure Background and Layout
The section includes background and layout settings.
| Setting | Description |
|---|---|
| Background effect | Controls the visual background style. |
| Background intensity | Controls how strong the background effect appears. |
| Background image | Adds a custom background image when the background effect 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 effect 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 |
8. 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. |
If Use custom colors is not enabled, the section follows the theme's default color settings.
9. 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.
- 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.
- 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 effect is set to Image and a background image is selected.
- If highlight styling does not apply, make sure the text is italicized and Enable highlight is turned on.
- 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.
शेयर करना:
How to set up the Shoppable Video section