Free Template: Responsive Shopping Cart

Demo Download

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.

desktopscreen.jpg
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.

tabletview2.jpg
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.

bigbuttons1.jpg
On larger screens only the right-most part is clickable
smallbuttons.jpg
On mobile devices the whole button responds to touch events

The PSD

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

How to Build a Real Online Store

If you wish to turn this HTML template into a real store, you can give Reflow a try. It's an ecommerce JS and CSS toolkit that gives you components like shopping carts, product lists and add to cart, which can turn any website into a store.

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 :)

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Nice!

nice template.. :)

Shawn Rubel

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!

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.

Danny Markov

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 :)

Nice
Clean and Simple ;)

Lee Davis

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.

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