How This App Works
This app adds volume discounts and/or waterfall discounts (e.g. based on cart subtotal) automatically at the product level. E.g. you can do things such as:
Buy any 2 items in collection A, get X% off, buy 4 or more items get 20% off.
Spend $100 on items in collection B get X% off each product, spend $200 get Y% off, spend $350 or more get Z% off.
Installation Instructions
You can install the app in Shopify here.
After installing the app from the Shopify App Store you will be navigated to the app’s screen.
Click on “Create New Automatic Discount.”
Give your new discount a Title and set the Discount Message; the message is what’s shown to the customer as the promo code text.
Choose which type of discount to create:
Volume Discount - E.g. buy 3 products from a collection get 10% off
Cart Subtotal Discount (a.k.a. Waterfall discount) - E.g. spent $100 on a collection get 20% off.
Select options. You can enable or disable your discount, determine whether it’s app exclusive, and set if customers must be logged in to receive discount.
Then set discount percentages (volume discounts) or cart subtotal thresholds (waterfall discounts). You can set up to five thresholds for each.
Finally, select the members of this discount. You can add collections and/or individual products.
Create a custom block
Add this custom block to either the Cart (if already on React) or home page. This simple block adds the sales-channel: tapcart cart attribute automatically after 500ms.You can copy and paste this directly into a new custom block in your dashboard.
import * as React from "react";
// https://docs.tapcart.com/docs/app-actions#cartupdateattributes
export default function AutoSetCartAttributesBlock({ blockConfig, useActions, __tapcartDashboard }) {
const webbridgeActions = useActions();
// Using useEffect to trigger the navigation after component mounts
React.useEffect(() => {
// Add a small delay to ensure the app is fully loaded
const timer = setTimeout(() => {
// Set cart attribute
webbridgeActions.action?.("cart/updateAttributes", {
attributes: [{key: 'sales-channel', value: 'tapcart'}]
});
}, 500) // 500ms delay for reliable execution
// Clean up the timer if component unmounts
return () => clearTimeout(timer)
}, []) // Empty dependency array means this runs once after initial render
if (__tapcartDashboard) {
return <div className="p-4">Auto Add Sales Channel Cart Attribute (No UI)</div>;
}
// Return null to make the component invisible (no rendering)
return null;
}