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

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

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

One Time Purchase!

$29.99
$50.00 $29.99
Only
Please refresh page after a purchase

Please note that the code may not be compatible with any currently installed apps.

Compatibility: Dawn 2.0 to Shopify 3.0 - See video

I have multiple people asking for ajax cart drawer for Shopify. It is easy to create a side bar but not a cart that updates without refreshing the page. That is what we called ajax cart drawer. Add a cart drawer without any app or external library. Pure javascript code and Shopify Section Rendering API. 

NOTE: This feature is already available in latest versions of Shopify 2.0 FREE themes . Design and functionality might vary. 

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

 What you are buying:

  • Change the background of the drawer
  • Add a cart note
  • Have an option to open the cart whenever the customer goes to the cart url
  • Cart updates without refreshing the browser
  • You may also like feature is added

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

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. 

To start:

1. Go to Admin store > Themes > Actions > Edit code. 

2. Go to Sections folder and create a new section, name it "cart-drawer", then paste the code below. 

<
      

3. 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.

header.liquid file
<

 

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

notification

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

<

 

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

<

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

<

 

8. 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." 

That's it. (",)

Copied!
Back to blog

2 comments

Hi @Sanjay,

Line item properties will need to be added to the code. Regarding the selling plan, the code is derive from Dawn cart, if the original code of Dawn supports it then yes.

Made4Uo

IS this code support extra line items property and selling plan option ?

sanjay

Leave a comment