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.

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

---

✅ 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:

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