How to integrate Shoppable Content with different formats?

There are different ways to integrate the widget to display Shoppable Content. In this article, you will find the different possibilities and their integration.

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> 
<style> 
: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>  
<style> 
:root { 
--skp-thumbnail-width: 200px; 
--skp-thumbnail-height: 200px;
--skp-thumbnail-border-radius: 50%;
} </style> 
<skp-widget> </skp-widget> 

Thumbnail / Single video

When integrating the Shoppable Content Player, a gallery is displayed by default. If you want to show only the first video, change the mode to "thumbnail".

Example:
Size and border style are customizable. See CSS variables bellow.

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

Add to cart

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

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); 

addProductToCustomerCart(product); 
// Trigger your add to cart functionality with your own implementation 

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

Please note: Product information comes from your product feed. The product ID in the product feed must be the same one used by your e-commerce platform.

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

CSS Variables properties

Some CSS properties can be changed or left by default.

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 issue

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')

document.querySelector('#my-container').appendChild(widget);
</script>

For a product

You have to 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

You have to 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: