Adding 'Add to cart' button to collections [TASTE THEME]

[risotto]

Hi,

I am working with the Taste theme and I want to add a 'Add to cart' button to collections.

Now, having done some research I have managed to achieve the addition of an 'Add to cart' button using this code:

<form method="post" action="/cart/add" class="collection-cart-btn">

<input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />

<input min="1" type="number" id="quantity" name="quantity" value="1"/>

<input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" />

</form>

however it doesn't have the nice functionality of the Taste theme where it brings up a cart notification without redirecting the customer to the cart every time they add a product. This is currently only available via the product page.

What I have done is copied over the code from main-product.liquid that corresponds to the 'Add to cart' button over onto the card-product.liquid, but my limited knowledge of liquid has brought me to a halt and it obviously doesn't work. 

Where am I going wrong? Or am I totally approaching this the wrong way?

Thank you in advance!

Otto

[dmwwebartisan · Accepted solution]

@risotto 

Please share your store URL!

Thanks!

[risotto]

Hi @dmwwebartisan, the build can be found here https://first-testore.myshopify.com/collections

The other issue I have since noticed, is that the 'Add to cart' button on the bundle builder page https://first-testore.myshopify.com/apps/bundles/bundle/105554 also doesn't bring up the cart notification. Since this is a default template of a third-party app, with simple CSS overrides, would there be a way to use JS to make every 'Add to cart' button on the website perform the same way?

Thanks!

[simplebird]

Hi @risotto and @dmwwebartisan 

i was wondering if you solved that problem above.

I was wondering how i can add it to the shop i work on as well: https://www.nutranourished.com/collections/vitamins-supplements

This is Taste-Theme Version 1.0.0. and i have seen, with updating the theme to Version 2.0.0. this Option is available. But as i made changes to the code, I need to customise the entire theme - again. Any idea for a quick solution? 

[risotto]

Hi @simplebird, unfortunately I never managed to get a solution for this one. I did manage to add the 'Add to cart' button under each product in a given collection, however I don't have a workaround for also getting the cart notification to work just yet.

For the time being my thinking is that if there's an active cart notification anywhere on the site, it should be consistent and available on all similar user interactions otherwise it could confuse users. So I'm just happy to keep things to the default UX for now.

I'll be sure to update here if I find a solution, or more accurately, find someone with the solution! 

[mateomoreno]

Hi @risotto, 
I know it's been a couple of months since this issue, were you able to get the notification drawer to work? I am having the same issue, I added the add to cart button, but it takes me directly to the cart page.
Thank you!

[Jahid-KlinKode]

Hi @risotto, discover a straightforward solution to add an "Add to Cart" button on Shopify collection pages by watching this YouTube video: https://www.youtube.com/watch?v=s98l1bUZe6k