
When a user is adding a product to the cart, a success message box will pop up on your site for a few seconds and it will disappear with the slide-out transition effect. So the customer can understand that he adds the product successfully to his bag.
This feature is fully flexible and you control the full design layout from your Breakdance editor.
Step 1: Make sure that you installed and activated the PowerElements add-on on your site.
Step 2: At first we create 2 global blocks with the Breakdance editor.
- Navigate to Breakdance -> Global Blocks page.
- Click on the “Add Global Block” button
- A popup window will come and enter the block template title

4. Now open the Breakdance editor of this block and create the product layout.
5. Add a DIV wrapper
6. Add an Image element inside that DIV wrapper and set the dynamic tag “Post Featured Image“.
7. Now add another DIV element just below the Image element and set the Flexbox CSS to this DIV element
8. Add the Text element and set the “Post Title” dynamic tag. Under the Advanced -> Append input field, add “has been added successfully.” text like the bottom image

9. Add two Text Link elements and create the View Cart and Checkout buttons.
10. Product layout is completed here now.
Now we create another new global block. Click on the “Add Global Block” button, enter a title like “Added To Cart Notice” and save it. Now open the Breakdance editor of this block and add the “Post Loop Builder” element there. Select the global block “Added To Cart Product” and click on the Query -> Custom -> Edit Query button. A popup will come and set the query like the bottom image.

Step 3: Go to Breakdance -> PowerElements -> MISC tab and select the “Added To Cart Notice” block from the dropdown. Click on the “Save Changes” button and save the settings.

Step 4: Now go to the shop, archive, and product listing pages. Click on the “Add To Cart” button and add the product to the cart. Your notice box will appear at the bottom of the page.
Leave a Reply