Setting up Interactive Player on Shopify

This article outlines the steps to successfully add the Stage TEN Interactive Player onto a Shopify Store webpage, enabling live, interactive commerce! All the steps listed below must be completed under the Shopify Store’s Admin Page.

Click here for steps on how to configure your entry point for the Shop App.

Add Interactive Player

Install Sales Channel

This step is only required if the Stage TEN Sales Channel is not installed on the Shopify Store.   You will need to accept the usage charges.  Note: There are no monthly charges. 

If it already is, then proceed to ‘Obtain Channel ID’.

1. Go to Stage TEN Live Shopping, in the Shopify App Store.
2. Click Add App.
3. You will be prompted to create a Stage TEN account, and then redirected automatically to your Stage TEN Dashboard.

Note: Any products that will be featured during a live stream must be included in both the Stage TEN and Shop Sales Channels.

Click here for steps on how to make products available.

Obtain Channel ID

The Channel ID is an identifier unique to each Stage TEN account. Once the new Stage TEN section has been created for the store, we will use it there.

1. Go to the Overview section of the Stage TEN Sales Channel.
2. Locate Embed: within the Watch your broadcast section.
3. Click Copy and paste this information somewhere where it is easily accessible for later:
   1. The information should resemble this (note that this is just an example): 
      <iframe src="https://play.stageten.tv/embed/cd56ae07-7cf3-4d4c-bffa-bdeb1afccf00" title="Stage TEN Interactive Player" allow="fullscreen; autoplay" frameborder="0" style="width: 1410px; height: 600px"></iframe>
   2. The information highlighted in red is what is required for the next steps. This is the Channel ID.

Create New Section

Here we will create the new liquid section that will house the Stage TEN Interactive Player.

1. Go to the Online Store Sales Channel. 
2. Click the ellipsis (...) next to the Customize button, then Edit code.
3. Locate the Sections folder and expand it.
4. Click on Add a new section.
5. With the liquid radio button selected, enter “stage-ten-player”
6. Click Done.

Edit Page Code

Before proceeding with the next steps, be sure to clear out the default code that is autogenerated with the newly created section.

1. In the empty section, paste the following code:

{
  "name": "Stage TEN Live Player",
  "limit": 1, // limits the number of instances that can be included on a page
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Stage TEN"
    }
  ],
  "blocks": [
    {
       "name": "Live Card",
       "type": "live",
       "limit": 1
     }
  ],
  "presets": [
    {
      "name": "Stage TEN Live Player",
      "settings": {
        "title": "Stage TEN"
      },
      "blocks": [
        {
          "type": "live"
        }
      ]
    }
  ]
}

 <center>
<div id="stage-ten-wrapper" style="width: 90%; position: relative">
  <iframe
    src="https://play.stageten.tv/embed/ADD-CHANNEL-ID-HERE?splashImageURL=https%3A%2F%2Fstageten.tv%2Fhubfs%2Ffolder%2Fhorizontal%2520image.jpg&splashImageURLVert=https%3A%2F%2Fstageten.tv%2Fhubfs%2Ffolder%2Fvertical%2520image.jpg&accentColor=000000"
    title="Stage TEN Interactive Player"
    style="width: 90%; height: 100%; position: relative; left: 0; top: 0"
    allow="fullscreen; autoplay"
    frameBorder="0"
  >
  </iframe>
  <script>
    const updateSize = () => {
      const stageTenWrapper = document.getElementById('stage-ten-wrapper')
      const currentWidth = stageTenWrapper.clientWidth
      if (currentWidth > 1000) {
        // Desktop
        stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
      } else {
        // Mobile
        stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
      }
    }
    window.addEventListener('load', updateSize)
    window.addEventListener('resize', updateSize)
  </script> </div>
 </center>

1. The following items in the code snippet can be modified:
   1. Channel ID
      1. Your unique ID, connected to your account.
      2. This was obtained in an earlier step. 
   2. splashImageURL:
      1. This is the horizontal holding card that will appear on your player, when you are not LIVE.
      2. The image should be located from an accessible URL and must be encoded.
         1. To encode the URL use this tool to paste it and encode: URL Encoder
      3. PNG, JPEG, and GIF can be used here
      4. The asset must be 16x9
   3. splashImageURLvert:
      1. This additional, vertical holding card will appear on your player when you are not LIVE.
      2. Image should be located from an accessible URL and must be encoded.
         1. To encode the URL use this tool to paste it and encode: URL Encoder
      3. PNG, JPEG and GIF can be used here
      4. Asset must be 9x16
   4. accentColor:
      1. Allows you to customize the colours used on the Chat, SHOP and VOTE buttons
      2. Uses HEX code, e.g. the code for green 00FF00.
2. Once the code has been updated click Save.
3. Click Exit at the top left of the screen.

Add Section to Store Site

Stage TEN Interactive Player can be embedded on your store’s main page or on its own dedicated page.

1. Return to the Online Store Sales Channel. 
2. Click Customize under Themes.
3. Navigate to the Page where the Stage TEN player will reside.
4. Click Add Section in your Template.
5. Search for Stage TEN and click the Section to add it to your page.
6. Position the newly added Section and click Save.

If you have any questions or require additional assistance, please contact Terrance (terrance@stageten.tv)