Show Galleries

Show galleries are a collection of planned, live, or on-demand live shopping shows. There are three different approaches to displaying shows on your website:

Use the Sprii markup elements. This implementation provides the fastest and best way to present your video content on your website. The markup elements and their content are constantly maintained by Sprii.
Use the Sprii Gallery Templates. Bring your own markup and styling alongside templates which Sprii will use to augment your markup with data and custom events.
Communicate with our REST API to get a list of shows and their status. Use this method only if you have a specific need that does not fit the markup elements approach.

Load your page-specific widget-<pageId>.js script first; the checkout-only script cannot render galleries. For content maintained by your team in Sprii, use a managed gallery area.

The Sprii Gallery Element

To add a group of shows to your website, create a div element with the class sprii-shows-gallery. You can use data attributes on the element to filter which shows should be shown in the content. Other data attributes can change the look and feel of the shows. Here's an example:

html

<div
  class="sprii-shows-gallery"
  data-sprii-statuses="live"></div>

Inside this block, you can add elements that will be shown either if there are shows within the filter (sprii-shows-gallery-has-data) or when there are no shows within the filter (sprii-shows-gallery-no-data).

A full example could be:

html

<div
  class="sprii-shows-gallery"
  data-sprii-statuses="live">
  <div
    class="sprii-shows-gallery-has-data"
    style="display: none">
    <h3>Live</h3>
    <p>Watch our current live show</p>
  </div>
  <div
    class="sprii-shows-gallery-no-data"
    style="display: none">
    We have no active live shows. Sign up to our newsletter to be notified when we go live
  </div>
</div>

Data properties

The following table is a list of data properties. All properties should have the prefix data-sprii- so, as example statuses will be data-sprii-statuses

Id	Possible values	Description
statuses	planned, vod, live, clip	Filter by show status. Defaults to all statuses, still subject to the order-deadline filter.
mode	shows, products, shoppables (default: shows)	Fetch shows, products or shoppable groups.
show-expired	`true` or omit	Set `show-expired="true"` to retain shows after their order deadline, including past shows. Omit the attribute to exclude them. Any non-empty value enables it, including `"false"`.
event-ids	comma-separated event ids	Show a specific list of events
tags	comma-separated list of show tags	If events in sprii have been given tags, you can use these tags to filter. Separate by comma (,)
store-ids	comma-separated list of sprii stores	If you have agreement with other Sprii users to show their shows on your website, you can add a list of those stores. Remember, these stores need to whitelist your domain. Separate by comma (,)
product-ids	comma-separated product ids	Use when presentation is products
product-category-ids	comma-separated product categories	Use when presentation is products
sort	asc,desc	Sort by show start/clip creation time. Defaults to `asc` for planned-only galleries, otherwise `desc`.
lang	da,sv,no,en,de,es	Gallery language: the `lang` attribute, then the widget language setting, then `en`. Use `sv` for Swedish.
presentation	list,swiper (default: list)	Present the shows as a gallery list, or as a swiper
page-size	Number	Default: 10. Swiper fetches 100. "Load more" is shown when more results are available.
display-options	comma-separated key:value pairs	All options default to true except `allow-wrap` (false). Available options: show-date:true/false (show or hide dates) show-product-image:true/false (show or hide product images) show-campaign-title:true/false (show or hide the campaign title) show-description:true/false (show or hide descriptions) allow-wrap:true/false (allow shoppable groups to wrap onto multiple rows) Example: show-date:false,show-campaign-title:false
autoplay	minimized,maximized	Plays the first result only if it is not planned; does not skip ahead to a live show. Use with `statuses="live"` to autoplay live content. A past show can also autoplay.

Gallery examples

To show how to set up galleries, we have created some ready-to-use examples

Complete live shopping page.

This example is a landing page where you want 3 sections:

On top a section if a show is currently live
After that a section of planned shows
And last all the on-demand shows that are available

html

