How to Set Up Shoppable® DTC Lite (v5)

This article will walk you through how to get DTC Lite set up on your website or blog.

What is DTC LITE v5?

DTC Lite v5 is a compiled Es5 and Es6 compatible single file bundled app of our multi-retailer enabled shopping cart, allowing you to make any page shoppable without the hassle and with no engineering lift required. Once you've implemented your own DTC Lite v5 Cart Script and load your page the cart authenticates itself through Oauth automatically connected to your main Shoppable Platform Account where you can access your cart builder to edit the look and other configurations for your cart. 

1. Cart, Checkout, and Order Confirmation Set up

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

Shoppable Cart Builder

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

C. Branding Section: 

1. Choose your font and highlight or accent color, then, hit "apply"

D. Thank You Page / Order Confirmation Page:

1. Upload your logo. Logo must be Transparent .Png, Minimum 365x120px

2. (Optional) Edit headline and body copy. If you like the default copy you can skip this step. If you edit the copy, select "apply" to see the changes reflected.

3. (Optional) Edit the copy on the email sign-up button.

E. Customer Relationship Management (CRM) Setup

1. (Optional) Edit the copy displayed with the email newsletter sign up

2. Paste in the link to your Privacy Policy and Terms of Use. Then hit "save"

Shoppable_-_Cart_Builder

2. Product Selection


A. Navigate to the left sidebar and hover over  "Products",  then select Find Products



B. Navigate to the search input and begin your search. You can search by keyword (ex. button up shirt) or UPC (ex. 309970231026, a 12 digit universal identifier)



C. Select the product you'd like to add and click on "Add Products", all new products selected will be added to your "My Products" any already existing won't add if you've selected them by error. Duplicate products can't exist in your account.



D. Navigate to the left sidebar and hover over  "Products",  then select My Products.



E. Navigate to the Product Card and click on and copy the "Buy-Button Embed Code". You have 2 different button variations you can select from:

No Variation: You can select this option if you would like for the button to add the exact product to the cart without the need for selecting variations (*if any applicable*).

<a class="btn ripple btn-primary text-center mb-2" style='width: 40%;' 
onclick="ShoppableCart({upc: '309972924605', variation: false});">Add Item 1</a>

With Variations: You can select this option if you would like for the button to add the product to the cart with a variation selector (a choice of Size or Color that takes place on the cart) (*if any applicable*).

<a class="btn ripple btn-primary text-center mb-2" style='width: 40%;' 
onclick="ShoppableCart({upc: '309972924605', variation: true});">Add Item 1</a>

F. Once you've selected a button and copied it you can then paste it on any page you have the DTC Lite V5 Cart Script in. 

Here's an example:

Shoppable Buy Buttons:

Shoppable DTC LITE v5 Script:

Our Buy Buttons have a simple onClick event that triggers our function to add the specific UPC you've selected to the cart. You are not bound to our Buy Buttons, you can initiate the same function with your own triggers/custom code. 

Our functions are bound to the window, you can access the Add To Cart function in the following method if you choose to build a more custom process.

Add To Cart (function)

ShoppableCart({upc: '381370033677', variation: false})

Parameters:

upc (string): Unique 12 digit identifier for the selected product 
variation (Boolean)(*if any applicable*): The option to have the selection of a products variation be displayed on the cart if set to "true"

3. Add Cart and Checkout bundle to your website

 A. Mouse over "DTC Lite" in the left navigation, then select "Copy Cart Script"

Screen Shot 2021-07-27 at 9.32.34 PM

B. Paste the script right before the closing body tag (</body>) of your HTML document. This will ensure the script does not conflict with other potential scripts on the page.

Screen Shot 2021-07-29 at 5.19.09 PM

5. Contact Your Customer Success Manager

Now 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 

6. Send a Test Order

Lastly, send an order through to test your experience. Test orders can be tested on checkout using the test card number 4111111111111111 and number entries for EXP Dates(must be in future) and CVV.

7. Shoppable Events (Optional)

We have created tracking events based on the shopper's usage of the cart. You can subscribe to these events and use the information to integrate them into your custom analytics platform. 

You can subscribe to events with the following method:

ShoppableEvents("TYPE", function(type, data) {console.log(type, data);})

There are different types of events you can subscribe to, according to your use case:

Event Types: 

Detailed: You'll need to subscribe to each individual event accordingly. Each event will have custom shoppable-built event objects based on each type. Each event will include in it

{ShoppableCart: {Object}, ShoppableEvent: {Object}, Time: String}

Type: 'ADD_TO_CART'

ShoppableCart: Includes the current state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
upc: String,
brand: String,
name: String,
color: String,
size: String,
price: String,
quantity: String,
total: String,
image: String,
retailer: String,
retailerTotal: String
}

Type: 'RETAILER_UPDATE'

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
},
previousState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a merchant event, includes the previous retailer and selected retailer.

ShoppableEvent: {
previousRetailer: Object,
selectedRetailer: Object
}

