Add to Cart from Collection page - testing/issues

Store Design
1

We’ve been testing the idea of letting customers add items directly to their cart from Collection pages, however we’re running into a few issues. I’ve managed to add the basic functionality following guidelines I found in this thread: https://community.shopify.com/c/shopify-design/how-to-add-quot-add-to-cart-quot-button-on-my-collection-page/td-p/550247

First and foremost, we’ve noticed that the button seems to work regardless of product inventory – customers are able to add any number they want to the cart from here even if the item is low or out of stock. Is there a way to set this so they can only add a maximum of what we currently have in inventory?

Screenshot_1.png
Screenshot_1.png1919×901 142 KB

Screenshot_2.png
Screenshot_2.png1919×901 47.8 KB

Secondly, as soon as the customer clicks ‘Add to Cart’, it takes them directly to their cart – the whole reason we’re trying to implement this is to speed things up for the customer so they don’t have to keep clicking back and forth between products, so it’s not ideal if we’re effectively just replacing this with them clicking back from the cart each time. Is there a way to add the kind of ‘[ITEM] added to cart’ popup with the option to either go to checkout or continue shopping from there?

2

Hi @MarkTeo1986 ,

You can add max for input with following code:

max="{{ product.selected_or_first_available_variant.inventory_quantityAnchor }}"

it will limit the amount added as inventory quantity.

Hope it helps!

3

Thank you! Where in the code should I put this in order for it to work?

4

Hi @MarkTeo1986 ,

Can you send me the code you added for each product, to display the input and add to cart button? I will guide you should you need to add

5

Hi,

As I mentioned in my opening post, I used the following code from another thread:

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>

I put this at the bottom of the page in Snippets → product-card-grid.liquid.

Where can I add your suggested code to this for it to functio

6

Hi @MarkTeo1986 ,

Please add code here:

Screenshot.png
Screenshot.png1128×418 22.5 KB

Code:

Hope it helps!

7

Thank you!

So I tried adding it like this, is this correct?

However even after adding this, when testing it it still seems to let me add any amount I want to the cart:

Screenshot_2.png
Screenshot_2.png1919×1079 252 KB

Screenshot_3.png
Screenshot_3.png1919×1079 177 KB

(to confirm, we currently have 181 of this item in stock)

8

Hi @MarkTeo1986 ,

Please change code input:

Then you go to the file layout/theme.liquid and add the following code at the end of the file:

Screenshot.png
Screenshot.png910×242 6.08 KB

Code:

Hope it helps!

9

Hi,

Thanks very much! I followed this but unfortunately I still can’t seem to get it to work.

Is the following correct?

And then in the theme.liquid:

theme liquid.png
theme liquid.png1471×766 59.4 KB

Have I entered something incorrectly here?

10

Hi @MarkTeo1986 ,

Can you send me the staff account? I will help you debug it

11

Is there a way to give access just to a test version I have been working on? Discussing the matter with my manager I can’t give out the full staff account details for security reasons.

12

Hi @MarkTeo1986 ,

You only need to give theme access, not all, I just need to access theme to check it

13

Okay, I can try and set this up - how do I grant theme access?

14

Hi @MarkTeo1986 ,

When you create staff account you can give permission here can you create me staff account?

15

Hi @MarkTeo1986 ,

Sorry for the wrong copy command, you can change inventory_quantityAnchor => inventory_quantity

Hope it helps!