Shopify Add To Cart Button On Collection Page: 3 easy steps – EcomExperts

Shopify Quick ADD TO CART Button On Collection Page Without The App

 

You can make your customers’ shopping experience effortless by adding Add to Cart button to your Shopify store. You can add an Add to Cart button for each item on a collection page. Add to Cart button on collection page keeps your shoppers from being redirected to the product page or shopping cart.

This tutorial will teach you how to add the Add to Cart button to your Shopify store for free.

How to Add an Add to Cart Button Shopify

Step 1: Duplicate your current live theme

From your Shopify admin go to the Online Store and then click on Themes. To be secure, we recommend you duplicate your current live theme. 

Click on actions, and from the drop-down menu choose duplicate. Once the duplicate is made, click on Actions again, but this time choose Edit code

Step 2: Snippets directory

From the navigation menu to the left, scroll down to the Snippets directory and click on product-grid-item.liquid, or something similar to that. Some of the potential names of the file are 

  • product-card.liquid
  • product-card-grid.liquid
  • product-loop.liquid

A new window should appear on the right side of the code editor. Find <div class="product-item--price"> (sometimes the class of this div could be different, it's important to know that it's the class to add the price). 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.

Step 3: Check if everything is working properly

Go to your store, open the collection page and give yourself a big pat on the back.

This was a quick Add to Cart tutorial for Shopify users. Now that you have the Add to Cart button Shopify code, your customers can shop with ease, improving their experience in your store and increasing conversions.

3 comments

  • i haven’t received Email

    Asma Hossain
  • hello i havent reciveved emile

    Umang Shah
  • Hi, you sent me the message to my mail, but it was empty! jdariza@maplepisos.com
    URL: https://fiestasysorpresas.com

    jesus ariza

Leave a comment

About Andrew Durot

He is the co-founder of Ecom Experts, a Shopify focused development agency. 

Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.

Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.

Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!

Check Your Speed

Guides

3 comments

  • i haven’t received Email

    Asma Hossain
  • hello i havent reciveved emile

    Umang Shah
  • Hi, you sent me the message to my mail, but it was empty! jdariza@maplepisos.com
    URL: https://fiestasysorpresas.com

    jesus ariza

Leave a comment