> ## Documentation Index
> Fetch the complete documentation index at: https://docs.videowise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Live channel page layout

> Embed the live shopping channel as one full page, or as modular sections with your own HTML between them.

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:

```html theme={null}
<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>
```

<Note>
  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](/shoppable-videos/custom-platforms).
</Note>

## Monolith (default)

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

```html theme={null}
<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 `div`s where each section should appear. Any HTML between them is left alone — Videowise only fills the mounts.

```html theme={null}
<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):

```html theme={null}
<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

```html theme={null}
<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>
```

<Warning>
  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.
</Warning>

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

```tsx theme={null}
<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](/sdk/live-shopping-channel#custom-channel-body--modular-section-layout).

## Related

* [Live shopping overview](/live-shopping/overview)
* [Launch a live stream](/live-shopping/stream-rendering) — open a specific show with `videowiseLaunchLive` or `vwLsId`
* [Live shopping custom events](/live-shopping/custom-events)
* [Custom platforms](/shoppable-videos/custom-platforms)
* [React Native SDK](/sdk/live-shopping-channel) — use `channelBodyHtml` on `LiveShoppingChannel` for the same section mounts inside the app WebView
* [Order tracking](/live-shopping/order-tracking)
* [Cookies](/cookies)