I have added the "add to cart" button but now I need this. Here is the code if it helps somebody

[RaulDanielMX]

Hello! I´ve added the "add to cart" button on debut. Here is the code if it helps to someone. 

Actually if you clic on button it returns you to the same page, instead to send you to the cart page. 

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Agregar al carrito" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>

But now I want this. When someone clic the "add to cart" button I want that the page shows this notice:

It only appears when you add a product to the cart but in the product page. I want this notice also appears when I add a product in the "add to cart" button that I added. Thanks

[UmairA]

Hey there @RaulDanielMX,

I'm wondering why you want to add the "Add to cart" button through coding? Every theme comes with an Add to cart button by default which takes the user to the cart page when clicked. I guess you added the code thinking that it'll add the popup (Which you posted in the screenshot above). The popup is a part of the AJAX add-to-cart system, if your theme supports AJAX for adding products to the cart then check on your theme customizer on the cart page to enable the popup otherwise you'll have to add the AJAX cart functionality through some advanced coding.

Hope that helps.

[RaulDanielMX]

Hello @UmairA , I know themes have the add to cart button in the product page, but they doesnt have the "add to cart" button in the collections, just like this: 

The pop up only works when you add a product to the cart in the product page, but it doesnt appears when you add a product in this button that Ive just added

[RaulDanielMX]

I was thinking to change something in the code theme, maybe here like you say in the ajax function, What do you think?