![Shopify Ajax Cart Drawer for Shopify [No APP or external library]](http://made4uo.com/cdn/shop/articles/CART_DRAWER.jpg?v=1649727641&width=1){kind=small}
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
What is an Ajax Cart Drawer?
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:
- Ajax: This refers to a web development technique that allows for asynchronous data updates without reloading the entire page.
- Cart Drawer: This is a sidebar element that slides out or expands to reveal the contents of the shopping cart.
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.
Why Use an Ajax Cart Drawer?
There are several advantages to incorporating an Ajax cart drawer on your Shopify store:
- Improved User Experience: By allowing users to manage their cart without page reloads, the Ajax cart drawer creates a smoother and more efficient shopping experience.
- Increased Sales: Faster access to the cart can potentially lead to higher conversion rates, as users are less likely to abandon their carts during the checkout process.
- Reduced Bounce Rates: By keeping users engaged on the same page, an Ajax cart drawer can potentially reduce bounce rates (the percentage of visitors who leave your site after viewing only one page).
- Enhanced Mobile Usability: On mobile devices, where screen space is limited, an Ajax cart drawer can provide a more user-friendly way to access and manage the cart compared to navigating to a separate cart page.
Additional Considerations:
While an Ajax cart drawer offers numerous benefits, here are some additional factors to keep in mind for successful implementation:
-
Performance:
- Page Loading Speed: Ensure the Ajax functionality doesn't negatively impact your page loading speed. Large or complex code snippets could slow down your website, hindering user experience.
- Server Load: Consider the potential increase in server load with frequent Ajax updates. Ensure your hosting plan can handle the additional traffic without performance issues.
-
Design and User Experience:
- Visual Appeal: Design the cart drawer to seamlessly integrate with your store's overall aesthetic.
- Clarity and Usability: Make the cart drawer content clear and easy to understand. Users should be able to quickly see product information, edit quantities, and proceed to checkout without confusion.
- Mobile Optimization: Ensure the cart drawer displays and functions flawlessly on mobile devices, considering the smaller screen size and potential touch interactions.
-
Functionality:
- Cross-browser Compatibility: Test the Ajax cart drawer functionality across different web browsers to ensure it works as intended for all users.
- Error Handling: Implement proper error handling mechanisms to address any potential issues with product data retrieval or cart updates.
- Wishlist Integration: Consider integrating the cart drawer with a wishlist functionality, allowing users to save items for later without committing to checkout immediately.
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.
Steps on how to add Shopify Ajax Cart Drawer to Your Shopify Store
Step #1. Open your code editor
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
Step #2. Create a new section file
In Section folder, create a new section, name it "shopify-ajax-cart-drawer", then paste the code below.
Step #3. Find the header.liquid file
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.
Step #4. See the cart-notification
In the same area, you can see the "cart-notification." Please refer to the image below.
Step #5. Open product-form.js
Go to Asset folder, and open the product-form.js, then replace the code with the code below.
Step #6. Find cart.js
Still at the same folder, Asset, find the cart.js and replace the code with the code below.
Step #7. Find the annoncement-bar
Go to the layout folder, and open the theme.liquid. Find the "announcement-bar", then paste the code below before it.
Step #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."
Step #9. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #10. Customize theme
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.
Conclusion
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.
Copied!
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.
IS this code support extra line items property and selling plan option ?