<div class="sprii-shows-gallery-wrapper">
  <!-- Block with live shows, if any -->
  <div
    class="sprii-shows-gallery"
    data-sprii-statuses="live">
    <div
      class="sprii-shows-gallery-has-data"
      style="display: none">
      <h4>Watch our live show!</h4>
    </div>
  </div>

  <!-- Block with planned shows. A CTA if no shows are planned -->
  <div
    class="sprii-shows-gallery"
    data-sprii-statuses="planned"
    data-sprii-page-size="8">
    <div
      class="sprii-shows-gallery-has-data"
      style="display: none">
      <h4>Upcoming shows</h4>
    </div>
    <div
      class="sprii-shows-gallery-no-data"
      style="display: none">
      <h4>Want to know when we have new planned shows</h4>
      <p>Sign up for our newsletterr <a href="#">here</a></p>
    </div>
  </div>

  <!-- Block with on-demand and expired shows-->
  <div
    class="sprii-shows-gallery"
    data-sprii-statuses="vod"
    data-sprii-page-size="8"
    data-sprii-show-expired="true">
    <div
      class="sprii-shows-gallery-has-data"
      style="display: none">
      <h4>Past shows</h4>
    </div>
    <div
      class="sprii-shows-gallery-no-data"
      style="display: none">
      <h4>No past shows available</h4>
      <p>Check back later for recorded shows</p>
    </div>
  </div>
</div>

Gallery with display options

This example shows how to use display options to customize what content is shown:

html

<div
  class="sprii-shows-gallery"
  data-sprii-statuses="vod"
  data-sprii-display-options="show-date:false,show-product-image:true,show-campaign-title:false">
  <div
    class="sprii-shows-gallery-has-data"
    style="display: none">
    <h4>Product Gallery (without dates and campaign title)</h4>
  </div>
</div>

Clips page

A section showing all product clips from a specific product category. Note, Sprii needs to know your product categories.

html

<div
  class="sprii-shows-gallery"
  data-sprii-mode="products"
  data-sprii-product-category-ids="683829492">
  <div
    class="sprii-shows-gallery-has-data"
    style="display: none">
    <h4>Shoes!</h4>
  </div>
</div>

Show specific element

If you have a landing page dedicated to a specific show, then this is an example you can use:

html

<div
  class="sprii-shows-gallery"
  data-sprii-event-ids="683829492"></div>

Gallery areas, and managing content from sprii

You might not be confident in creating these markup sections on your website. Or maintaining the content can be difficult. Therefore we have created the Sprii Gallery setup.

In sprii you can, with the help from your success agent, create galleries. The content in the galleries is setup in Sprii, and you only need to add this section to your website:

html

<div
  data-sprii-gallery-id="liveshopping"
  class="sprii-gallery-area"></div>

Configure the gallery and its ID under Onsite → Gallery in Sprii. Both the sprii-gallery-area class and the matching data-sprii-gallery-id are required. Sprii replaces the contents of this element with the managed gallery HTML, so keep unrelated page content outside it. Always use an explicit closing </div> in HTML.

Screenshot from an example setup in Sprii:

sprii-app-gallery-editor

For more advanced template customization, see Gallery Templates.

Single-page apps and dynamically rendered galleries

If your framework adds gallery elements after initial page load, enable Watch for gallery elements rendered at runtime in the widget settings (off by default). Alternatively, register the SDK feature before loading the widget:

(window.onSpriiReady = window.onSpriiReady || []).push((sdk) => {
  sdk.toggleFeature(sdk.features.WATCH_DOM_FOR_ELEMENTS, 'ON');
});

The observer must be enabled when galleries initialize. window.Sprii.remountGalleries() refreshes already mounted galleries after a context change; it does nothing before the first gallery mount. Keep the configured gallery classes on dynamically inserted placeholders.

The floating widget is configured separately from galleries in the Onsite settings. It is off by default. Enable it to display a live-show card; for a planned-show countdown, set Show this long before event starts to a value greater than zero (the default is zero). Live-show autoplay is a separate setting and is also off by default.

Choose the widget position and supported devices in Sprii. The show/hide page lists match a case-insensitive substring of the URL path and query. / matches only the homepage, and * is a literal character, not a wildcard. A hide-list match takes precedence; when a show list is non-empty, the URL must match it. These visibility rules also apply to the floating widget's automatic playback.

Getting Started with sprii

Show Galleries

Show Galleries

The Sprii Gallery Element

Data properties

Gallery examples

Complete live shopping page.

Gallery with display options

Clips page

Show specific element

Gallery areas, and managing content from sprii

Single-page apps and dynamically rendered galleries

Floating widget

Show Galleries ​

The Sprii Gallery Element ​

Data properties ​

Gallery examples ​

Complete live shopping page. ​

Gallery with display options ​

Clips page ​

Show specific element ​

Gallery areas, and managing content from sprii ​

Single-page apps and dynamically rendered galleries ​

Floating widget ​

Show Galleries

The Sprii Gallery Element

Data properties

Gallery examples

Complete live shopping page.

Gallery with display options

Clips page

Show specific element

Gallery areas, and managing content from sprii

Single-page apps and dynamically rendered galleries

Floating widget