Adding an "Add to Cart" Button to Collection Pages in Debut Theme

[Papas_Pringles]

Which page did you add the Add to Cart button to?  I don't have the div tag or .liquid page that the instructions mention.  I also tried fooling with the product-card-list.liquid but that doesn't seem to affect anything.

[Papas_Pringles]

Sorry I found it in product-card-list.liquid.  I swear it wasn't working yesterday.  I inserted it here toward the end and it's working.  Now I just need to try and get the quantity option added.

<div class="list-view-item__price-column">
{% if product.available %}
{% include 'product-price', variant: product %}
{% endif %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />

<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
</div>

[SteveWinch5DS]

Hi Papas

I see you have the <form> text inside the </div> marker.
IT looks much neater this way, but I found that when clicking on the Add To Cart button it was taking me to the product page of the item I clicked on.

The form needs to be after of the </div> for the Add To Cart button to work, but then i found it made the layout seem shabby, and also navigated to the cart / basket too.

I'm still trying to figure out how to get it all to work properly! (still waiting for an expert to help,)

Steve

[Papas_Pringles]

Steve,

I have seen a lot of people complain about the issue with the product page loading, but that is not occurring for me.  However, one issue I am having is that when I click on Add to Cart, it refreshes the page and clears out the quantities for the other products.  I'm working on making this a single page order form so they can check off their quantities and then add them all to the cart.  I know there is an app for single page forms but we're trying to develop this in-house.

[ruchitiwari]

but this is not working the cart ling always goes to single product page

[ruchitiwari]

can you please help me

[Amanie]

Hello there !

This was helpful to me too, thanks ! but how can i stop it from redirecting to the cart page once the customer presses " add to cart", since the whole point of creating the selector outside the item card is to avoid the back & forth.. 

[JTR]

It's because there's an <a> link tag that covers the entire div so when you click the product card it takes you to the product page, you have to modify it so that it doesn't cover up your addtocart buttons, I made my inputs display inline-block at a set height of 50px, so to stop the <a> link tag from covering them I remove 50px from the bottom of the link area using the code below - paste the below in theme.scss.liquid at the bottom of the page and change the 50 to whatever number you need, if your form takes up 50% of the product card try setting the number to 50% instead of 50px

.full-width-link {
  bottom: 50px !important;
}

For some reason tho when I click add to cart it always adds the same product every time for example a "potato" gets added even if I click add on a "carrot" or any other product, instead of the product the "add" button is below, it's also inside the product card container so it should be adding different products, anyone know why it's not finding the correct products?

[Antonito]

Hello, I'm looking to do the same with Venture theme. 

Where should I plant the code?

Thank you so much

[KwikDeal]

Hi.

I am looking for this solution to apply to my Venture theme, I have been unsuccessful in trying to find the code that you mentioned product-grid-item.liquid

If possible could you let me know the correct way to apply the add to cart feature with quantity selector to my store?

Many thanks in advance.

J