Solved

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

risotto
Shopify Partner
3 0 1

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

 

 

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12267 2545 3688

This is an accepted solution.

@risotto 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

dmwwebartisan
Shopify Partner
12267 2545 3688

This is an accepted solution.

@risotto 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
risotto
Shopify Partner
3 0 1

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
Shopify Partner
1 0 0

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
Shopify Partner
3 0 1

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
Shopify Partner
7 0 1

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
Excursionist
145 1 4

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