💲
DollarLabs Helpdesk
  • 💰Dollarback: Store Credit
    • 🚀Get started
      • Configure Order Goals
      • Set fixed amount cashback
      • Set percentage casback
    • 🫴Show rewards
      • Product Page
      • Cart Page
      • Custom Slide Carts
      • Cashback Widget
      • Checkout Block (Shopify Plus)
      • Customer Account
      • Thank you
    • 💁Referral Engine
      • Referral Analytics
    • 📩Notifications
      • Klaviyo
      • Inbuilt Email
      • Shopify flow
    • ⚡Automations
    • 📊Analytics
    • ⚙️Settings
    • ❓FAQ
  • 💲Dollarlabs: Ultimate Discounts
    • 🚀Quickstart
    • Discount types
    • Discount Engine (v2)
      • Cart groups
      • Rules
      • Targets
      • Examples (v2)
        • Get $60 off on each item when purchased in pairs
        • Discount every item except the first item
    • Discount Engine (v1)
      • If X, then do Y
      • Line Limit Strategy
      • Global Line Limit Strategy
      • Discount Application Strategy
      • Discount combinations
      • Rule Builder Variables
      • Invert Logical Operation
      • Bulk Code Generation
      • ⚠️Limitations of Discount engine (v1)
      • Examples (v1)
        • 📦Product Discount Examples (V1)
          • Offer a discount to your VIP / Subscription customers
          • Offer a Free product and a one time discount for subscription purchase
          • Volume discount based on quantity for eligible products
          • Single discount code to apply different discount amounts for different product categories
          • Automatic discount for B2B customers
          • Discounts based on user's purchase market / region
          • Give product for free if the cart value is above $X
          • Buy X items specified to get a discount on Y items. (Buy X Get Y - Bx Gy)
        • 🛒Order Discount Examples (V1)
          • Tiered Cart Discounts: Reward Customers Based on Their Cart Value
    • 🛒Auto add gift to cart based on discount code (plus only)
    • 💼Price lists (B2B)
      • How to setup a price list ?
      • Show the discounted price on the Product page
      • Show Volume breaks on Product page
      • Show discounted prices on the collection page
    • ⚠️Function limitations by Shopify
Powered by GitBook
On this page
  • 🛠️ What You'll Need
  • ✅ Steps to Implement
  • 📌 Additional Notes
  • 💬 Need Help?
  1. Dollarback: Store Credit
  2. Show rewards

Custom Slide Carts

PreviousCart PageNextCashback Widget

Last updated 2 days ago

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


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

jsCopyEdit// insert the class above which you want to render the cashback
const renderAbove = '.drawer__footer'; // replace with your class

// observe cart container for changes
const observeClass = '.cart-drawer'; // replace with your cart container's class

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.

This pre-written script: 👉

💰
🫴
View and Copy the JS Code