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.