Website Building » Shopify » How Do I Add Ajax Cart to Shopify?

How Do I Add Ajax Cart to Shopify?

Last updated on January 10, 2023 @ 4:20 pm

Shopify is a platform for businesses of all sizes to create an online store. It offers users a customizable platform, an easy-to-use checkout process, and a wide range of features.

One of the great features of Shopify is the ability to add an Ajax cart to your store. This allows customers to add items to their cart without having to refresh the page. It’s a great way to improve the user experience on your site and can lead to increased sales.

In order to add an Ajax cart to your Shopify store, you’ll need to use a third-party app. There are a number of apps available, but we recommend using CartJS. It’s a free app that is easy to set up and use.

Once you’ve installed CartJS, you’ll need to add some code to your theme. Don’t worry, it’s not difficult.

The first thing you’ll need to do is edit your theme’s code file. To do this, go to Online Store > Themes > Edit code.

In the code editor, find the theme.liquid file and click on it. Then, look for the </head> tag near the top of the file and insert the following code just above it:

{{ 'cartjs-v1.0.js' | asset_url | script_tag }}

This will include the necessary JavaScript file from CartJS on every page of your site. Next, you'll need to edit your product template file so that the Add to Cart button uses Ajax instead of redirecting to the cart page. Find the product-template.

Then, look for this line of code:

<form action="/cart/add" method="post" enctype="multipart/form-data">

Replace it with this:

<form action="/cart/add" method="post" enctype="multipart/form-data" data-remote="true">

That's all you need to do! Now when customers click on the Add to Cart button, they will be able to add items to their cart without leaving the current page they're on. This can help reduce friction during the checkout process and lead to more sales for your business.

PRO TIP: When adding Ajax Cart to Shopify, be aware that there are potential risks involved. This method of shopping can bypass some of the security features in place on Shopify, and as such, it is important to be aware of these risks before proceeding. Additionally, make sure to test this feature thoroughly on a staging site before enabling it on your live site.
Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.