How To "Add To Cart" Buttons Below Featured Collection On Home Page.

Tourist
13 0 0

hello, Can anyone assist in a code to add a "add to cart" button / and preorder on the featured collection so that the cart bar to the right updates with ordered product-  WITHOUT also being taken to the checkout page. 

 

I am using the narrative theme.

https://ethaircal.myshopify.com

Thanks!

0 Likes

Hello @Hills ,
This will help you to add "Add to Carft button with Qty selector" on your collection page.

 

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme, and select Customize theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Seach for product-grid-item.liquid (or something similar!)
  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price
<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> 
  • Hit Save, and you're good! You can't preview the changes to the code unless you save it first :)
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
13 0 0

Thanks, this has worked -  however instead of activating the cart draw it automatically send you to the cart page. Is there a way to stop this from happening?

0 Likes
Tourist
13 0 0

It also wont let me update the quantity without sending me to the product page?? 


@oscprofessional wrote:

Hello @Hills ,
This will help you to add "Add to Carft button with Qty selector" on your collection page.

 

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme, and select Customize theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Seach for product-grid-item.liquid (or something similar!)
  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price
<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> 
  • Hit Save, and you're good! You can't preview the changes to the code unless you save it first :)

 

0 Likes