Help Center

Setup & Developer Documentation

Shoppable® DTC Lite Setup Guide

This article will help you setup DTC Lite (v6) set up on your website or blog.

What is DTC LITE?

Shoppable® DTC Lite is a standardized e-commerce product that helps you embed Shoppable multiple-retailer checkout technology on an existing website.

DTC Lite is a single-file bundled app of our multi-retailer enabled shopping cart, checkout, and thank you page. It allows you to make any page Shoppable.

This guide will help you integrate Shoppable DTC Lite into your existing website. (If you don't have an existing website or application, you may want to check out Shoppable Instant Shop which does not require an existing website to use our technology.)

1. Cart, Checkout, and Order Confirmation Set up

A. Log into your Shoppable account and then mouse over "DTC Lite" in the left navigation.

B. Then click "Cart Builder" to open up your cart to begin customizing it.

C. Branding: Enter your brand name as you want it to appear to consumers. Choose your font and highlight or accent color, then, hit "SAVE"

D. Thank You Page / Order Confirmation Page:

1. Upload your logo. Logo must be Transparent .Png, Minimum 365x120px
2. Optional) Edit the copy on the marketing opt-in section.
3. (Optional) Input your privacy policy and terms. You can hyperlinklink.

E. Thank you Page: Upload your logo and update the language to suit your brand.

F. Configuration: Enter your staging website

G. Click SAVE. Your staging cart is now ready to be added to your website.

2. Attaching the Checkout Script to Your Website

You can copy the cart script by clicking on the icon as seen above on the cart builder page. You can also click "DTC" in the left navigation, then select "Copy Cart Script".

Start attaching the script tag to the header of your page. It is small in size and won't delay loading of your page. Use “https://cdn.shoppable.com/dtc6/dtc.all.min.js" as production src

<script 
  data-token=“<<Your Cart Token>>" 
  defer="" 
  id="shoppable-cart-script" 
  src=“https://cdn.staging.shoppable.com/dtc6/dtc.all.min.js”
//  src=“https://cdn.shoppable.com/dtc6/dtc.all.min.js” *production
  data-lang=“en”>
</script>

3. Shopping Cart Icon

Here is a sample cart icon for your DTC enabled website. With the following element you will toggle the Shoppable Cart and display the number of items in the cart. There must be an empty element with “#shoppable-cart-quantity” id in DOM. Script will find the element and update the contents of it.

<button class=“" href="#" id=“shoppable-cart-button”
  onclick=“window.toggleShoppableCart()”>
  <span class=“" id=“shoppable-cart-quantity”>0</span>
  <svg class="" fill="none" stroke="currentColor" stroke-width="1.5"
     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" stroke-linecap=“round" stroke-linejoin="round"/>
  </svg>
</button>

4. Product Selection:

There are three ways you can select products:

Curate Products in the product section. You can search by name or UPC.
You can mass-import products using a Shoppable Brand Feed File (Please request this template from your Customer Success Manager)
Using Shoppable's Catalog API (The developer documents can be found here.)

Products you have selected/added will populate in the "My Products" section of the Products page of your account.

Variations:

Product variations such as a size and color can be set up in two ways:

1. Option 1: You can add the variation selection directly on your website page. (This is recommended if you have many options.) This means the shopper will select the variation on your page, then add it straight to the cart.

2. Option 2: Shoppable can handle the variations at the cart level. This means the shopper will add to cart, then the cart pops up with the options for the shopper to select.

When you're ready to add the buy button to your website, you'll click the three vertical dots on the product in your My Products section, then select the buy button option you want. If you don't want to manually add products, you can use the API to do it programmatically.

Add to Cart function

Sample add to cart function is as follows. Products object will carry an array of products that will be added to cart. Product name will be used in the preview when the product is being added to cart. With this function you can combine multiple products as a bundle and add them to cart simultaneously. If you provide more than one product variation will be disregarded and set as false.

products.upc = Barcode code of the product that will be added to cart
products.name = Name of the product, this will be shown in the loader
product.quantity = number of the products that will be added to cart
variation = If variation set to true cart will display a variation selector to shopper (as in beta this is set to false all the time)

window.addToShoppableCart({
  products: [{
  upc:number,
  name:string,
  quantity:number
}],
  variation: boolean
})
Sample button can look like this
<a onclick="window.addToShoppableCart({
  products: [{
    upc:’00037000870876',
    name:’Pampers Sensitive Baby Wipes - 168ct’,
    quantity:1
}],
  variation: false
})”>Buy Pampers Sensitive Baby Wipes - 168ct</a>

