Back to Support Home

Can I customize the stream to fit my brand?

Reactive Live Shopping does not currently provide any method of branding the live stream within the Reactive app. However, if you have experience with CSS, you can do some light theming by targeting the Reactive stream in your Shopify theme's CSS. Below is a quick example.

  1. First you will need to start a Reactive stream and toggle on "Go Live" to view the live stream on your site.
  2. Next You will need to use your browser's developer tools to inspect the element you want to target with CSS. Here I am targeting the header element with the CSS selector #reactive-app#reactive-app#reactive-app .kvusXz.Inspect live stream
  3. Next you will need to select the Online Store sales channel in the Shopify Menu.Go to Online Store sales channel
  4. Then Select "Edit code" under the actions dropdown menu.Select edit code
  5. You will then need to find a CSS file within the theme to add your styles to. This theme has all of its CSS files in the assets directory.
  6. You can then write a line of CSS using the #reactive-app#reactive-app#reactive-app .kvusXz selector as shown below. Here I am turning the background of the header pink.Write custom CSS
  7. Save the style sheet by clicking "Save", and you should now see a pink background for the live stream header.Refresh store

You can repeat these instructions with any of the elements within the live stream.