Adding 'Add to cart' button below products on collection page

Highlighted
Tourist
8 0 3

Hi all,

Im using the Responsive theme from Outofthesandbox and love the look. As none of my products have any varients, I wanted to know how I could put an 'Add to cart' button underneath the product images in the grid - Especially on the Mobile version.

Ive tried a few ways that I found by doing a general search - but they didnt work.. (Perhaps outdated)

Any ideas?

 

Thanks

Tom

0 Likes
Highlighted
Shopify Partner
32 0 5

Do you mean on collection page? 

0 Likes
Highlighted
Tourist
8 0 3

Apologies, thats the one!

0 Likes
Highlighted
Tourist
3 0 1

Hi

I added this

<form method="post" action="/cart/add">
   <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
   <input type="submit" value="Buy Now" class="btn" />
  </form>

to the bottom of product-grid-item-liquid (in between the last </p> and the last </a>) and it works for me. I have 'Buy Now' but you can change that to 'Add to Cart'.

I'm using Minimal theme so it may/may not work for you. Worth  a try.

Gina

Highlighted
Shopify Partner
32 0 5

Open your collection.liquid file and search for this 

<div class="info">    and search for its closing tag. 

After that cloasing tag, insert his code, <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="<span class=money>${{amount}} AUD</span>" data-shop-currency="AUD" id="product-form-404798708">   
                 <input type="hidden" name="id" value="1101905772">
    
       
    <div class="purchase clearfix inline_purchase">
      
      
      <button type="submit" name="add" class="action_button add_to_cart" data-label="Add to Cart"><span class="text">Add to Cart</span></button>
    </div>  
  </form>

Note: Please make sure to take backup first then do all changes.         
      

      
  

  
    
    
  

 

 

Highlighted
Shopify Expert
10006 116 1818

^ This code above isn't quite correct. The general format is there, but lacks the Liquid variables. I've removed a bunch of classes from the code above just to keep things neat. Alter as needed.

<form action="/cart/add" method="post" id="product-form-{{ product.id }}">   
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
  <div>
    <button type="submit" name="add">Add to cart</button>
  </div>  
</form>

Now if you want to add the item to the cart with ajax you may want to check out the AJAX api docs.
https://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Tourist
8 0 3

Hey guys,

Thanks for the responses!

I tried Gati's code with chrome dev tools and the button works.. however it goes straight to the checkout.

Is there anyway to make it similar to the quickview on my current collection page where it stays on the same page?

Also, I couldnt find the part you specified in the collection.liquid, is there any other place to insert the code?

0 Likes
Highlighted
Shopify Partner
32 0 5

Hi, 

Please see above comment of Jason. His code is quite good and with liquid variable. 

And he has answered your query related to Ajax cart. And if you can not find where to apply code, please paste here your collection.liquid code so members can assist you further. 

 

 

Highlighted
Tourist
8 0 3

Thanks guys!

 

Finally found that I had to combine both of your codes and add it to "product-thumbnail.liquid".

 

All the best.

 

T

Highlighted
New Member
1 0 0

Hi Tom,

What code did you use to accomplish this and where did you put it?

Any help would be greatly appreciated!

-Faisal

0 Likes