Solved

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

Daisymaria
Excursionist
22 0 7

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

Accepted Solution (1)
JHKCreate
Shopify Expert
3571 638 924

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 17 (17)

JHKCreate
Shopify Expert
3571 638 924

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

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Daisymaria
Excursionist
22 0 7

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

 

Thanks again!

JHKCreate
Shopify Expert
3571 638 924

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 !

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Daisymaria
Excursionist
22 0 7

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

JHKCreate
Shopify Expert
3571 638 924

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Daisymaria
Excursionist
22 0 7

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
Shopify Expert
3571 638 924

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

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Daisymaria
Excursionist
22 0 7

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
Shopify Expert
3571 638 924

@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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
cybko
Shopify Partner
41 0 7

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
Tourist
3 0 1

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
Tourist
4 0 1

Did you get any luck for drawer add to cart? 

FazilNusrat
Shopify Partner
2 0 0

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

rajsyful
Tourist
4 0 1

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

Scootaro
Visitor
1 0 0

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.

Scootaro_0-1674094057389.png

 

dazzlebysarah
Shopify Partner
26 0 0

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 

dazzlebysarah_0-1709360112864.png

 

but when i add the code it became like this 

dazzlebysarah_1-1709360240701.png

 

Jahid-KlinKode
Excursionist
145 1 5

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