Documentation/ Sections /Opaline style quiz
Contact us
Install
03GENERAL

Opaline style quiz

This page explains how “Opaline style quiz” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Opaline style quiz

This page explains how “Opaline style quiz” actually behaves, which data it depends on, and what its settings change.

Used in templates
page.take-the-skin-quiz.json
IMPLICIT BEHAVIOR

What the theme does automatically

  • →

    Signup uses Shopify’s customer form; the theme does not create a separate subscriber database.

CONFIGURATION

Understand the settings

Display

Choose how the section or its trigger appears to visitors.

Display modedisplay_mode
Default: section · Options: Normal section, Drawer with floating button

Recommendation assistant link

The link opens the global virtual assistant. It remains hidden when the assistant is disabled.

Show sizing help linkshow_sizing_help_link
Default: enabled
Link labelsizing_help_label
Default: Je ne trouve pas ma taille
Assistant keysizing_help_key
Default: sizing-help
Floating Button Textfloating_label
Horizontal desktop positionfloating_desktop_side
Default: right · Options: Left, Right
Vertical desktop positionfloating_desktop_y
Default: 78 · Range: 0–100%
Movable horizontal positionfloating_mobile_side
Default: right · Options: Left, Right
Mobile vertical positionfloating_mobile_y
Default: 84 · Range: 0–100%
Floating button sizebutton_size
Default: 3.6 · Range: 1–5rem
Button text on desktopfloating_text_desktop
Default: hover · Options: Always visible, Visible on hover, Masked
Button text on mobilefloating_text_mobile
Default: hidden · Options: Visible, Masked
Position of text around buttonfloating_label_position
Default: left · Options: On the left, Right, Above, Below
Icon sourcefloating_icon_source
Default: builtin · Options: Integrated icon, Picture, Custom SVG
Integrated iconfloating_icon
Default: sparkle · Options: Sparkle, Hanger, Measurement, Arrow, More
Icon imagefloating_icon_image
Custom SVGfloating_icon_svg

Paste a simple SVG.

Drawer widthdrawer_width
Default: 760 · Range: 420–980px
Blur glassglass_blur
Default: 16 · Range: 0–40px
Top marginpadding_top
Default: 96 · Range: 0–180px
Low marginpadding_bottom
Default: 96 · Range: 0–180px

Introduction

Complete the texts and visuals presented at the start of the course.

Eyebrowkicker
Titletitle
Introductory textintro
Default question imagefallback_image

Navigation

Choose the main menu and navigation opening behavior.

Automatically move to the next questionauto_advance
Default: enabled
Previous button textprevious_label
Next button textnext_label
End button textfinish_label

Email capture

Configure the optional email collection step and its validation messages.

Request email before resultenable_capture
Default: disabled
Capture eyebrowcapture_kicker
Title capturecapture_title
Text capturecapture_text
Email labelemail_label
Placeholder emailemail_placeholder
Email buttonsubmit_label
Make consent mandatoryrequire_consent
Default: enabled
Consent textconsent_text
Show a link to see the result without emailallow_skip_email
Default: enabled
Link text without emailskip_label
After email captureresult_behavior

Choose whether the result remains in the quiz or directs to the configured destination.

Default: inline · Options: Show result on this page, Redirect to result page
Invalid email messageinvalid_email_message
Consent messageconsent_error_message
Message loadingloading_message
Message if sending failsfallback_message

Recommended products

Set the title and number of products offered in the quiz results.

Product surtitlesproducts_kicker
Product titleproducts_title
Number of products displayedproducts_limit
Default: 6 · Range: 1–12
Show all selected productsshow_all_products
Default: enabled

Rescue result

Customize the displayed profile when no specific results can be determined.

Eyebrow fallback resultfallback_result_kicker
Fallback result titlefallback_result_title
Fallback result textfallback_result_text

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme
Default: disabled
Paletteopaline_color_scheme
Default: scheme-1

Title

Alignment on desktopopaline_heading_alignment
Default: inherit · Options: Keep the design, Left, Center, Right

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px
Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px
COMPOSITION

Available blocks

Questionquestion

Add this block only when it provides useful information to the journey.

Resultresult

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

  • ✓

    Content remains readable in every color scheme.

  • ✓

    Labels match the storefront language.

  • ✓

    Displayed promotions match Shopify rules.

  • ✓

    Interactions remain accessible by keyboard and touch.