Add a product to the cart when a CTA is clicked (Shopify)

Lisa Fockens Updated by Lisa Fockens

Configure the CTA

First, let's ensure that the button in your campaign is set up correctly. Choose the action "Close the popup." You also need to ensure that the "Track clicks" option is checked:

Create a JS callback

The next step is to add some custom logic when the CTA is clicked. Let's create a JS callback on the event. After tracked click:

Update the Shopify cart from the callback

Use the following snippet in the callback code:

Shopify.addItem(XXXXXXXXXX, 1, function () {
window.location.href = '/cart';

You must replace XXXXXXXXXX by the variant ID, you want to add to the cart. Follow the Shopify documentation to find a variant ID.

The number at the right of the variant ID, 1 in the provided snippet, stands for the number of items to add to the cart.

Finally, the following line will redirect the visitor to the cart page once the product has been added to the cart:

window.location.href = '/cart';

It is important to redirect after the product has been added because the cart widget is not automatically updated. If you want the visitor to stay on the same page, you could use this line instead:


Don't hesitate to contact our support if you have any questions.

How did we do?

Apply a Shopify discount code to the cart