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

## Required `videowiseInfo` (custom / headless)

On **Shopify Online Store**, the Videowise app usually injects shop identity for you (`window.Shopify.shop`). On **headless Shopify, custom platforms, or any page where `window.videowiseInfo` is missing**, set it **before** the channel script:

```html theme={null}
<script>
  window.videowiseInfo = {
    // Required — shop identity used to fetch live / upcoming / past shows
    shop: 'your-store.myshopify.com',
    // Required when window.Shopify is not present (headless / Magento / SFCC / other)
    cartType: 'shopify', // 'shopify' | 'magento' | 'sfcc' | 'tapcart' | 'other'
    // Recommended — product prices in the player (defaults to USD if omitted)
    currency: 'USD',
  };
</script>
<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>
<div id="videowise_stream_channel"></div>
```

| Field           | Required?                                     | Why                                                                                                                                                                                                            |
| --------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `shop`          | **Yes** (or `host`, or `window.Shopify.shop`) | Channel API calls use this as `host`. Without it, live / upcoming / past lists do not load. Prefer the `*.myshopify.com` domain.                                                                               |
| `cartType`      | **Yes on non-Shopify / headless**             | Selects the cart proxy (`shopify`, `magento`, `sfcc`, `tapcart`, `other`). On classic Shopify Online Store it is auto-detected from `window.Shopify`. Use `other` when you handle cart via custom events only. |
| `currency`      | Recommended                                   | Used when a show opens (prices). Defaults to `USD` if omitted.                                                                                                                                                 |
| `host`          | Optional                                      | Alias for shop identity. Resolution is `videowiseInfo.host` → `videowiseInfo.shop` → `Shopify.shop`. Setting `shop` alone is enough.                                                                           |
| `currencyRate`  | Optional                                      | Defaults to `'1'`.                                                                                                                                                                                             |
| `locale`        | Optional                                      | Locale for channel copy when available.                                                                                                                                                                        |
| `vwHostOwnerId` | Optional                                      | Filters lists to one host. See [below](#filter-shows-by-host-vwhostownerid).                                                                                                                                   |
| `forceDomain`   | Optional                                      | When `true`, product fetch and cart requests use `https://{videowiseInfo.shop}` instead of relative `/products/…` and `/cart/…` paths. See [forceDomain](/shoppable-videos/custom-platforms#forcedomain).      |

`pid`, `route`, `siteID`, and product URLs are for shoppable widgets / platform-specific cart — **not** required for the channel page to load.

Full field reference: [Custom platforms — videowiseInfo](/shoppable-videos/custom-platforms#setting-up-videowiseinfo).

## Filter shows by host (`vwHostOwnerId`)

By default the channel lists **all** live / upcoming and past shows for the shop. To show only one host’s shows (multi-host setups), set the host owner id on `window.videowiseInfo` **before** the channel script runs:

```html theme={null}
<script>
  window.videowiseInfo = window.videowiseInfo || {};
  window.videowiseInfo.shop = 'your-store.myshopify.com';
  window.videowiseInfo.cartType = 'shopify';
  // Only this host’s active, upcoming, and past shows
  window.videowiseInfo.vwHostOwnerId = 'HOST_OWNER_ID';
</script>
<script src="https://assets.videowise.com/videowise-live-streaming-channel-embed.js"></script>
<div id="videowise_stream_channel"></div>
```

Resolution order (first non-empty wins):

1. `window.videowiseInfo.vwHostOwnerId`
2. URL query param `?vwHostOwnerId=…` on the channel page

When set, the channel passes that value as `hostId` when fetching:

* **Active / upcoming** — live now + upcoming lists
* **Past** — past recordings list

Omit `vwHostOwnerId` (and the query param) to keep the unfiltered shop-wide channel.

<Tip>
  Prefer `videowiseInfo.vwHostOwnerId` for permanent host-specific channel pages. Use the `vwHostOwnerId` query param for shareable or preview links without changing the page script.
</Tip>

## 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) — `videowiseInfo`, including optional `vwHostOwnerId`
* [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)