There are different ways to integrate the widget (slider) where the shoppable content will be displayed. In this document, you will find the various options.
To learn more about Shoppable Content, please read this article. 🔔 What is Shoppable Content and How Does It Work?
Add this script to your product pages where you want it to appear. The link between the product and the content will be made automatically via the URL you provide us in your product feed.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget></skp-widget>By default, a carousel will be displayed. If you want to display only a single video, change the display mode to thumbnail.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget mode="slider"></skp-widget>Gallery / Carousel / Slider /
Display all your media as a gallery and navigate left to right through your Shoppable Content.
The size, border, and navigation controls are customizable. See the CSS rules.
Example: 9:16 Gallery
<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 Gallery
<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 only the first video of the Shoppable Content using the "Thumbnail" mode.
The size, border, and navigation controls are customizable. See the CSS rules.
Add to Cart
To make the "Buy" button work, you need to listen for an event emitted by our video player when a product is added to the cart.
Depending on your e-commerce platform, the integration will differ.
You can also add your own tracking on this same event to monitor products added to the cart from Shoppable Content through to your Checkout.
window.addEventListener('skp:addToCart', (event) => {
const { origin, product } = event.detail
console.log('origin', origin);
console.log('product', product);
addProductToCustomerCart(product);
// Enter your add-to-cart function
sendTrackingToYourPlatform(origin, product);
// Add your tracking function
})Product information comes from the product feed you share with us. Be sure to verify your product IDs; they must match those used by your e-commerce platform.
CSS Properties
Some CSS properties can be modified.
| Name | Description | Default Value | Scope |
| --skp-primary-color | Primary interface color | #5F3595 | general |
| --skp-font-family | Main font used | 'Nunito', sans-serif | general |
| --skp-thumbnail-width | Width of video thumbnails | 200px | general |
| --skp-thumbnail-height | Height of video thumbnails | 400px | general |
| --skp-slider-nav-icon-size | Size of navigation control icons | 20px | slider |
| --skp-slider-nav-color | Color of navigation controls | #000000 | slider |
| --skp-slider-nav-width | Size of the navigation control circle | 40px | slider |
| --skp-slider-nav-position | CSS position of navigation controls | relative | slider |
| --skp-radius | Radius of CTA buttons | 5px | general |
| --skp-thumbnail-border-radius | Radius of media | 5px | general |
--skp-slider-nav-icon-color |
Color of the navigation control icon | slider |
Display Mode
Several options are available to change the player behavior:
Disable Picture in Picture
The player can be minimized to allow viewers to browse the product page without interrupting the Shoppable Content playback.
Enabled by default, you can disable this option.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget pip-mode="disable"></skp-widget>Disable Add to Cart
Disabling add to cart will replace the "Buy" button with 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>Some Integration Issues
If you encountered an issue implementing the tag on GTM. 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>You will need to:
- comment/uncomment line 13:
widget.setAttribute('product', 'ID_PRODUCT');, depending on whether you want to declare the productId in the tag.
You must replace the field'ID_PRODUCT'with the value shown here:
OR
comment/uncomment line 16:
widget.setAttribute('collection', 'ID_COLLECTION');, depending on whether you want to display a collection.
You must replace'ID_COLLECTION'with the value found on a collection page, as shown here: