🔔 What is Shoppable Content and how does it work?

Thanks to the shoppable content widget, you will centralize and broadcast all your favorite 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.

Contents

(You can click on each title to directly access the information)

Prerequisites 

Once the Shoppable Content is activated (contact you 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 or 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 catalog to let you “aggregate” media & product. 
  • 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 and the content on your site

Content Management

Below, you will find the steps to follow to create your Contents :

  1. On your Back-Office reach the Shoppable Content section
  2. Click on the “+ Shoppable Content” Button, within the product section.
  3. Select the product you want to aggregate media
  4. Choose the product you want to select
  5. 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.
  6. 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.

7. 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.

8. If you select the Uploaded content, then you will access the upload module to manage MP4, JPEG, 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. 

wiki_scproductorder.jpg

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.

  1. Click on New collection 
  2. Name your collection 
  3. Add as many products as you want to.
    • You will find the product with the content attached to it.
  4. Select the content you would like to display 
  5. Click on save 

Integrate Shoppable Content slider widget to a website page 

After Shoppable content has been created (Product + Media), a script will be available on the top right in “selected medias” 

  1. Click on Copy code snippet for integration

You will get a code like this one :

<script async src="https://sc-ls.spockee.io/shoppable.umd.js"></script>

<skp-widget></skp-widget>

This is a fully generic code, it means that it can be used across your website (if you use Shopify, add the code in the product description), and it works automatically if you meet the following conditions:

  • Your Domain Name must be the same as where the tag is integrated. The tag won’t generate at all if the domain name is different.
  • The product link must be defined in the product feed

💡 Good to know!

You can dynamically change the product ID so that the player is only displayed when the product presented matches the product page you are visiting. If no product matches, the player won't be loaded.

 

If, for some reason, the tag can’t generate automatically a shoppable content, you can simply add a product attribute within the tag like this :

<script async src="https://sc-ls.spockee.io/shoppable.umd.js"></script>

<skp-widget product="PRODUCT_ID"></skp-widget>

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 

image-20230509-151851.png

You should get a code like this :

 
<script src="https://sc-ls.spockee.io/shoppable.umd.js"></script>
<skp-widget collection=COLLECTION_ID></skp-widget>

This code can be integrated anywhere within the Domain Name authorized in the configuration of the store.

Parameters

Nom Default Value  Description Mandatory Example
pip-mode  partial How the PIP is managed NO 'disabled'
hide-controls false Hide the slider controls, see the documentation below NO ‘true’
mode thumbnail Select the display mode NO ‘slider’
see-product-link false See the product link NO true
product   Product ID NO  
collection   Collection ID NO  

For more information on the integration of the slider widget you can read this article :

🔔 Shoppable Content - Technical Integration (Use Cases)

FAQ

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

Was this article helpful?
0 out of 0 found this helpful