Livestream
      Back to home
      1. Help Center
      2. Livestream

      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)
      • New channels will be default to light theme.

      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.

      Detailed Feature Enhancements

      1. Classic Player Style Retains Classic Video Header Controls

      • The classic player will continue using the traditional video header controls, maintaining the familiar experience.
      • Image Comparison: 

      2. Product Card Layout

      • Classic: Vertically stacked product cards with chat side by side 
      • Modern: Horizontally swipeable product cards for better navigation.
      • Image Comparison: 

      3. Chat Support in Classic Mode

      • The classic player will now support the modern chat experience.
      • Image Comparison: →

        4. Collapsible Chat History in Classic Player

        • Existing: The classic player did not support chat history collapsing.
        • New: Users can now collapse the chat history when needed.

        5. Multiple Interaction Support in the New Player

        • The new classic player now allows multiple interactions at the same time for a seamless experience.
        • Image Comparison: →

        6.Trivia Giveaway Support

      • The trivia giveaway is now supported on the New Classic player.

      For a comprehensive breakdown of changes, refer to the Changes for Classic Player Styles document.