Shopify merchants who use headless solutions can easily enable and install Cashback on their stores. Below we outline the steps for such a merchant to go live with a percentage-based Cashback product.
For a product overview about how Cashback works at a product level, see this Loom:
https://www.loom.com/share/799ac34ad0854607ba5fd80962f6d12a
A Shopify admin installs the custom Shopify app provided by Fondue. This one-click installation is not technical and takes at most 2 minutes.
Fondue will setup the Cashback product in the merchant’s Shopify backend. The specification of that product will depend on the request of the merchant.
For the remainder of this document, consider that the merchant requested to provide a 20% Cashback to shoppers. In this case, Fondue would create a “20% Cash Back” product for the merchant. Like any Shopify product, this would be associated with a unique ProductID and VariantID.
In order to identify which shoppers should be given Cashback, Fondue often utilizes a UTM-based approach. Shoppers with Cashback arrive at the website with a UTM of ?cashback=[Cashback_code] which could have been the result of clicking on a link from an email or SMS. For these shoppers, the merchant want to put the appropriate Cashback into their cart.
Here is sample code for how a Shopify merchant can get the Cashback code from the URL params and validate the code via Fondue API. The response will return if this code is valid or not (return Cashback data in case the code is valid). Obviously, the precise usability of this code will depend on the headless merchant technical environment.
// Map code to the Shopify variantID:
const map: {
"cashback-20": "123456789"
}
// Extract the CashBack URL param
const urlParams = new URLSearchParams(window.location.search)
const siteWideCode = urlParams.get('cashback')
const variantId = map[siteWideCode]
// Adding cashback product into cart
for (const value of Object.values(cashbackProducts)) {
await window.fetch('/cart/add.js', {
body: JSON.stringify({
items: [{
quantity: 1,
id: variantId
}]
}),
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'xmlhttprequest'
},
method: 'POST'
})
}