How to trigger Add To Cart notification for a different product from the PDP?

Shopify Discussion

Topic summary

Goal: Add an upsell button on a product detail page (PDP) that adds a different product (Product B) to the cart and triggers the standard “Add to cart” notification showing Product B.

Context: Store uses the Dawn theme. The author attempted to leverage the existing cart-notification element.

Implementation attempt: A custom JavaScript handler calls /cart/add.js with variant ID, quantity, and selling_plan, then fetches /cart.js, and finally tries to reveal the notification by toggling the #cart-notification element’s display style.

Issue: The author suspects they are not using the cart-notification properly, as the standard notification behavior is not appearing as expected after adding the alternate product.

Latest update: No solution was provided. Another participant followed up asking whether a fix was found. The thread remains unresolved.

Notes: A code snippet is central to the discussion; no images or other attachments were mentioned.

Summarized with AI on December 27. AI used: gpt-5.
1

Hi everyone!

I want to offer an upsell on the PDP, with another button. This button will add a different item to the cart, and the standard add to cart notification with the product added should show up.

So for example, I might be on the pdp for Product A, but when pressing the upsell, it adds Product B, with the add to cart notification showing Product B has been added.

I’m using Dawn theme. I tried to use the cart-notification ID, but I don’t think I’m using it properly.

This is the function I’m using to handle the button click:

function handleAddToCartClick(event) {
event.preventDefault();
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: membershipVariantId,
quantity: 1,
selling_plan: sellingPlanId
})
})
.then(response => response.json())
.then(data => {
if (data.status === 422) {
alert('Could not add product to cart.');
} else {
// Fetch the updated cart data (optional)
fetch('/cart.js')
.then(response => response.json())
.then(cartData => {
// Show the cart notification popup
const cartPopup = document.getElementById('cart-notification');
if (cartPopup) {
cartPopup.style.display = 'block';
}
});
}
})
.catch(error => {
console.error('Error adding product to cart:', error);
});
}

Thanks for your help in advance!

2

Hello. It has been a while, but did you find a solution for what you were trying to do?