For more advanced customizations, you can use custom CSS to further modify your quiz.
​Please note: some CSS changes will only show in the live quiz flow and the preview, not while in the editor page.

If you have Lantern connected to Claude or ChatGPT, you can ask the AI assistant to create and apply custom CSS to your quiz. If you haven’t connected an AI assistant yet, see Connect Lantern's MCP to Claude or ChatGPT.

For more accurate results, first preview your quiz and use your browser’s Inspect tool to select the and copy the perfect-product-finder element. Paste into your Claude or ChatGPT conversation, so that the assistant has access to the page structure and markup it needs to target the correct part of the quiz you're trying to edit.

Next, describe the visual change you want the AI to make.

For example:

“Use the element as a reference and update the CSS so the welcome page content blends with the page background instead of appearing inside a white card. Keep the layout responsive on mobile and make sure the changes remain accessible.”

Pro tip: When asking AI to create or modify CSS, mention that the design should remain responsive on smaller screens. Where applicable, also ask it to preserve accessibility requirements.

If you prefer to make your own CSS changes, you can add or edit custom CSS directly in Lantern using the CSS editor.

To start adding custom CSS for your quiz:

The following classes can be used to customize various elements of the quiz:

.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 percentage - 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)

.discount-code-badge (Discount code badge)

.highlight

In order to use .highlight, you need to wrap words from a question, answer, or anywhere in the quiz that is visible in double square brackets in order to customize what is in between them with CSS. You can also target specific questions and sections in the quiz, so you won’t be limited to applying the same customization throughout the quiz.

For example

would only customize the text you put in between double brackets on the question 5 page of the quiz.

.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)

.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 description, on answer options with and without images (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-icon (answer options on Text & emoji questions - the image you uploaded or linked to show in place of the answer's emoji, on answers that have one)

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

.answer-image (answer options WITH images, on image-based questions - answer image)

.answer-image-container (answer options WITH images, on image-based questions - answer image container)

.answer-image-text-container (answer options WITH images, on image-based questions - 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)

.layout-image (Layout image wrapper)

.session-file-upload (the upload field on file upload questions)

These classes apply when a question has a help popup, the line under the question that opens a card with more explanation.

.question-help (the wrapper holding the link under the question)

.question-help-link (the line customers click, for example Why we ask this?)

.question-help-backdrop (the dimmed layer over the quiz while the popup is open)

.question-help-popup (the popup card itself)

.question-help-close (the x that closes the popup)

.question-help-body (the text inside the popup)

Slider Layout

.input-box-container (container around the slider and its scale labels, excluding the Next question button)

.input-slider-bottom-section (bottom section of the slider question, including the slider, scale labels, and Next question button)

Slider Component

.rc-slider (overall slider container, including the slider rail, track, handle, and scale markers)

.rc-slider-rail (unfilled background line of the slider)

.rc-slider-track (filled line that shows the selected value)

.rc-slider-handle (draggable circular slider handle)

.rc-slider-mark (container for the slider scale labels)

.rc-slider-mark-text (individual slider scale label, such as 0, 1, 2, and so on)

.rc-slider-mark-text-active (slider scale label that is active based on the selected value)

Single Choice Slider

These classes apply when a text single choice question has Display answers as set to Slider:

.answer-slider (the whole slider)

.answer-slider-readout (the selected answer shown above the slider)

.answer-slider-track

.answer-slider-labels

.answer-slider-label

.answer-slider-label-active

Number Slider Units

These classes apply to the unit switch on number sliders, such as height and weight:

.input-slider-units (the unit switch)

.input-slider-unit

.input-slider-unit-active

A Date Field question lets customers enter a date in one of three ways: Dropdowns (the default), Typed digits or the Browser date picker. The browser date picker is provided by the customer's browser or device, so it may look different depending on the device or operating system.

.date-input-row
​.date-input-field--day
​.date-input-field--month
​.date-input-field--year
​.date-input-label
​.date-input-error

Every part of the dropdown has its own CSS class, so you can customize its appearance using the quiz's custom CSS editor.

.answer-dropdown (the whole dropdown, including the field and list)

.answer-dropdown-field (dropdown field, including its border, background, corners, and padding)

.answer-dropdown-input (text inside the field, including the placeholder and typed search)

.answer-dropdown-search-icon (search icon, shown only when the dropdown is searchable)

.answer-dropdown-chevron (arrow at the end of the field)

.answer-dropdown-chip (selected answer tag in a multiple-choice dropdown, including its remove button)

.answer-dropdown-list (open dropdown list, including its border, shadow, and height before scrolling)

.answer-dropdown-option (individual answer row in the dropdown list)

.answer-dropdown-empty (the No matches message when a search has no results)

Inside each answer row, .answer-text styles the answer text and .answer-description styles its description, just like regular answer buttons.

You can also target selected or unavailable answers:

For example, to limit the height of the dropdown list before it scrolls, highlight selected answers, and change the color of matching search text:

.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)

.name-input-container (the first name field)

.last-name-input-container (the last name field, shown when the Optin Page asks for a last name)

.phone-input-section (the phone field)

.email-suggestion (the "Did you mean" email suggestion shown under the email field when the email check is connected)

.shop-sign-up (the Sign up with Shop box)

.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)

