Add 'Add to Cart' button on collection page - Impulse theme

[Daisymaria]

Hi there, I am trying to add the quick view 'Add to cart' button on my collection pages. I am using the Impulse theme. Any help would be much appreciated! Thank you

[JHKCreate]

Hello @Daisymaria 

How proficient are you in Liquid/Coding? Let us know! 

Should you prefer, we can get this done for you shortly. Your call!

Cheers

[Daisymaria]

@JHKCreate thank you! I am ok with small coding changes but if there is a lot I will probably need help.

Thanks again!

[JHKCreate]

It shouldn't be much, would you mind if we requested Collaborator Access and provided you with the solution here? Just for us to assess !

[Daisymaria]

Of course, thanks! My website is https://www.lofte.uk/

[JHKCreate · Accepted solution]

Hi @Daisymaria 

We've added the button directly as it was a simple approach, sharing the code below for reference that was added towards the end of the product-grid-item.liquid file:

{% assign current_variant = product.selected_or_first_available_variant %}
<div class="product-block" style="margin-top:20px;">
{%- render 'product-form',
form_id: form_id,
product: product,
show_dynamic_checkout: block.settings.show_dynamic_checkout,
current_variant: current_variant
-%}
</div>

Let me know what you think!

[Daisymaria]

Thank you so much for this! The only issue is it has now thrown off the location of the wishlist button - are you able to fix this? The little heart button is now appearing in odd places? @JHKCreate Thanks!

[JHKCreate]

Indeed, this has been adjusted!

If this solves your issue please don't forget to mark as solution and like to increase solution visibility!

Cheers

[Daisymaria]

Hi, of course! Sorry just one more thing to keep it looking clean - is it possible to get the button to line up with the others on each row? Thank you so so much for your help!!

[JHKCreate]

@Daisymaria to align the buttons all the elements above it, we would need to have the same height at all times (product title, swatches, etc...), this would be more complex to do with our current scope as we would need to handle quite a few cases here. Cheers!

[cybko]

The solution is great, however, it opens the cart page instead of the cart drawer. Do you know how to change this by any chance? 

[purovitalis]

I would also like to know if it can open the cart drawer. Also it it possible to add variant selector on top of it?

[rajsyful]

Did you get any luck for drawer add to cart? 

[FazilNusrat]

Hello Rajsyful
Did you find please the solution (Clicking on ATC Button to open drawer on collection page)?

[rajsyful]

Thanks, It works, But how to add to drawer instead of it redirect to cart page? 

[Scootaro]

Hi @JHKCreate I was able to implement this, but I noticed that when I did it also adds the Shop Pay installment messaging to this. Our customers use Shop Pay so we would like to keep it enabled, but don't want the clutter the button provides. I have attached a screenshot for reference.

[dazzlebysarah]

i have tried this but this code is show only one product in a row can you guide me about how to resolve this

currently my design is something like this 

but when i add the code it became like this 

[Jahid-KlinKode]

Hey @Daisymaria, need to enhance your Shopify collection pages with an "Add to Cart" button? Follow the steps outlined in this YouTube video: https://www.youtube.com/watch?v=s98l1bUZe6k