Cart

This layer makes adding products to a basket possible. In the image or video items can be added to a basket and when you're done shopping, when you click the cart icon, you will be lead to a checkout page.

Prerequisites

• You need a commercial license for Spott
• You'll need a webshop with products that have a specific ID that can be referenced to 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.
• This works for Shopify

There are 3 steps

1. Create a product
2. Add an advanced layer to your media, link the product, make it addable to the cart
3. Add the cart with the link to the checkout page

1. Create a product

• Import your products into Spott. Learn how in this article.
• Make sure each product has an ID, similar to the productID in your webshop
• If you don't like adding products manually, check out our guide on how to link a product feed or how to link a Google Spreadsheet. 

2. Add a layer, link a product, make it addable to the cart

• Add any advanced interactive Spott (You need the commercial subscription)
• In the content tab, subgroup Button:  Set the "Open in" option to cart
• You can add multiple products on your media, using different interactive layers

3. Add the Cart with the link to the checkout page

• Add the cart layer on the media
•  Spott
  • Icon: you can change the cart icon to any icon you want
  • Pauze on hover: for video only
  • Size: of the cart icon
  • Color: of the Cart background

• Cart
  • Base URL: Add your store URL in the "Base URL" field.
    Shopify:  https://store.myshopify.com/cart/add?
  • For each item:
    Shopify: id[]={id}
  • Separator: 
    Shopify: &
    
  • Group products: If your webshop supports multiple items, turn this option on. When turned off, the products will not be added together but as separate products.
  • URL postfix: If you need to add certain parameters at the end of your URL, add them here.

• Counter
  • Position: where you want the counter to be
  • Background color
  • Text color
  • Size
  • Padding