.gdpr-container (container of the GDPR)

.gdpr-wrapper (wrapper for the GDPR)

.gdpr-text (GDPR Checkbox text)

.gdpr-checkbox (Checkbox of the GDPR)

.gdpr-link (GDPR Link)

.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)

.match-tooltip-row (individual row inside the match score tooltip)

.match-tooltip-icon (check or cross icon displayed in a tooltip row)

.match-tooltip-label (text displayed in a tooltip row)

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

.results-back-link (the Go back link next to Start over; it also has .back-button)

.add-all-to-cart-container (container of the Add all to cart button)

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

.add-all-total (the total price inside the button, when Show the total price is on)

.quantity-selector (the whole quantity selector / stepper control)

.quantity-button (both the minus and plus buttons)

.quantity-minus (the minus button only)

.quantity-plus (the plus button only)

.quantity-glyph (the minus or plus symbol inside the button)

.quantity-value (the value cell that displays the selected quantity)

.quantity-number (the animated number inside the value cell)

.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)

These classes apply when the Replace link is turned on, the link under each recommended product that swaps it for the next best match.

.replace-link-container (the row under the Add to cart button that holds the link)

.replace-link (the Replace link customers click)

.replace-icon (the icon in front of the word Replace)

Page Layout lets you change the order of the elements on your Results Page, including the headline, product recommendations, buttons, email sign-up and Dynamic Content Blocks. To learn how to rearrange them, see the Page Layout section of Set-up your Results Page.

If you change the order of sections on your Results Page using Page Layout, some of the page's CSS structure changes. Each section keeps its existing CSS classes, but the following selectors are used for the updated layout:

.results-layout (main wrapper for the Results Page layout)

.results-content-blocks (rows containing Dynamic Content Blocks)

Each Dynamic Content Block also has a data-block-id attribute containing its ID, which you can use to target a specific block with CSS.

Please note: After changing the section order, the previous .results-top-section and .results-bottom-section wrappers are no longer used. If your existing CSS targets these wrappers, you may need to update it.

You can use the following CSS classes to customize the Email Sign-up section on the Results Page.

.results-email-section (the entire Email Sign-up section)

.results-email-heading (email sign-up headline and the message shown after sign-up)

.results-email-subheading (email sign-up subheadline)

.results-email-form (email sign-up form)

.results-email-submit-button (email sign-up button)

The name and email fields, along with the consent checkbox, use the same CSS classes as the Email Capture Page, such as .name-input-container, .email-input-container, and .gdpr-text.

To apply CSS only to the Email Sign-up section on the Results Page, start your selector with .results-email-section.

For example:

This changes the consent checkbox text to blue only in the Results Page Email Sign-up section.

These classes apply when share buttons are turned on, on the Welcome page, the Results page or both.

.share-buttons (the whole block: heading, buttons and the Link copied message)

.welcome-share (the same block, on the Welcome page only)

.results-share (the same block, on the Results page only)

.share-buttons-heading (the heading above the buttons)

.share-buttons-list (the row of buttons)

.share-button (every button)

.share-button-facebook, .share-button-x, .share-button-whatsapp, .share-button-pinterest, .share-button-email, .share-button-copy and .share-button-share (one button each)

.share-buttons-copied (the Link copied message)

For example, to center the share buttons on the Welcome page without moving the Start button:

For more examples with screenshots, such as bigger buttons, brand colors, square buttons and your own icons, see Add share buttons to your quiz.

.ql-button (Content block button)

.ql-video (Embedded video)

Please note: Content block images and text have short, random-looking class names that change over time, so they aren't listed here. Avoid writing CSS against names like these.

.product-block-container (product block container)

.product-image (product image)

.results-section (results section)

.ql-button (Dynamic Content block button)

.ql-video (Embedded video)

.product-block-container img (Dynamic content block image element)

.transition-screen (transition screen)

.transition-headline (transition screen headline)

.transition-subheadline (transition screen sub-headline)

.transition-subheadline-container (sub-headline container)

.transition-button (transition screen next button)

.transition-button-container (transition screen next button container)

.transition-screen img (transition screen image element)

Lantern includes a .location selector, which allows you to target elements on specific quiz pages. This helps apply custom styles only to certain pages, such as a specific question or the results page.

You can use the following selectors:

.location-welcome → Targets the Welcome Page

.location-questions-1 → Targets Question 1

.location-questions-2 → Targets Question 2, and so on

.location-results → Targets the Results Page

For example:

This would change the question heading color to blue only on Question 2.

Note: The older Welcome Page selector, .location- without any suffix, still works. A quiz without a Welcome page has no .location-welcome.

For more tutorials and support, visit our website or contact our support team.