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

Highlighted
New Member
1 0 0

Use the following code below, it will display the add to cart button only if the item is in stock:

<!-- Start of quick add to cart code which affects collections page -->
<div class="list-view-item__price-column">
{% if product.available %}
<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>
{% endif %}
</div>
<!-- end of quick add to cart button -->

0 Likes
Highlighted
Tourist
3 0 1

Its not really hard! Here I hid the amount, but I added the option selector.

<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" hidden/>
  	<select name="id" id="ProductSelect-{{ section.id }}" class="collection_buy_button">
       {% for variant in product.variants %}
          {% if variant.available %}
             <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
               {{ variant.title }}
             </option>
          	{% else %}
             <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
          {% endif %}
        {% endfor %}
    </select>
	<input type="submit" value="Nu kopen" class="btn" />
</form> 

 

0 Likes
Highlighted
Excursionist
13 0 0

Where "NU KOPEN" must be replaced with "ADD TO CART" It works! 

0 Likes
Highlighted
Tourist
3 0 1
Haha yes, this is because “Nu kopen” is dutch . But yeah that’s bassicly all. Just get some extra divs around it and you can also target and style better .
1 Like
Highlighted
Excursionist
41 0 5

Hi All

I'm back after some time away playing with my stores... 

The next issue I have is this...  I want to REMOVE the Add To Card button from SOME Categories / Collections only.
We've started selling Personalised Products, which you'd think would prompt people to click into to Personalise, as the name suggests.
Unfortunately, some customers are merely clicking Add To Cart from the Shop Page, thereby adding NO Personalisation to the product, forcing us to contact them to point it out!
This Add To Cart needs removing from this collection (and it's subs!)

Any help please! 
Thanks

Steve

0 Likes
Highlighted
Explorer
52 1 55
About doing this for some collections only:

You could set up 2 different product templates or 2 different category
templates. Category templates is a thing, it’s just invisible if only 1
exists in your theme
0 Likes
Highlighted
New Member
1 0 0

Hi, I have used this code and it works but I sell clothes and would like the size option to show instead.

0 Likes
Highlighted
Excursionist
13 0 0

I have this now: That code redirects to "cart page". How to make that if customer hit "add to cart" button, to remain still in collection page? not to go each time to product/cart page? 

0 Likes
Highlighted
Excursionist
13 0 0

I ask - I answer here is the solution for me - Supply theme, it works just great! https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

0 Likes
Highlighted
Excursionist
41 0 5

Hi Bredowmax

Where would I find a bit more information about setting up Category templates?
This sounds like a solution!

Cheers

Steve

0 Likes