Adding Multiple Products (Product Bundles) to the Cart
The addToShoppableCart function supports adding multiple products at once by accepting an array of product objects. Each product object should include the upc, name, and quantity properties. When multiple products are provided, the variation parameter is automatically set to false, as variation selection is not supported for bundles.Function Parameters:

products: An array of product objects to be added to the cart.
- upc (string): The Universal Product Code of the product.
- name (string): The name of the product, displayed during the add-to-cart process.
- quantity (number): The number of units to add.
variation (boolean): Determines if a variation selector is displayed. Set to false when adding multiple products.

Example Usage:
To add a bundle of products with a single click, implement the following code:

<a onclick="window.addToShoppableCart({
products: [
{
upc: '03616302990115',
name: 'Kind and Free Moisturizer',
quantity: 1
},
{
upc: '03616304350474',
name: 'Lasting Mega Matte',
quantity: 1
}
],
variation: false
})">Buy Bundle</a>

In this example, clicking the "Buy Bundle" link adds both the "Kind and Free Moisturizer" and the "Lasting Mega Matte" products to the cart simultaneously.

Cart Events

With DTC v6 we are broadcasting cart events through window object. Therefore, you must listen to shoppable events as in the sample code below.

window.addEventListener("onCartLoaded", (event)=>{
  const cartContent = event.detail.cartContent
  const eventSpecificData = event.detail.eventSpecificData
  const eventName = event.type
  console.log(eventName, JSON.stringify(cartContent), JSON.stringify(eventSpecificData))

})

cartContent will carry the up-to-date cart status (except onCartOpened and onCartClosed event) with available merchants and products in it. Available events and events specific data related to the events are as follows. Please note these events and data is subject to change and this document will be updated correspondingly. cartContent object is as follows:

{“subTotal":49.99,
“total":54.99,
“totalProductQuantity":1,
“estimatedShippingFee":0,
“isMarketingOpted":false,
“isSecondaryMarketingOpted":false,
“isSubstitutionOpted":true,
“taxRate":0.1,
“paymentMethod":null,
“orderNumber":"",
“estimatedTax":5,
“merchants":[{
  “isFreeShipping":true,
  “merchantId":"66463e9e59d7c95074d5ea32",
  “name":"Target",
  “logo”:"merchant log",
  “freeShippingThreshold":35,
  “shippingCost":5.99,
  “minimumOrderAmount”:0,
  “subTotal":49.99
  “products":[{
    “name":"product name”,
    “upc”:"upc code",
    “images”:["image url"],
    “variantLabel":"variation label”,
    “color":"Product color”,
    “description":"",
    “quantity":1,
    “salePrice":49.99,
    “price":69.99,
    “id":"66463e9e59d7c95074d5ea32-00190199801561",
    “merchantId”:”66463e9e59d7c95074d5ea32",
    “availability": [{
      “merchantId":"66463e9e59d7c95074d5ea32",
      “name":"Target",
      “salePrice":49.99,
      “price":69.99,
      “logo”:"merchant log",
      “freeShippingThreshold”:"35",
      “shippingCost":5.99}]}]}]

eventName	eventSpecificData
onCartOpened	null (cartContent will also be null)
onCartClosed	null (cartContent will also be null)
onCartLoaded	null
onCartFailed	string: Reason for cart failure
onAddToCart	Product[]: array of products that are added to cart
onRemoveFromCart	Product: product object that is removed to cart
onQuantityChanged	Product: product object prior to quantity change
onMerchantChanged	Product: product object with prior merchant
onCheckoutStarted	null
onSubstitutionConsentToggled	boolean: Shopper consent choice for substitute
onMarketingConsentToggled	boolean: Shopper’s consent choice for marketing
onExpressCheckoutStarted	string: identifier for wallet used for express checkout ex: apple_pay
onPaymentStarted	null
onPaymentFailed	string: Reason for payment failure
onOrderPlaced	string: Order number
onCartReset	null

Address Validation DTC Lite V6:

Shoppable controls the checkout so address validation is done by Shoppable within the widget. Shoppable has implemented rules that require the validation to pass all checkpoints when the shopper places the order.

Contact Your Customer Success Manager

Contact your Customer Success Manager to let them know you're ready to launch. They will assist you with final checks before you launch. If you don't have a CSM, please email CS@shoppable.com