October 23, 2023

How to Setup Live Stream Widget

Duplicate Live theme
Create campaign
Configure campaign
Setup frontend widget on shopify theme
Go Live!

Duplicate Live Theme

As best practice, you should duplicate the live theme before setting up the widget, that way it doesn't interfere with anything live in your store, and it doesn't change any other themes.

To do that, on the shopify admin, go to Sales Channels > Online Store. On the live theme, click on the “...” (options) button (that's beside "Customize") and choose “duplicate”. Rename that theme to something you'll remember later.

Create campaign

Go to the NOW Live app on shopify admin: apps > NOW Live. Create a campaign by clicking on the “Create Campaign” button. Insert title, and optionally fill description and schedule information (these can be changed later at any time).

Now that you've created a campaign, let's configure it.

Configure Campaign

Configure your campaign by filling up the description, setting the schedule and adding notifications settings.

The campaign description is used for SEO purposes as well as in the storefront widget waiting screen.

The schedule is also used in the waiting screen to inform users when the Live stream will happen. If it's within a day, the widget displays a timer, else it just shows the date.

Configure Notifications

To configure notifications, just choose your provider (right now we only support klaviyo), and enter the provider api key and list ID.

Learn here how to get klaviyo api keys. And here, how to get the list ID.

Also, if you are using SMS notifications, remember to set it up correctly in klaviyo. Here's a guide on how to set up SMS for klavyio .

Setup frontend widget on shopify theme

After creating and configuring the campaign, you should be able to install the widget in an unpublished theme. To do so, inside of the campaign you just created, click on the “Setup Live Stream” button. A list of unpublished themes should popup, choose the theme you just created. The confirmation modal should be displayed. Confirm and proceed with the installation.

After it's installed on the theme, navigate to customizer by clicking on the “Go to customizer” button. This will take you to the theme that's been created in the page generated by the app.

To use the widget, click on “+ Add section”, on the popup, scroll down to “apps”, and select “Live Stream” from NOW Live.

Then, configure the app section by selecting the collection you wish to showcase in the live stream, and set up poster images for the waiting screen.

Go Live!