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.


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.

  1. In the Shopify admin, go to the Online Store Sales Channel.

  2. In Themes, click Customize.

  3. Choose the template used for the Page where the Stage TEN player should appear.

  4. Click Add Section in your Template.

  5. Click Apps, then select the Live Player block to add it to your page.

  6. 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:

  1. 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.

  2. Allow auto-play:

    • If selected, the live player will attempt to start playback as soon as the user opens the page.

  3. 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.

  4. 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.

  5. 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.

  1. To add a recording to your section, click Add Block, then choose the Past Broadcast Recording block.

  2. Enter the recording ID for the stream you want to embed in the settings for this block.

  3. Click Save.

How to Find a Recording ID
  1. Go to the Pro Studio > Settings > Recordings.

  2. Find the recording you want to add, and click on Embed Code.

    • If you don't see the Embed Code option, your current plan may not provide access to embedding Past Broadcast Recordings.

  3. The recording's embed code will appear, and you can copy the recording ID from the src. Make sure you copy only the portion after /vod/.


In the following embed code, the recording ID is a61c56d6-4fbb-48ac-8d89-8b7a7f59d018.

If you have any questions or require additional assistance, please contact Support (

Last updated