Stream to a Shopify Storefront
Add your Stage TEN Interactive Player to a Shopify Storefront to enable live, interactive commerce!
In this article we will learn how to add your Stage TEN Interactive Player to your Storefront so viewers can watch your stream there.
Prerequisites:
You have installed the Stage TEN sales channel and connected your store to Stage TEN.
Option 1: Add the player to an existing page
To add your livestream to an existing page, such as your store's homepage, you will need to use Shopify's Customize functionality.
If your storefront is built with a Vintage (1.0) Theme, the instructions below may not work for you. Learn about alternatives here.
Add the Live Player app block to a Page Template
The Stage TEN Interactive Player can be embedded on any page in your store.
In the Shopify admin, go to the Online Store Sales Channel.
In Themes, click Customize.
Choose the template used for the Page where the Stage TEN player should appear.
Click Add Section in your Template.
Click Apps, then select the Live Player block to add it to your page.
Position and customize the newly added Section, then click Save.
Optional: Customize Your Live Player
If you wish, you can customize the appearance of the section live player. You can also add or remove blocks from the section, and even create multiple sections to achieve your desired appearance.
The following settings are available:
Accent Color:
Allows you to customize the colors used on the Chat, SHOP and VOTE buttons
To use your theme color, click the Connect Dynamic Source button.
Allow auto-play:
If selected, the live player will attempt to start playback as soon as the user opens the page.
Splash Image URL (Horizontal):
Appears in your player's wide/horizontal layout when you are not live.
Image must already be uploaded to a hosting service so you can copy a public URL for it.
Recommended: 16:9 aspect ratio. PNG, JPEG, or GIF.
Splash Image URL (Vertical):
Appears in the player's narrow/vertical layout when you are not live.
Image must already be uploaded to a hosting service so you can copy a public URL for it.
Recommended: 9:16 aspect ratio. PNG, JPEG or GIF.
Aspect ratio:
In order to optimize the spacing around your player, select whether you plan to broadcast in Horizontal or Vertical orientation.
Click Save, then Exit.
Tip: Hosting for Splash Images
You can upload images to your Shopify store (or get the url of an image from your store) by going to Content > Files. Find the image file, then copy the Link.
Alternatively, you can use a hosting service such as imgur to get a url for your image.
Option 2: Add `live` page to navigation
The Stage TEN sales channel will automatically add a page to your storefront where you can see your livestreams, found at <your-store-url>/pages/live.
If you want to use a dedicated page for your stream, this one is available to you. You can simply add this to your navigation menu.
Adding Interactive Replays
To add Interactive Replays to your storefront, you must first add the vintage Stage TEN Theme Section. This will be replaced with an app block in the future.
To add a recording to your section, click Add Block, then choose the Past Broadcast Recording block.
Enter the recording ID for the stream you want to embed in the settings for this block.
Click Save.
If you have any questions or require additional assistance, please contact Support (support@stageten.tv)
Related:
Last updated
