In the following example, you can try out the add-to-basket functionality. Try adding a few items throughout the video, and when you're done shopping, click the shopping cart icon. You will be lead to a page that has all your added products in the shopping cart!
The store and products are meant for demo purposes only. No information is real or can be bought.
How it works
For the end-user, the add-to-basket functionality works in a few simple steps as seen in this image.
- Throughout the video, add one or more products to your basket inside of the video. You will see that the basket reflects how many items are currently in your basket.
- At any time, click the shopping cart icon to send the products to your store.
- You will be redirected to your store's checkout or cart page with all the products inside the cart, ready for checkout.
Step by step
To start off, gather a few bits of information about your webshop before continuing.
- An obvious one: you'll need to have a webshop with products added! Just check that all products must have a specific ID that can be referenced in Spott.
- Your web platform must support adding products by means of a URL.
This typically looks like this:
https://examplestore.com/cart/12345:2, where "12345" represents the product ID, and "2" is the number of items that need to be added. More information can be found below in the additional info.
Out-of-the-box, Spott supports webshops that are running on Shopify. So if you have a Shopify shop, you're all set!
Step 1: Create assets
First, you have to import your products into Spott as assets. If you haven't done this before, learn more about assets in this article.
When adding products, make sure you have a field that has the ID of the product filled in. We need this to reference the same product inside your webshop.
You can fill this in the default ID field, or in a custom field. Either one will do and the name of the custom field doesn't matter, as long as it's the same on all your assets.
Step 2: Create your widgets
Widgets will take care of the basket functionality. You'll have to create at least two types of widgets.
One type of widget will take care of adding the product to your basket, while the second will count the products and lead users to your checkout page.
Add to basket
The add to basket action is available on any type of widget as a click action.
If you haven't learned how to make widgets, set the click action, or fully customized them, see this article.
When the click action "add to basket" is selected, make sure to reference the product id in the second below.
Shopping cart widget
The shopping cart is a separate widget that needs to be created. This widget takes care of the number of items available in your basket and will redirect the user to your checkout or cart page.
When created, under "click action", you can set up the required information and handle the logic required for this functionality to work.
For these settings, we have premade a few templates that you can use. For now, only Shopify is supported. The following templates are available:
- Shopify checkout: this will lead the user straight to the Shopify checkout page where they have to fill in the shipping and payment details.
- Shopify add to cart: this template will add the items to the cart page, where the user still has the chance to continue shopping, add additional products, remove them, etc.
Simply select one of the templates and replace the Base URL field with your own store.
https://your-store.myshopify.com/cart/ will become
https://spottdemo.myshopify.com/cart/, you can leave the other settings as-is.
Note: These current templates installed are available for Shopify stores only. Though you can easily create your own pattern for your own web store system. If you have a suggestion to implement a different web store, please let us know on our public roadmap or create a ticket.
Step 3: Put it all together
The final step is to put all the different elements together in the Spott Studio to create your interactive video with add-to-basket functionality. You'll need to add both the widgets and the assets in your video.
We won't go in-depth here to make your first video interactive, if it's your first time or you need some extra help, learn more about this here.
Start by adding in the assets (or products) at the right place at the right time in your video, give them the Add to basket widget you made in step 2.
Then add the shopping cart widget to your video. This widget can be placed anywhere in the video. Though we advise putting the widget for the full length of the video, then users can check out their items at any time of the video.
That's it, now you can preview the working result and put it live on your webshop!
The Shopping cart widgets require some critical fields which can make or break the add-to-cart functionality. If you're not following the templates, find some more information about the fields here:
- Base URL: The Base URL is the URL that comes before any product information is shown.
- For each cart item: This is the structure your URL will result in
- Separator: This is the delimiter that splits products from each other
- Group products: If your webshop structure supports a number of items, turn this option on. When turned off, the products will not be added together but rather will be added as separate products.
- URL postfix: If you need to add certain parameters at the end of your URL, add them here.
- Example: If you have set up the previous parameters correctly, find an example of the final URL here.
- Pause video when widget is displayed: You can choose to pause the video when the widget is displayed on the screen.