Add to cart button for products on front page/on collections pages for supply theme

Solved
Highlighted
Tourist
10 0 1

Ive tried multiple codes to add an add to cart button that is on my home page and also on my collections page where all the products are viewed in one screen. Most of the codes i've inserted just adds another add to cart on the actual product page. my website is lashuality.com 

This an example of what im trying to do! on my home page and collections page. I currently have the supply theme. Step by step tutorial would be greatly appreciated! THANKS! 

 

Screen Shot 2020-08-15 at 6.25.35 PM.png

0 Likes
Highlighted
Shopify Partner
577 92 131

This is an accepted solution.

Hello @Freceelaferrer,

1. Go to Online Store->Theme->Edit code>Snippets
2. Add a new snippet
add-to-cart
 
place this code in new created snippet add-to-cart
<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>
 
3 Go to again Snippets Folder, search product-grid-item.liquid and place this
 
{% include 'add-to-cart' %}
  </div>
</div>
 
 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

1 Like
Highlighted
Tourist
10 0 1

Hi @Wahab_Ahmad 

Thanks for your help! I followed your steps however it came out like this. I would like my products horizontally like before on the home page instead of vertical! let me know what i can do to fix this! thanks.

Screen Shot 2020-08-16 at 9.50.01 AM.png

0 Likes
Highlighted
Shopify Partner
577 92 131

Hello @Freceelaferrer, share store link 

0 Likes
Highlighted
Tourist
10 0 1

my store url is lashuality.com

 

@Wahab_Ahmad 

0 Likes
Highlighted
Shopify Partner
577 92 131

@Freceelaferrer, provide me access to your store. so that I can analyze what is happening 

0 Likes
Highlighted
Shopify Partner
577 92 131

@Freceelaferrer, I have sent you access request. kindly accept it from shopify admin 

0 Likes
Highlighted
Tourist
10 0 1

ok! thanks i accepted it! @Wahab_Ahmad 

0 Likes
Highlighted
Shopify Partner
577 92 131

@Freceelaferrer, visit your store. 

0 Likes
Highlighted
Tourist
10 0 1

@Wahab_Ahmad Thank you for all you help!!!! I appreciate it! one last thing,  how can I center the product name and price? Thank you 

0 Likes