We were contacted by an agency to make multiple tweaks on a Shopify Plus store and collaborate with them to implement certain functionalities.
One of the requirements was to implement mini cart on their Shopify theme.
By adding mini cart functionality or ajax cart functionality on your Shopify store, you can improve the UI (User Interface) of your website.
This also might improve your conversions and provides the following benefits to your customers:
- They can view the products they have added to their shopping cart from any page of your site
- Stay on the same product page when adding products to cart without getting directed to the cart page
- Quickly edit/remove products from the mini cart dropdown
- View the total cost of the order before proceeding to buy from your store excluding the shipping/taxes
With these benefits, it only makes sense to enable mini cart functionality on your Shopify store.
The aim of this is to provide you with all the code that's involved in making this functionality work and clear instructions on how to add mini cart functionality on your Shopify store.
I would suggest to only make these modifications if you are comfortable editing the code on your site. If you want my help in implementing this on your site, please get in touch using the contact form here.
1.) Enabling cart update when "Add to Cart" button is clicked.
Make sure to replace the class '.product-form__cart-submit' with the class of your "Add to cart" button.
2.) Preparing the cart icon to update and show mini cart dropdown on hover.
Replace your existing cart button with the code added below. This needs to be updated in the liquid file of your theme, either in header.liquid or navigation.liquid.
3.) Showcasing Popover with info about the product that has just been added to cart and closing popover after 5 seconds.
Popover acts as a confirmation that the product has been added to cart and also provides a quick glance of the added product.
4.) Refresh Cart with new data
It's essential to refresh the cart with new data.
5.) Full JS code
Steps 1, 3 and 4 combined together below. You can add this code by going to your main js file, usually theme.js. Open the file, scroll all the way down and paste the code.
6.) Styling the mini cart and popover.
Fine details of the implementation
First, Ajax function was added to make sure that the user stays on the same page after they add product to their cart. Then, the function to display a mini cart dropdown was added. The dropdown displays for 5 seconds when the product is added to cart and this gives enough time to the user to see what's been added to cart and what they want removed. The mini cart displays the image, title, size and color variant, price and quantity of each product in the cart. In addition to this, number of items and subtotal is displayed on the mini cart and are updated dynamically.
Which service they chose
We suggested them to choose our Shopify Theme Tweaks service to implement different functionalities. Majority of our clients choose 10 tweaks to tweak their Shopify stores as the tweaks are valid for 30 days and offers them a 20% discount as well.
The mini cart was ready in just 5 days and tested extensively on desktop to make sure it's working properly. The mini cart automatically hides for mobile according to the specifications of the client. We are a trusted partner to many agencies who are looking an additional hand to help them make theme tweaks and creating landing pages for their clients' Shopify or Shopify Plus stores.
Want to implement the mini cart on your Shopify store? Get in touch with us using our contact form and we will get back to you within 12 hours.