# Custom Slide Carts

If you're using a custom slide cart on your Shopify store and want to show the **exact cashback amount** a customer will receive, you can easily do this using our `window.dollarbackCart` variable and a simple script.

{% embed url="<https://youtu.be/Nu80soGiRt4>" %}

This method works across **any custom slide cart**, as long as the cart is rendered in the DOM and not dynamically inserted after page load.

### 🛠️ What You'll Need

* Access to your theme’s code (via **Edit Code** in the Shopify admin)
* The correct container and reference classes from your cart
* This pre-written script:\
  👉 [View and Copy the JS Code](https://pastefy.app/c7bCw8BT)

***

### ✅ Steps to Implement

#### 1. **Check Slide Cart Rendering**

Before proceeding, confirm that your cart drawer exists in the DOM **on page load**. Here's how:

* Open your store.
* Click the cart icon.
* Right-click inside the cart and choose **Inspect**.
* Close the cart. If the cart’s HTML disappears from the DOM, it’s **dynamically rendered** and this method **won’t work** without further customization.

If it stays in the DOM: proceed ✅

***

#### 2. **Decide Where to Show Cashback**

For example, if you want to show cashback **above the subtotal**, locate the class for that section — typically something like `.drawer__footer`.

Copy that class — you'll use it to tell the script where to insert the cashback info.

***

#### 3. **Open `theme.liquid` in Edit Code**

Go to:

* **Online Store > Themes > Actions > Edit Code**
* Open `theme.liquid`

Paste the script (from the link above) **before the closing `</head>` tag**.

Make sure it’s wrapped inside `<script>` tags.

***

#### 4. **Edit the Script**

In the script you’ll see:

```js
// insert the class above which you want to render the cashback
const drawerFooter = document.querySelector('.drawer__footer'); // change this to your class

// observe cart container for changes
// Insert your cart drawer class here / the top element that you want to monitor (Step 2)
const cartDrawer = document.querySelector('.cart-drawer');
```

Update these two lines based on your store's class names.\
⚠️ Don’t forget to include the `.` when referencing classes.

***

#### 5. **Style as Needed**

The cashback display is fully customizable. You can update the CSS in the script to match your store's branding — colors, fonts, layout, etc.

The default style is a green gradient badge showing the cashback amount.

***

#### 6. **Enable the App Embed**

Make sure the **Dollarback Cart Embed** is enabled in your **App Embed settings**. This is required for the `window.dollarbackCart` variable to be available across the site.

Go to:

* **Online Store > Themes > Customize > App Embeds**
* Toggle on the **Dollarback Cart Embed**

***

### 📌 Additional Notes

* Works on any static slide cart or inline cart.
* Automatically updates cashback on cart quantity or content changes.
* Fully customizable using the data from `window.dollarbackCart`.

***

### 💬 Need Help?

If your theme is older or the integration seems tricky, feel free to reach out to our support team. We’re happy to help you get it set up.