With the Shoppable Content widget, you can centralize and display all your favorite UGC on your e-commerce site, such as posts from Skeepers Influence Marketing, Live Shopping replays, or even upload your own UGC content.
This Skeepers add-on module is the best way to offer your customers the most authentic, inspiring, and engaging shopping experience possible.
To do this, we convert any UGC into a Shoppable asset to leverage the emotional moment visitors experience on your website while browsing your offerings.
Prerequisites
Once Shoppable Content is enabled, you can access content management at this URL: https://backoffice.spockee.com/channels
How Does It Work?
Before creating content, let us introduce some terms:
Shoppable Content: This is the result or aggregation of Product + Media; this bundle of media aggregated with a product will be visible on your e-commerce site through the Shoppable Player that you must integrate on your site.
A media: This is the broadest definition we have; it includes influencer marketing posts, uploaded media, generated Live Shopping clips, and more.
A product: Before creating content, we will synchronize your catalog to allow you to aggregate media and products.
A collection: A collection is an aggregation of several (at least two) Shoppable Contents. It is mainly used on home pages or category pages to display different types of products (for example, on the "Valentine’s Day Special Offers" page, it allows displaying makeup, fashion, and shoes together).
Introduction to the Shoppable Content Dashboard
In the Back Office, you will find three main pages:
Dashboard: Here you will find information about the content you have already created.
Shoppable Content: This is where you will see all the Shoppable Content created for a given product.
Collections: Here you will find all existing collections. You can also create a new one.
To display content on your site, two steps are necessary (once the shoppable content feature has been enabled):
- Content creation - content management
- Widget integration on your site and adding to cart
Content Creation - Content Management
Below are the steps to follow to create your content:
In your Back Office, go to the Shoppable Content section.
Click the "+ Add Shoppable Content" button.
3. Select the product you want to group with media
4. Choose the product you want to select
5. Once the product is selected, you can choose the content you want to aggregate. You can select Live Shopping content, Influence Marketing content, or even upload your own content.
6. If you select Live Shopping content, you can generate clips from the entire replay to create a "focus" on the desired segment. Select the start (or use the bracket) and the end. Once your selection is validated, 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 using the trash icon located in the upper right corner of the resource.
7. If you select Influence Marketing content, you can select the resources created for this product by our Skeepers influencers. You can filter the type of asset you want to see.
8. If you select uploaded content, you will access the upload module to manage MP4, JPEG, and PNG files. Once a media file is uploaded, it automatically appears in the Selected Media panel.
💡 Good to know!
Try to use short videos, no longer than 30 seconds, because your viewers can only skip to the next item; a long video will not be as effective.
A 15-second video in 1080p (1920x1080) should weigh between 2 and 4 MB.
Be sure to limit the size of these files to reduce loading times and improve user experience.
Once the content is generated, you can change the display order in the widget player. Use the left mouse button to rearrange the resources.
Create a Collection
Once you have added content to different products and need to consolidate or aggregate it, you have the option 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 its associated content.
Select the content you want to display
Click Save
Integrate a Shoppable Content Widget on Your Site
After saving your Shoppable Content, you can integrate the Shoppable Content widget on your site.
To do this, you must copy this code to the location where you want to display the Shoppable Content on your site.
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget></skp-widget>Case 1: Products Synchronized from Influencer Marketing
Using the generic code above, make sure that in Influencer Marketing, the products from your campaigns contain the exact product page URL (PDP) because the system will rely on this to display the Shoppable Content slider:
Case 2: Products Synchronized from Shopify
This is a completely generic code, meaning it can be used across your entire website (if you use Shopify, use our Shopify App). It works automatically if you meet the following conditions:
- Your domain name must be the same as the one you provided during onboarding; we do this for security reasons. You can provide us with as many URLs as you want (Production, staging, dev, etc.).
- The link to the product must be defined in the product feed to match the visited page with the attached Shoppable Content.
💡 Good to know!
You can dynamically modify the product ID if you want to display specific 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 learn more about widget integration, you can read this article: 🔔 Shoppable Content: Technical Integration (Use Cases)
Integrate a Collection
Adding a collection (multiple contents) to a page is very similar to integrating a single content. After selecting a collection from the correct menu:
1. Click the button on the right
2. Copy the code
You should get code like this:
<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script>
<skp-widget collection=COLLECTION_ID></skp-widget>This code can be integrated anywhere within the list of authorized domain names.
To learn more about widget integration, you can read this article: 🔔 Shoppable Content: Technical Integration (Use Cases)
Tracker Deployment
Once integration is complete, you need to track customer behavior. The online help detailing tracker setup is available at the following link: Shoppable Content Tracker - Deployment
FAQ - Widget Performance
What is the impact of integrating the widget on the product page?
Widget
The total weight of the widget alone is 150 KB. It loads asynchronously, meaning it loads simultaneously with other page elements, thereby reducing the visual impact experienced by customers.
Our server response time varies between 50 ms and 100 ms depending on your geographical location.
Media
Original size media files are only downloaded when opened. We create a reduced and optimized preview for each media, minimizing download time. Each media adds between 20 KB and 90 KB to the total downloaded weight.
When you hover over a video, the widget loads and displays a 5-second video snippet, which is also optimized and compressed, with an average size of 500 KB to 900 KB.
Impact
Impact on FCP (First Contentful Paint - the moment the first text or image is displayed) on a product page → None
Impact on TTI (Time to Interact) 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 widget. This test contains 20 items for a total weight of 521 KB + 150 KB for the widget (average media weight of 26 KB).
|
Page loaded without Shoppable Content |
|