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>
<skp-widget></skp-widget>
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>
<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>
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);
addProductToCustomerCart(product);
// Trigger your add to cart functionality with your own implementation
sendTrackingToYourPlatform(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')
document.querySelector('#my-container').appendChild(widget);
</script>
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:
OR
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: