Return to Stage TEN

Storefronts using Vintage (1.0) Themes

A newer version of these instructions is available.

This article describes an older solution that is compatible with storefronts that are not built with a Shopify 2.0 theme.

If possible, you should use the current instructions instead.

Older Shopify storefront themes may not support all the latest Customization features or the Stage TEN Theme App Extension. In these cases, you may need to add a player embed to your storefront manually, or with the older instructions.

These older instructions have been preserved here.

Obtain Live Channel ID

The Live Channel Embed src is a URL 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 Stage TEN Sales Channel.

  2. Locate Channel ID: within the Stage TEN Connection section.

  3. Click Copy and paste this information somewhere where it is easily accessible for later.

Create New Section

  1. In the empty section, paste the following code, then click Save.

Shopify Theme Code: Stage TEN Player section
{% schema %}
{
"name": "Stage TEN",
  "settings": [
    {
      "type": "text",
      "id": "channel-embed-code",
      "label": "Stage TEN channel embed src"
    },
    {
      "type": "paragraph",
      "content": "You can find your embed src in the Destinations settings in the Pro Studio. For example: https://play.stageten.tv/embed/a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5"
    },
    {
      "type": "text",
      "id": "accent-color",
      "label": "Accent color (Ex: 6f2d33) (Optional)"
    },
    {
      "type": "text",
      "id": "splash-image-url",
      "label": "Splash image URL (horizontal) (Optional)"
    },
    {
      "type": "text",
      "id": "splash-image-url-vert",
      "label": "Splash image URL (vertical) (Optional)"
    },
    {
      "type": "text",
      "id": "live-title",
      "label": "Live player title (Optional)"
    },
    {
      "type": "text",
      "id": "vod-group-title",
      "label": "Past Broadcast Recordings group title (Optional)"
    }
  ],
  "blocks": [ 
    {
      "name": "Live Card",
      "type": "live",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "aspect-ratio",
          "label": "Optimize for Video Aspect Ratio:",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal (16:9)"
            },
            {
              "value": "vertical",
              "label": "Vertical (9:16)"
            }
          ],
          "default": "horizontal"
        }
      ]
    },
    {
    "name": "Past Broadcast Recording",
      "type": "vod-id",
      "settings": [
        {
          "type": "text",
          "id": "episode-id",
          "label": "Recording ID"
        },
        {
          "type": "paragraph",
        "content": "You can find the Recording ID in Pro Studio > Settings > Recordings > Embed Code. It is the last part of the recording's embed code src. For example: a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5"
        },
        {
          "type": "text",
          "id": "episode-title",
          "label": "Title to Display (Optional)"
        },
        {
          "type": "select",
          "id": "aspect-ratio",
          "label": "Optimize for Video Aspect Ratio:",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal (16:9)"
            },
            {
              "value": "vertical",
              "label": "Vertical (9:16)"
            }
          ],
          "default": "horizontal"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Stage TEN",
      "settings": {
        "channel-embed-code": "",
        "live-title": "Live Shopping",
        "vod-group-title": "Watch Past Broadcasts"
      },
      "blocks": [
        {
          "type": "live"
        }
      ]
    }
  ]
}
{% endschema %}{% capture splashImageParam %}{% if section.settings.splash-image-url != blank %}splashImageURL={{section.settings.splash-image-url}}&{% endif %}{% endcapture %}
{% capture splashImageParamVert %}{% if section.settings.splash-image-url-vert != blank %}splashImageURLVert={{ section.settings.splash-image-url-vert}}&{% endif %}{% endcapture %}
{% capture accentColorParam %}{% if section.settings.accent-color != nil %}{{ section.settings.accent-color | prepend: 'accentColor=' | append: '&' }}{% endif %}{% endcapture %}
{% capture liveEmbedSrc %}{{section.settings.channel-embed-code}}?{{splashImageParam}}{{splashImageParamVert}}{{accentColorParam}}{% endcapture %}{% for block in section.blocks %}
  {% case block.type %}
  {% when 'live' %}   
      <center><br><br>
        <h2>{{ section.settings.live-title }}</h2>                <div id="stage-ten-wrapper-live" style="width: 90%; position: relative">
          <iframe
            src={{liveEmbedSrc}}
            title="Stage TEN Live Player"
            allow="fullscreen; autoplay"
            frameborder="0"
            style="width: 100%; height: 100%; top:0; left:0; position: relative"
          >
          </iframe>
        </div>
      </center>
  {% endcase %}
{% endfor %}{% for block in section.blocks %}
  {% if block.type contains 'vod' %}
    <center><br>
        <h2>{{ section.settings.vod-group-title }}</h2>
    </center>
    {% break %}
  {% endif %}
{% endfor %}{% for block in section.blocks %}
  {% case block.type %}
    {% when 'vod-id' %}      {% capture wrapperId %}"{{'stage-ten-wrapper-' | append: block.settings.episode-id}}"{% endcapture %}
    {% capture embedSrc %}{{section.settings.channel-embed-code}}/vod/{{block.settings.episode-id}}?{{splashImageParam}}{{splashImageParamVert}}{{accentColorParam}}{% endcapture %}   
      <center>
        {% if block.settings.episode-title != blank %}
          <h4>{{block.settings.episode-title}}</h4>
        {% endif %}
        <div id={{wrapperId}} style="width: 90%; position: relative">
          <iframe
            src={{embedSrc}}
            title="Stage TEN Interactive Player"
            style="width: 100%; height: 100%; position: relative; left: 0; top: 0"
            allow="fullscreen"
            frameBorder="0"
          >
          </iframe>
        </div>
    </center><br><br>
  {% endcase %}
{% endfor %}<script>
  window.addEventListener('load', (event) => { 
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'live' %}
          updateSize("stage-ten-wrapper-live", "{{block.settings.aspect-ratio}}")
        {% when 'vod-id' %}
          updateSize("{{'stage-ten-wrapper-' | append: block.settings.episode-id}}", "{{block.settings.aspect-ratio}}") 
      {% endcase %}
    {% endfor %}
  })    window.addEventListener('resize', (event) => { 
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'live' %}
          updateSize("stage-ten-wrapper-live", "{{block.settings.aspect-ratio}}")
        {% when 'vod-id' %}
          updateSize("{{'stage-ten-wrapper-' | append: block.settings.episode-id}}", "{{block.settings.aspect-ratio}}") 
      {% endcase %}
    {% endfor %}
  })  function updateSize(wrapperId, aspectRatio) {
    var stageTenWrapper = document.getElementById(wrapperId)
    var currentWidth = stageTenWrapper.clientWidth
  if (aspectRatio == "horizontal") {
    if (currentWidth > 1233) {
      stageTenWrapper.style['height'] = Math.round(((currentWidth - 386) * 0.5625) + 24).toString() + 'px'
      }
      else if (currentWidth > 1000) {
      stageTenWrapper.style['height'] = Math.round(currentWidth * 0.5).toString() + 'px'
      } else {
      stageTenWrapper.style['height'] = 'calc(100vh - 50px)'
      }
    } else {
    if (currentWidth > 1000) {
      stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
      } else {
      stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
      }
    }
  }
