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.
- First you will need to start a Reactive stream and toggle on "Go Live" to view the live stream on your site.
- 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
- Next you will need to select the Online Store sales channel in the Shopify Menu.
- Then Select "Edit code" under the actions dropdown menu.
- 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.
- You can then write a line of CSS using the
#reactive-app#reactive-app#reactive-app .kvusXzselector as shown below. Here I am turning the background of the header pink.
- Save the style sheet by clicking "Save", and you should now see a pink background for the live stream header.
You can repeat these instructions with any of the elements within the live stream.