Shopify Ajax Cart Drawer for Shopify [No APP or external library]

Compatibility: Dawn 5.0 and earlier version ONLY

Many of our customers have been inquiring about an Ajax Cart Drawer for Shopify. Creating a sidebar is straightforward, but developing a cart that updates in real-time without needing to refresh the page is more complex. This is where the Ajax Cart Drawer comes into play. This feature allows you to add a cart drawer using only pure JavaScript code with Shopify Ajax API and Shopify's Section Rendering API, without the need for any apps or external libraries.

Please note that this functionality is already included in the latest versions of Shopify 2.0 FREE themes, although the design and functionality might differ

Check DEMO store here 💻. Quickview button not included. Password: made4uo

A traditional shopping cart on a Shopify store typically requires users to navigate to a separate cart page to view their added items. An Ajax cart drawer, on the other hand, is a more streamlined approach. Here's a breakdown:

So, an Ajax cart drawer combines these aspects to create a cart that updates dynamically within a drawer on the same page. Users can add or remove items, view cart totals, and potentially proceed to checkout without ever leaving the current page they're browsing.

There are several advantages to incorporating an Ajax cart drawer on your Shopify store:

While an Ajax cart drawer offers numerous benefits, here are some additional factors to keep in mind for successful implementation:

Design and User Experience:

What you are buying:

What makes our code better:

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

In Section folder, create a new section, n ame it "shopify-ajax-cart-drawer", then paste the code below.

In the same folder, Sections, find the header.liquid. Find the word "cart_url". Replace the highlighted code (Refer to the image below) with the code below.

In the same area, you can see the "cart-notification." Please refer to the image below.

Go to Asset folder, and open the product-form.js, then replace the code with the code below.

Still at the same folder, Asset, find the cart.js and replace the code with the code below.

Go to the layout folder, and open the theme.liquid. Find the "announcement-bar", then paste the code below before it.

Almost done, all we have to do is to clean up. We need to delete this following section files to remove the errors. Open the Section folder, and find the "main-cart-items.liquid", open the file and click "delete file." Same with the "main-cart-footer.liquid."

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.

An Ajax cart drawer can be a valuable addition to your Shopify store, enhancing user experience, potentially increasing sales, and improving mobile usability. However, consider the technical expertise required for code-based implementation and explore alternative options like Shopify apps if coding is not your forte.

Sign up free to view the code. Every snippet on the site is free, and stays free. You just need an account.

The code on this page is free, and it stays free. If it saved you an afternoon, you can send a tip. Entirely optional, and it keeps the next tutorial coming.

Did this tutorial work for you?