Type: 'QTY_INCREASE'

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
},
previousState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
upc: String,
brand: String,
name: String,
color: String,
size: String,
price: String,
quantity: String,
total: String,
image: String,
retailer: String,
retailerTotal: String
}

Type: 'QTY_DECREASE'

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
},
previousState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
upc: String,
brand: String,
name: String,
color: String,
size: String,
price: String,
quantity: String,
total: String,
image: String,
retailer: String,
retailerTotal: String
}

Type: 'ITEM_REMOVED'

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
},
previousState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
upc: String,
brand: String,
name: String,
color: String,
size: String,
price: String,
quantity: String,
image: String,
retailer: String,
}

Type: 'CHECKOUT'

ShoppableCart: Includes the current state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a checkout event.

ShoppableEvent: {
orderNumber: String
}

Actions: You can subscribe to this event get all actions in relation to the cart. Subscribing to this single event will provide you with all actions throughout the different interactions between the shopper and the cart. You'll always receive the current state of the cart along with the type of action.

Types:

  • CART_INITIALIZED
  • CART_CLOSED
  • CART_OPEN
  • ADD_TO_CART
  • ON_CHECKOUT_VIEW
  • ORDER_PLACED
  • ON_THANK_YOU_VIEW
  • RETAILER_UPDATE
  • QTY_INCREASE
  • QTY_DECREASE
  • ITEM_REMOVED
  • EMAIL_SECTION_INPUT
  • OPT_IN_SECTION_OFF
  • OPT_IN_SECTION_ON
  • SHIPPING_SECTION
  • BILLING_SECTION

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
type: String
}

Form Actions: You can subscribe to this event get all actions in relation to the form inputs. Subscribing to this single event will provide you with all actions throughout the different form inputs entered by the shopper. You'll always receive the current state of the cart along with this type of action.

Types:

  • EMAIL_INPUT
  • OPT_IN_SECTION_OFF
  • OPT_IN_SECTION_ON
  • SHIPPING_FIRST_NAME_INPUT
  • SHIPPING_LAST_NAME_INPUT
  • SHIPPING_ADDRESS_INPUT
  • SHIPPING_ADDRESS_TWO_INPUT
  • SHIPPING_CITY_INPUT
  • SHIPPING_ZIP_CODE_INPUT
  • SHIPPING_PHONE_INPUT
  • PAYMENT_CARD_INPUT
  • PAYMENT_EXPIRY_MONTH_INPUT
  • PAYMENT_EXPIRY_YEAR_INPUT
  • BILLING_FIRST_NAME_INPUT
  • BILLING_LAST_NAME_INPUT
  • BILLING_ADDRESS_INPUT
  • BILLING_ADDRESS_TWO_INPUT
  • BILLING_CITY_INPUT
  • BILLING_STATE_INPUT
  • BILLING_ZIP_CODE_INPUT

ShoppableCart: Includes the current state and previous state of the cart.

ShoppableCart: {
currentState: {
cartInfo: Object,
selectedRetailers: Array,
availableRetailers: Array,
items: Array
}
}

ShoppableEvent: Includes a product event.

ShoppableEvent: {
type: String
}

8. Order API Setup (Optional)

After completing the checkout process you may want to retrieve the order data in order to store it within your own system. An OAuth user name and password will be provided to you. Once you get this information you will need to make the following calls   

Auth request :

curl --location --request POST 'https://orders.shoppable.co:4433/auth' \

--header 'Content-Type: application/json' \

--data-raw '{

   "userId": "userId",

   "password": "Password"

}'

Replace userId with the userId we provided and the password with the password we provided this will return an access token with an expiration time in the following format. 

{

    "auth": true,

    "token": "authtokenI",

    "expire": 1611253796

}

You will use this response to make GET requests using the newly tokenized value provided from the "token" parameter above to authenticate your requests:

Order data range call:

curl --location --request GET 'https://orders.shoppable.co:4433/v3/orderData/100/page/0/startdate/2020-10-01T12:35:42.025Z/enddate/2020-10-01T12:37:42.025Z' \

--header 'x-access-token: yourAccessTokenForm First request' \

Order-Data Range Parameters:

  • rows: the number of rows you are request
  • page: the page offset for paging
  • startdate: the date and time of the first order you want to request in Iso format
  • enddate: the date and time of the first order you want to request in Iso format

Order data call:

This returns the data to a specific order.

curl --location --request GET 'https://orders.shoppable.co:4433/v3/orderData/{order_number}' \

--header 'x-access-token: yourAccessTokenForm First request' \

Order-Data Parameters:

order_number:  is the order you want to get information about we return this order_number  in the thank you page to redirect

Order API EndPoints:

Staging:

https://orders.shoppable.co 

Production:

https://orders.shoppable.com

9. Shoppable Analytics (coming soon)

A comprehensive and complete breakdown of all the analytics data offered through the Shoppable Dashboard according to the new DTC v5 integration and its benefits.