Shopify Impulse Theme v4.1.4 Add to Cart Drawer on Collection Pages

Hello! I am trying to add a version of the “add to cart” button to products on my collection page.

Right now, I have:

  • A button under each product that says “Add a sample”

  • When I click that button:

  • the number of items in the cart, in the top right, is correctly updated.

  • I stay on the collection page instead of getting redirected to the cart or checkout page, as desired.

What I would like to add:

  • I want to trigger the cart drawer to open, like how it works when you add a product to the cart from a product page.

  • I tried following this video to trigger the drawer to open, but the video corresponds to an older version of the Impulse theme.

Here is the code that I have added so far, in product-grid-item.liquid.


Here is what my custom add to cart button looks like currently (in our store’s case, we only want to add a sample). The button looks good as I have it now, I don’t want to show the quantity or other options. I just need to trigger the cart drawer to open when I click this button.

cc: @zimblot

Hi @atielking

  1. Go to product-grid-item.liquid and replace the given code.
{%- assign current_variant = product.selected_or_first_available_variant -%}

  1. Add below script in the last.

I hope it’s work for you.

1 Like

IT WORKS!!! THANK YOU!!!

Can you please tell me how to disable the add to cart button after the product is been added to the cart.. Please its a request.

Hello, When im clicking on add to cart, it doesn’t add to cart but the button is showing there

https://bf374c-3.myshopify.com/collections/allcra

pls help

Just a quick FYI, the should not be in product-grid-item, because then it will be present repeatedly down the page for every product and loop, which is incorrect. The script should only be present once on the collections page - we put it in collection-grid, outside the “for” loop.

@SheetalZadfiya
it worked for me as well but can you pls guide me about how to change the padding fo mobile and for desktop

?