I trust that you found this blog post to be enjoyable. If you are interested in having my team handle your eCommerce setup and marketing for you, Contact Us Click here.

How to add the Add to Cart button in Shopify

How to add the Add to Cart button in Shopify

Welcome to our lesson on how to include a well-designed custom add to cart button underneath each product on your Shopify site, allowing customers to swiftly add items without leaving the page, which is especially useful in reducing cart abandonment rates. Furthermore, this functionality can provide useful insights into customer preferences depending on items added to carts, allowing you to adjust your inventory and marketing efforts. Let me tell you step by step how to add this “Add to cart” button

Step 1 : Open the Code Editor:

  • From your  Shopify  admin , go to Online store > Themes
  • Click Actions > Edit Code

 

Step 2: Go to “snippet” directory, where you will get “card-product” file. This is typically where you’ll find options to edit or add the ‘Add to Cart’ button. You have to add the add to cart button below the price of the product.

 

You can copy the below code to add the add to cart button

<button type="button" name="add", id="collection-cart-{{ product.id }}" class="addtocarts">Add to Cart </button>

 

Step 3: Choose your favourite button design, size, and text. Many themes allow you to customise these aspects to better fit your shop's appearance.

Step 4: Copy the script code given below and paste it below the card-product file

 

<script>

  $(document).on("click", '#collection-cart-{{ product.id }}', function(e){

    event.preventDefault();

    let getvariantid =   $(this).parents('.collection-cart').find('#variantgetid').val();

 

    let formobj = {

      quantity: 1,

      id: getvariantid

    };

 

    $.ajax({

      type: "POST",

      url: "/cart/add.js",

      cache: false,

      data: formobj,

      dataType: "json",

      success: function(data){

        console.log('success');

      },

      error: function(xhr, ajaxOption, thrownError){

        console.log("error");

      }

    });

  });

</script>

 

Step 5: Before finalising, test the button on several devices to check it works properly. 

Back to blog