</script>

Add Section to a Page

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.

  7. Paste the Stage TEN channel embed src, along with the previously copied Channel ID into the Stage TEN channel embed src section.

    • For example: https://play.stageten.tv/embed/a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5

  8. click Save.

Configure Your Stage TEN Section

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. Splash Image URL (Horizontal):

    • Appears in your player's wide/horizontal layout when you are not live.

    • Image should be located from an accessible URL and must be encoded.

      • To encode the URL use this tool to paste it and encode: URL Encoder

    • PNG, JPEG, or GIF

    • 16:9 aspect ratio

  2. Splash Image URL (Vertical):

    • Appears in the player's narrow/vertical layout when you are not live.

    • Image should be located from an accessible URL and must be encoded.

      • To encode the URL use this tool to paste it and encode: URL Encoder

    • PNG, JPEG or GIF

    • Asset must be 9x16

  3. Accent Color:

    • Allows you to customize the colours used on the Chat, SHOP and VOTE buttons

    • Uses HEX code, e.g. the code for green 00FF00.

  4. Live Title:

    • If entered, this will be displayed above your live player block.

  5. Past Recordings Group Title:

    • If entered, and the section contains any past broadcast recordings, this will be displayed above the first recording.

  6. Aspect ratio

    • In order to optimize the spacing around your player, select whether you plan to broadcast in Horizontal or Vertical orientation.

  7. Once the code has been updated click Save.

  8. Click Exit at the top left of the screen.

PreviousStream to a Shopify StorefrontNextStream to the Shop App

Last updated