Live channel page layout

The live shopping channel can render as a single full-page block, or as independent mount points so your theme can place merchant HTML between sections (campaign banners, copy, dividers, and so on). The existing single-container embed is unchanged. Use the same production channel script for both layouts:

<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>

On non-Shopify or headless storefronts, set window.videowiseInfo.shop (and/or window.Shopify.shop) to your *.myshopify.com domain before the channel script runs. See Custom platforms.

Monolith (default)

One container receives the hero, live now, upcoming shows, and past recordings:

<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>
<div id="videowise_stream_channel"></div>

If #videowise_stream_channel is on the page, it always wins. Section containers on the same page are ignored.

Section layout (modular)

Omit #videowise_stream_channel. Place empty divs where each section should appear. Any HTML between them is left alone — Videowise only fills the mounts.

<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>

<!-- your merchant content -->
<img src="/campaign-banner.jpg" alt="" />

<div id="videowise_stream_channel_hero"></div>
<div id="videowise_stream_channel_livenow"></div>

<div class="store-divider">This week on live</div>

<div id="videowise_stream_channel_upcoming"></div>

<hr />

<div id="videowise_stream_channel_past"></div>

Container ids

Id	Section
`videowise_stream_channel`	Full channel (monolith). Takes precedence over the rows below.
`videowise_stream_channel_hero`	Subscribe / banner hero
`videowise_stream_channel_livenow`	Live now grid
`videowise_stream_channel_upcoming`	Upcoming shows
`videowise_stream_channel_past`	Past recordings
`videowise_stream_channel_shared`	Optional host for RSVP, sockets, and popups

You can use a subset of sections. A page with only #videowise_stream_channel_past still loads recordings. A missing or empty section stays empty when there is nothing to show (for example no live show is on air, or the hero banner is disabled in channel settings).

Shared container (optional)

RSVP, the channel socket, and popup portals are not tied to a visible section. They run from #videowise_stream_channel_shared. You do not need to add this div. If it is missing, the widget appends a hidden one to document.body. Add it yourself only when you want that host in a specific place in the DOM (for example outside a clipped layout wrapper):

<div id="videowise_stream_channel_shared"></div>

How it works

One React tree still owns channel settings, data fetching, sockets, RSVP, and autoplay. In section mode that tree mounts on the shared host and portals each section into the matching container. The same embed loader is used for both layouts. Any div whose id starts with videowise_stream_channel is enough to load the channel assets.

Styling tips

Videowise owns the look of each section. Keep theme CSS from fighting the embed:

Prefer class-scoped merchant styles. Avoid global rules on button, input, form, or * that cascade into Videowise UI (including the subscribe modal).
Do not put overflow: hidden on wrappers around the mounts — overlays and modals can be clipped.
Avoid forcing text-align, font-family, or color on ancestors of the mounts if you need Videowise defaults.
Do not duplicate hero copy/CTAs in merchant HTML if #videowise_stream_channel_hero is present — use the Videowise hero as the source of truth.

Example: merchant framing around sections

<script>
  window.Shopify = window.Shopify || {};
  window.Shopify.shop = 'your-store.myshopify.com';
</script>
<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>

<header><!-- your store header --></header>

<section class="live-hero-frame">
  <!-- decorative theme background only; no duplicate headline/CTA -->
  <div id="videowise_stream_channel_hero"></div>
</section>

<section>
  <h2>Live now</h2>
  <div id="videowise_stream_channel_livenow"></div>
</section>

<section>
  <h2>Upcoming shows</h2>
  <div id="videowise_stream_channel_upcoming"></div>
</section>

<section>
  <h2>Past shows</h2>
  <div id="videowise_stream_channel_past"></div>
</section>

<div id="videowise_stream_channel_shared"></div>

<footer><!-- your store footer --></footer>

Do not add #videowise_stream_channel on the same page as the section mounts. The monolith container takes precedence and the section mounts are ignored.

React Native SDK

In @videowisehq/videowise-react-native-sdk, pass the same section markup via channelBodyHtml on LiveShoppingChannel. The SDK injects that string into the WebView <body> instead of the default monolith #videowise_stream_channel div.

<VideowiseSDK.LiveShoppingChannel
  videowiseInfo={{ shop: 'your-store.myshopify.com' }}
  channelBodyHtml={`
    <div id="videowise_stream_channel_hero"></div>
    <div id="videowise_stream_channel_livenow"></div>
    <div id="videowise_stream_channel_upcoming"></div>
    <div id="videowise_stream_channel_past"></div>
  `}
/>

See React Native SDK — Live Shopping Channel.

Live shopping overview
Launch a live stream — open a specific show with videowiseLaunchLive or vwLsId
Live shopping custom events
Custom platforms
React Native SDK — use channelBodyHtml on LiveShoppingChannel for the same section mounts inside the app WebView
Order tracking
Cookies

​Monolith (default)

​Section layout (modular)

​Container ids

​Shared container (optional)

​How it works

​Styling tips

​Example: merchant framing around sections

​React Native SDK

​Related

Monolith (default)

Section layout (modular)

Container ids

Shared container (optional)

How it works

Styling tips

Example: merchant framing around sections

React Native SDK

Related