Knowledge Base

How to add the Add to Cart button in Shopify

Shopify is one of the most versatile and robust ecommerce website development solutions that businesses need to be successful in selling products and services online. The major focus on your website should be the “Add to Cart” button and that will decide the kind of shopping experience your customers have. It is where the checkout process starts on your website.

Steps to add “Add to Cart” button in your Shopify store

  • Head over to the Theme section in your Shopify admin panel
  • Select “Edit code” in the “Actions” drop-down → “Current theme section” which will open the Shopify Theme Editor
  • Select the file where you want to add the “Add to Cart” button.
  • Copy and paste the following code where you want to add the “Add to Cart” button.
  • <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>
  • Click the “Preview button” to cross verify the changes.
  • Click “Save” to finish the process of adding the “Add to Cart” button.

When any customer clicks on the “Add to Cart” button, some Shopify themes take them to the cart page. We should try to make the customers stay on the same page despite clicking the “Add to Cart” button to let them add more products to their cart and to increase the average order value of the store.

Wavy BackgroundWavy Background

Join our email family of 24K users!

Example of displayed product on Vajro App BuilderExample product for sale with different pricing than USD Indian RupeeExample of Juicy Chemistry's Custom Shop on Vajro App BuilderRocket Ship in circle icon

Engage. Convert. Retain.

Use our 30-day free trial to launch your app, engage with your customers, and watch your sales grow. We'll be your partner every step of the way.
Try Vajro today to win customers for life.