1. Help Center
  2. Shoppable Video

Light/Dark Mode, and Modern/Classic Product Card Design

How to Set up Theme 

Learn  how to configure the theme, specifically focusing on the dark and light options. Users can personalize the color theme of product cards, questions, polls, and in-stream Product Detail Pages (PDPs) to enhance their experience.

  1. Navigate to the Firework Business portal and choose the channel for which you would like to modify the video appearance.
  2. Access the settings menu and choose the 'Appearance' option. The Appearance Settings allow you to personalize the visual style of your player and embedded content throughout your entire Channel. 
  3. Next, click on the 'Edit' option, choose your desired theme from the dropdown menu, and then click 'Save' to apply your changes.

  4. Light/Dark theme for Product cards  - Button colors can be configured to align with the brand's color palette. The text color should be selected as either white or black, ensuring it meets contrast requirements for optimal readability.
       

  5. Light/Dark theme for Interactions 

    .     
  6. Light/Dark Theme for In-Stream Product Detail Pages (PDPs)
    .   
  • This setting will be applied to both SV and DS, affecting all existing videos, not just those created after the update.
  • The following components will respond to the selected theme:

    - Interactions, including polls, questions, product cards (carousel), giveaways, and links.

    - The player’s three-dot menu, email copy modal, and share drawer.

    - Livestream chat, shopping bag, cart, and full-screen Product Detail Pages (PDPs).

  • Existing channels will maintain the blended theme unless a specific theme is set. (meaning something dark something light)


Product card design 

Users can choose between modern and classic designs to customize the appearance of product cards. 

  1. Navigate to the Firework Business portal and choose the channel for which you would like to modify the player style.
  2. Access the settings menu and choose the 'Appearance' option.
  3. Next, click on the 'Edit' option, choose the desired player style  from the dropdown menu, and then click 'Save' to apply your changes.

.       

       Classic Product card                  Modern Product card          Modern Product card with                                                                                                                                Multiple products 

The attributes to change the product card design and the theme are;
For product card design: ui_player_style=“modern” or ui_player_style=“classic”
For theme: theme=“dark” or theme=“light”