Add To Cart Notification
BricksUltimate introduces an "Add to Cart Notification"—a small popup that appears in the bottom-right corner of the browser when a customer adds a product to their cart.
Key Features:
✅ Instant Feedback – Confirms the product was successfully added to the cart.
✅ Product Details – Shows the product name, image, and price (optional).
✅ Quick Actions – Includes buttons for "View Cart" and "Checkout" to improve conversion rates.
✅ Customizable Design – Adjust colors, animations, and positioning to match your store’s branding.
How It Works:
- Customer adds a product to the cart.
- A smooth popup appears in the bottom-right corner with:
- ✔️ A success message (e.g., "Product Added to Cart!")
- 🖼️ Product thumbnail & name (optional)
- 🔘 "View Cart" (takes them to the cart page)
- 🔘 "Checkout" (skips straight to checkout)
- The notification auto-hides after a few seconds but can be manually closed.
Why It’s Useful?
🛒 Reduces Cart Abandonment – Customers get instant confirmation, reducing uncertainty.
🚀 Faster Checkout Access – One-click buttons help speed up the purchase process.
🎨 Seamless Branding – Fully customizable to fit your store’s style.
Example Use Case:
A customer adds a "Blue T-Shirt" to their cart. Instantly, a small popup shows:
"Blue T-Shirt added to cart!"
$19.99
[ View Cart ] [ Checkout ]
This improves trust and encourages them to complete their purchase.
Step-by-Step Setup Guide
Step 1:
- Go to Bricks -> Templates -> Add New Template
- Enter the title
- Select "Section" from the Template type dropdown
- Click on "EDIT WITH BRICKS" yellow button
- Open the Bricks editor
Step 2:
After opening the bricks editor, you follow this:
- Add the DIV or BLOCK element on the canvas
- Turn ON Query Loop checkbox
- Click on Query's "Infinite" icon
- A popup will come and setup the query parameters like this way:
- Select "Product" from the Post Type dropdown
- Set Posts per page = 0
- Turn ON Disable query merge
- Add two DIV elements inside the Loop wrapper
- Put the image element inside the 1st DIV element and enter "Feature Image" dynamic tag
- Add the Basic Text element inside the 2nd DIV element and enter the {post_title} added to cart text.
- If you want the View Cart and Checkout buttons, you enter two Button elements there.
Layout on the builder editor
Step 3:
- Go to your dashboard
- Click on the Bricks -> BricksUltimate menu
- Click on the MISC tab
- Scroll down the page and go to the Add To Cart Notification section
- Choose your Add To Cart Notification template from the dropdown
All setup is done here. Now go to the frontend and add the product to the cart. You get the small popup at the bottom-right corner of the browser window.