Thanks to the shoppable content widget, you will centralize and broadcast all your favourite UGCs on your ecommerce website, such as Skeepers Influence Marketing posts, live shopping replays, or even upload your own UGC content.
This Skeepers Add-on is the best way to provide the most authentic, inspiring and engaging shopping experience to your customers.
To do so, we will convert any UGC into a Shoppable asset to use the emotional instant the Visitors will live on your website while crawling your offer.
Prerequisites
Once the Shoppable Content is activated (contact your CSM), you will be able to reach the content management on this URL: https://backoffice.spockee.com/channels
How does it work?
Before creating content, please let us introduce some wording:
- Shoppable Content: this is the result of Product + Media aggregation, this bunch of media aggregated with a product will be visible on your ecommerce website thanks to the Shoppable Player that you will need to integrate on your website.
- A Media: This is the most extensive definition we can have, this includes Influencer Marketing posts, Uploaded media, Generated Live Shopping clips...
- A Product: before creating Shoppable Content, we will synchronize your catalogue to let you “aggregate” media & products.
- A Collection: a Collection is the aggregation of many (at least two) Shoppable Contents. This is essentially used on the home pages or on category pages to display different kinds of products (I.e.: this is useful on the “Valentine’s Day special offers” page, for example, to display at once make-up, fashion & Shoes).
Introduction to the Shoppable Content Dashboard
In the Back Office you will find three main pages :
- Dashboard: You will find information on the Content you already have created.
- Products: This is the place where you will see all Shoppable Content created based on a given product.
- Collections: This is the place where you will find all existing Collections. You will be able to create a new one as well.
To display the content on your site, two steps are needed (once the shoppable content functionality has been activated)
- Create the content - content management
- Integration of the widget on your site and the add to cart
Content Management
Below, you will find the steps to follow to create your Content:
- On your Back-Office reach the Shoppable Content section
- Click on the “+ Shoppable Content” Button, within the Shoppable Content section.
- Select the product you want to aggregate media
- Choose the product you want to use
- Once the product is selected, you can select the content you want to aggregate. You can select Live Shopping content, Influencer Marketing content, or even upload your own content.
- If you select the Live shopping content, you can generate clips from the whole replay to create a “focus” on the needed part. Select the initial time (or use the bracket) and end time. Once your selection is ok, generate the clip by clicking the “Use this Clip” button.
- The generated clip will automatically appear in the selected media panel. A generated clip can be deleted with the trash icon you will find in the top right corner of the asset.
- If you select the Influencer Marketing content, you can select the assets created for this product by our Skeepers influencers. Will can filter the kind of asset you want to see.
- If you select the Uploaded content, then you will access the upload module to manage MP4, JPEG or PNG files. Once a media is uploaded, then it appears automatically in the Selected Media panel.
đź’ˇ Good to know!
Try to use short video, no more than 30 seconds, since your viewers can only move to the next story, a long video won't be as effective.
A 1080p (1920x1080), 15 seconds video should weight between 2 and 4 mb.
Make sure to keep those files to a minimum size to reduce the loading time and increase the user experience.
Once the content is generated, you can change the order they are displayed on the widget player. Use the handle on the left to reorganize the assets.
Create a collection
Once you have added content to different products and need to consolidate or aggregate, you have the possibility to create a collection. For example, you can create a collection of all products in the same category to display on a category page.
- Click on New collection
- Name your collection
- Add as many products as you want.
- You will find the product with the content attached to it.
- Select the content you would like to display
- Click on save
Integrate Shoppable Content slider widget to a website page
After Shoppable content has been created (Product + Media) you can start showing Shoppable Content on your website
To do that you need to copy paste the following code where you want to display the Shoppable Content
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget></skp-widget>
This is a fully generic code, which means that it can be used across your website (if you use Shopify, you can use our Shopify App), and it works automatically if you meet the following conditions:
- Your Domain Name is in the list of the domain you gave us during onboarding. We are limiting where the Shoppable Content can be displayed for security reasons. You can give us as many domains as you want (ex: Production, staging, development...)
- The product link must be defined in the product feed, so we can match the URL you're visiting with the shoppable content we should display
đź’ˇ Good to know!
You can dynamically change the product ID, if you want to display a Shoppable Content on another product page, or on a page that is not in the product feed.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget product="PRODUCT_ID"></skp-widget>
To know more about Widget Integration, you can read this article: đź”” Shoppable Content - Technical Integration (with use cases)
Integrate a collection
Adding a collection (multiple shoppable contents) to a page is very similar to the shoppable content integration. After selecting a Collection in the correct menu :
1. Click on the button on the right
2. Copy the code
You should get a code like this :
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget collection="XXX"></skp-widget>
This code can be integrated anywhere within the Domain Name list you gave us.
To know more about Widget Integration, you can read this article: đź”” Shoppable Content - Technical Integration (with use cases)
Tracker deployment
Once integration is complete, it's time to track customer behavior. Online help for setting up the tracker is available at the following link: Shoppable Content Tracker - Deployment
FAQ - Widget Performance
What is the impact of integrating the widget into the product page?
đź“Ś Widget
The total weight of the widget alone is 150kb and is loaded asynchronously, meaning it happens while other elements of the page are loading, minimizing the visual impact felt by the customers.
The time for our server to respond is between 50ms to 100ms depending on your location.
đź“Ś Media
Full-size media are only downloaded when clicked. We create a lightweight and optimized preview for each media, reducing the download time to a minimum. Each media adds 20kb to 90kb to the total weight loaded.
When hovering a video, the widget loads and shows a 5 seconds video extract, which is also optimized and compressed, averaging 500 to 900kb
đź“Ś Impact
Impact on FCP(First Contentful Paint - time at which the first text or image is painted) on a PDP → None
Impact on the TTI (Time to interact) on a PDP → negligible (under 50ms)
Exemple
Here is a performance test showing the result on the same page, with and without the shoppable content widget. This test contains 20 assets for a total weight of 521kb + 150kb for the widget. (avg. weight per media 26kb)
|
Without Shoppable Content |
With Shoppable Content |