🔔 Shoppable Content - Technical Integration (Use Cases)

There are different ways to integrate the widget to display shoppable content.

In this document, you will find the different possibilities.

To learn more about Shoppable content, please read this article.🔔 What is Shoppable Content and how does it work?


Add this script anywhere on the product page to show a shoppable content, the link with the product will be done automatically with the product URL you send us in your product feed.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 


By default, a gallery is displayed. If you want to show only the first video, change the mode to "thumbnail"

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget mode="thumbnail"></skp-widget>


Carrousel / Slider

Display all the media on a slider and navigate left and right to browse all the media in the shoppable content.

Size, border style and navigation controls are customizable. See CSS variables bellow


Example: 9:16 slider


<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
:root { 
--skp-thumbnail-width: 180px; 
--skp-thumbnail-height: 320px; 
} </style> 
<skp-widget> </skp-widget>


Example: Round slider


<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>  
:root { 
--skp-thumbnail-width: 200px;
--skp-thumbnail-height: 200px;
--skp-thumbnail-border-radius: 50%;
} </style> 
<skp-widget> </skp-widget> 


Single video


Display a preview of the first video of the shoppable content anywhere on the page by using the mode "thumbnail"

Size and border style are customizable. See CSS variables bellow


Add to cart

In order to make the Add to cart button work you need to listen to an event emitted by our player when a product is added.

Depending on your e-commerce platform the integration might be different.

You can use this event to add your own tracking on each add-to-cart coming from the player. This way you can track add-to-cart done during a shoppable content all the way to your checkout.

window.addEventListener('skp:addToCart', (event) => { 
const { origin, product } = event.detail
console.log('origin', origin);
console.log('product', product);

// Trigger your add to cart functionality with your own implementation

(origin, product);
// Send tracking informations to your platform

Product information comes from your product feed. Check the product ID in the product feed, it must be the same one used by your ecommerce platform.



CSS Variables properties

Some CSS properties can be changed or left by default.


Name Description Default value Scope
--skp-primary-color CTA primary color #5F3595 general
--skp-font-family Font 'Nunito', sans-serif general
--skp-thumbnail-width Width of the preview 200px general
--skp-thumbnail-height Heigh of the preview 400px general
--skp-slider-nav-icon-size Navigation control icon size 20px slider
--skp-slider-nav-color Navigation control background color #000000 slider
--skp-slider-nav-width Navigation control size 40px slider
--skp-slider-nav-position Navigation control position relative slider
--skp-radius CTA radius border 5px general
--skp-thumbnail-border-radius Radius border Picture, Thumbnail, Item slider… 5px general


Display mode

Several options are available to change the behaviour of the player


Disable Picture in Picture 

The player can be reduced to let your viewers browse the product page while watching the Shoppable content with no interruption. Viewers can click on maximize to reopen the main player at any time.

Activated by default, you can disable it

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget pip-mode="disable"></skp-widget>


Disable Add to cart

If you don't want to use the add to cart feature you can disable it. The buy button will be replaced by a link to the product page.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget add-to-cart="false" link-to-product-page="true"></skp-widget>


Common issues

If you face an issue with implementing the tag on GTM. As a workaround, the tag can be integrated this way:

<div id="my-container"></div>
<script src="https://sc-ls.spockee.io/shoppable.umd.js"></script>
<script type="text/javascript">
const widget = document.createElement('skp-widget');  
// :art: Do you want to add some improvements?
widget.setAttribute('mode', 'slider');
widget.setAttribute('pip-mode', 'disabled');

// :point_down: Without product attribute,
// the tag will take the url as reference
// widget.setAttribute('product', 'ID_PRODUCT');

// OR you can display the collection.
// widget.setAttribute('collection', 'ID_COLLECTION')



For a product - comment/uncomment the line: widget.setAttribute('product', 'ID_PRODUCT');

 You will have to change the 'ID_PRODUCT' field with the value found in the backoffice:





For a collection - comment/uncomment the line : widget.setAttribute('collection', ‘ID_COLLECTION'); 

You will have to change the 'ID_COLLECTION' with the value found on a collection’s page, like here:


Was this article helpful?
0 out of 0 found this helpful