Once you have linked your products to one or more media, you can start displaying Shoppable Content on your website. Here’s how:
Embedding the code on the desired page
You have two initial options when embedding the code:
- Use the generic code
By embedding this code where you want to display the Shoppable Content (on a product page, for example), please note that only the media linked to the product URL will be displayed.
This means they will only be visible when the relevant color/size/feature is selected.<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget></skp-widget>
It will automatically work if you meet the following conditions:
• Your domain name is listed among the domains provided during registration. For security reasons, we limit the display of Shoppable Content. You can provide us with as many domains as you want (e.g., Production, staging, development...).
• The product link must be defined in the product feed so that we can match the URL with the Shoppable Content we need to display. - Use the dynamic code
We recommend using the following code, where you must insert the product ID as indicated in your back-office.
This allows you to display your Shoppable Content on all variants of this product, without requiring specific features to be selected.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget product="PRODUCT_ID"></skp-widget>
Different formats of Shoppable Content
There are different ways to embed the widget to display Shoppable Content (carousel, slider, video,...). Check out this article to discover the various possibilities and learn how to integrate them.
Embedding a collection
Adding a collection (multiple Shoppable Content) to a page is very similar to embedding a single Shoppable Content. After selecting a collection from the menu:
- Click on the relevant collection and then on its URL
- Copy the ID of your collection, which is at the very end of the URL
- Insert this ID in place of "XXX" in the following code:
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget collection="XXX"></skp-widget> - Then embed this completed code in the desired location!
Note that it can be embedded anywhere in the list of domain names you provided to us.
Deploying the performance tracker
Once the integration is complete, it’s time to track your performance by monitoring customer behavior. Our article detailing the process is available here: Shoppable Content Tracker deployment.
FAQ - Option performance
The total integration size is 150 KB.
It is loaded asynchronously, meaning at the same time as other page elements, thus minimizing the visual impact perceived by site visitors.
Our server response time varies between 50 ms and 100 ms depending on your geographical location.
The media are only downloaded in their original size when opened. We create a reduced and optimized preview for each media, thus minimizing download time.
Each media adds between 20 KB and 90 KB to the total downloaded weight.
When you hover over a video, a 5-second video preview is displayed, which is also optimized and compressed, with an average size of 500 KB to 900 KB.
Impact on FCP (First Contentful Paint - When the first text/image is displayed on a product page) → None
Impact on TTI (Time To Interact - Time for the first interaction on a product page) → Negligible (less than 50 ms)
Example: here is a performance test showing the result on the same page, with and without the Shoppable Content integration. This test contains 20 elements for a total weight of 521 KB + 150 KB for the widget (the average weight per media is 26 KB).
|
Page loaded without Shoppable Content |