Skip to main content
All CollectionsAdvanced Design
Automatically add products to the cart
Automatically add products to the cart

Auto add products to the cart by providing a link to your customer.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

This is a way that you can add items to the cart automatically by just navigating to a link on your store.

How it works:

On click of the button, the button will bring them to a page with a message "We're adding the items to the cart" and then redirect them to the cart with the additional new items.

How to set it up:

The anatomy of it is the following.

  1. We create a content page that contains the products we want added to the cart and the message we want to display to the user e.g. "We're adding the items to the cart"

  2. We create a custom layout for this page

  3. On the custom layout we hide the products from the view and then add a small javascript snippet that auto clicks the product's add-to-cart buttons. Then the customer is automatically redirected to the cart.

Step 1: Create a content page and add your products

The next step is to create the layout and apply it to our new page

Step 2: Create a new layout, add widgets, and apply it to the new page.

  • Add the "HTML Content" widget

  • Add the "Product list" widget

Then apply the layout to the page

Now view the new page and make sure you can see the message and the products.

Don't see your products?

  • If you don't see your products, check to make sure that you have followed the above steps and then check that you have access to these products via your catalog container.

  • Check that you add the "Products list" widget in Step 2.

Step 3 : Hide the products on the page

  • Now go to your layout and add into the "product list" widget the below css classes

  • "auto-add-to-cart hide"

Step 4: Add the "add to cart" script.

Now, copy/paste the below script into the HTML widget

<script>
setTimeout(function () {
//wait until the items are in the DOM
var groupProductsBtn = document.querySelectorAll('.container:not(.mobile) .auto-add-to-cart .btn-add-to-cart');
// click each of the buttons
var i;
for (i = 0; i < groupProductsBtn.length; i++) {
groupProductsBtn[i].click();

}
window.location.replace("/cart");
}, 1000);
</script>

Step 5: Get the link and do a test

Now get the url of your new page and navigate to it to see it all in action.

Final Step: Add your url link to a button, banner, or add it to an email marketing message.

πŸš€ Have an awesome day!!

Did this answer your question?