How to Create a Cart Drawer/Slide Cart Manually in Shopify Without Shopify Apps

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

In the world of e-commerce, the user experience can make or break a sale. One critical aspect of this experience is the shopping cart. While there are numerous Shopify apps available for creating a cart drawer, some store owners prefer to have more control over the customization process. If you’re one of those Shopify store owners who want to create a cart drawer manually, this article is for you.

In this guide, we will walk you through the process of designing and implementing a cart drawer, also known as a slide cart, without relying on third-party Shopify apps. By taking control of this crucial element, you can tailor it to your brand’s unique style and customer preferences. So, let’s dive in and learn how to create a cart drawer manually in Shopify to enhance the shopping experience for your customers.

Here’s how you can do it:

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click … > Edit code.

  • Go to the Assets folder and create two files: hura-cart-drawer.css and hura-cart-drawer.js. Once you have created the two files, open them and apply the following codes:


For the styles of the cart drawer, copy the following code:


For the JavaScript of the cart drawer, copy the following code:

  • Go to the Sections folder and create a new section file: hura_cart_drawer.liquid with the following code:

  • Go to the Snippets folder and create a new section file: hura-cart-drawer.liquid with the following code:

  • Go to the Layouts folder, open the theme.liquid file and paste the provided snippet after all other code, before the closing </body> tag

Finally! Now, the last thing that we need to do is to customize the link to the cart to trigger the cart drawer.

Let’s find the anchor tags (<a></a>) that link to the cart page. Those anchor tags should use either of the following href attribute values: {{ routes.cart_url }} or /cart. Once you have found it, replace the value of href the attribute with javascript:void(0)

Then, you’ll apply the following attributes to this anchor tag.

It should look like this now:

Save the files and you’re done. Now, you can display or hide the cart drawer whenever you click the shopping bag button.


In the fast-paced world of e-commerce, every detail matters. Your customers demand a seamless, intuitive, and aesthetically pleasing shopping experience, and the cart drawer is a significant part of that experience. While there are many Shopify apps available to create a cart drawer, taking the manual approach empowers you to fully customize it to match your brand and customer expectations.

By following the steps outlined in this guide, you can create a cart drawer that seamlessly integrates with your Shopify store, enhancing both functionality and aesthetics. Remember to keep user-friendliness, responsiveness, and branding in mind throughout the design and implementation process.

In conclusion, mastering the art of creating a cart drawer manually in Shopify allows you to stand out in a crowded marketplace and provide your customers with a shopping experience they won’t forget. As you implement this knowledge, you’ll be well on your way to creating a more engaging and memorable shopping journey for your online store’s visitors.

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *