Free Template: Responsive Shopping Cart

Free Template: Responsive Shopping Cart

Mobile devices don’t exist only for checking your social network accounts. All kinds of websites, from shops to forums, can be made quick and fun to use on a phone or tablet, if you implement the right UI modifications. We present you with a free template – a fully responsive and pretty shopping cart.

The Template

We decided on a rather simple and clean design for this template, to make it easier for you to customize it and suit it to fit your personal style and desired functionality.

Desktop view

Desktop view

Because we want the page to adapt nicely to all types of screen sizes we’ve based it on Twitter’s Bootstrap framework.

Tablet view

Tablet view

We’ve also used the neat built-in features Bootstrap offers, to make these cool pop-up buttons. Make sure to run the demo on your mobile phone and see how the design adapts to the smaller screen.

On larger screens only the right-most part reacts on clicks

On larger screens only the right-most part is clickable

On mobile devices the whole row responds to touch input

On mobile devices the whole button responds to touch events


As always, the PSD file is available from our free and awesome member area.

Free for Commercial Use

Feel free to use this template in both personal and commercial projects. We hope it comes in handy and we’d love to see you play around with it. Just don’t forget to share the results with us! And with your friends, too! Enjoy :)

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.



  1. Kane says:


  2. Jhon says:

    nice template.. :)

  3. Shawn Rubel says:

    Great work, Danny. I'm actually liking it so much, I think I'll try to modify it for another project of mine, really love the colors on this. Thank you!

  4. Majid says:

    Thanks for this tutorial, this is a good place to learn from, I appreciate it,
    have you implemented the action events, like calculation of the total, and the remove and update ?
    thanks lot.

    1. Danny Markov says:

      I'm afraid not. This is only a template and the idea is just to show a responsive design. We leave the rest to your imagination :)

  5. ibassy says:

    Clean and Simple ;)

  6. Lee Davis says:

    Mr. Markov, thank you kindly for creating this swift, tasteful piece of code for the Public Domain. I was just trying to figure out a painless way to skin an excellent PayPal-enabled personal shopping cart that was begging for a responsive facelift, and this just wandered into my search field (lol!). I just want to give a quick tip to anyone who's thinking about adding responsiveness to their website/domain, go to the responsive site tester to check that nothing is wrecking your responsivity across device ranges. I've been checking mine - I embedded my cart web app into the code as skin, and it was like a cold hand in a fur-lined glove. Warm and toasty in under 30 seconds. You can find your template (left it pretty much the same - I REALLY don't have a lotta fun time at this point, launching my new CMS) over at the eProductCart where I have the job ahead of me with stocking the place. Once again, thank you for this easily-navigable (and extensible) coding. I'm quite appreciative of your brilliant work. Thanks again.

  7. WangHao says:

    Very Good, I want to use it in my project.
    Thank you ,Danny

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text]( for links