Or go to our Shopify Theme Detector directly
How To Add An “Add To Cart” Button In Shopify
Last modified: February 9, 2023
Shopify is one of the most robust eCommerce platforms available online. And the centre of the success is the ‘Add To Cart’ button. It’s the starting point for any conversion of a website visitor into a customer. And you should ensure that you have the ‘Add To Cart’ buy button prominently placed on your website, where relevant.
You can even add it to different places on your website. So here is how you can add a ‘Add To Cart’ button to anywhere on your website.
# | Name | Image | |
---|---|---|---|
|
Get a Free Custom Shopify Store | ||
1 |
|
One‑Click Checkout
|
|
2 |
|
Juvico Quick Buy & Upselling
|
|
3 |
|
DropiSkip ‑ Skip Cart
|
|
4 |
|
Ultimate Sticky Add to Cart
|
|
5 |
|
Sticky Add To Cart + Buy Now
|
|
6 |
|
Buy Me ‑ Buy Button
|
|
7 |
|
Buy Button channel
|
|
8 |
|
Instant Checkout ‑ Buy button
|
|
9 |
|
Vivid Buy Button
|
|
10 |
|
Sticky Add to Cart Buy Button
|
|
Show More
|
Step 1 – Login
Sign into your store using your Shopify credentials.
Step 2 – Themes
Head over to the ‘Themes’ section in the Shopify admin panel, which you’ll land upon when you first log in.
Step 3 – Edit Code
In the ‘Actions’ drop-down option of your current theme section, find and choose the ‘Edit Code’ option. This will open the ‘Shopify Theme Editor’ that will contain the coding for your store’s theme.
Step 4 – Choose File
Find and choose the file where you wish to add the ‘Add To Cart’ button.
Step 5 – Insert Code
Now insert the following code into the file.
<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>
You can click on the ‘Preview’ button to confirm the changes have been made.
Step 6 – Save
Now click on the ‘Save’ option. This will complete the process.
Final Word
There are lots of apps you can also use to add the button to your website. Or you could make your ‘Add-to-cart’ button sticky with these apps.