# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.dollarlabs.io/dollarback-store-credit/show-rewards/custom-slide-carts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.