side shopping cart preview
May 26, 2014 | 50 Feedbacks

Side shopping cart

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

CSS3 could lead to an inflation of animations and transitions. Sometimes though, this power can be used for a noble intent: a side cart, just a click away from the user, is something smart. A good example is the CreativeDash online store.

The experience is similar to the mobile apps, meaning people are used to see content coming from the side. Besides users can easily remove items from the cart, which I think is something good: the more customers feel in control, the more they trust the seller.

Lets look at the code!

Creating the structure

The HTML is quite basic. The #cd-cart-trigger is used to fire the shopping cart. The product gallery is wrapped inside the <main> element. The empty #cd-shadow-layer is used to blur the background when the cart is visible. The cart items are organized into an unordered list.

Adding style

The cart is placed off the canvas by giving it a position:fixed; and a right: -100%; When the user clicks on the cart icon, we use jQuery to add the .speed-in class to the #cd-cart. This class modifies the right value from -100% to 0. All what remains to do is adding a CSS3 transition to the right value to achieve the smooth animation.

The -webkit-overflow-scrolling: touch; is used to smooth the scrolling on touch devices (webkit browsers). It’s recommended when you use the overflow property, which causes scrolling to be buggy.

Events handling

We didn’t do a lot in jQuery, apart from adding classes according to specific events. One thing to note, though, is that in the starting HTML structure we put the navigation outside the <header>. Since we created this resource starting from mobile, we wanted the menu to slide in from the side, just like the cart – but from the opposite direction. To do so, it was easier for us to move the navigation outside the header. Once the user reaches a viewport size large enough (1200px in our demo), we use jQuery to move the navigation inside the header.


June 8, 2014
  • Fixed bug with transition on firefox - by CodyHouse
May 29, 2014
  • Fixed a bug that showed 2 scrolling bars on ie and firefox when cart was visible - by CodyHouse
May 26, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Mirko

    Great!! I saw this concept on Codepen before, but forgot about it. Now I have a need for this in one website, and I will definitely use your code as the foundation for off-canvas cart :)

    • Sebastiano Guerriero

      Sounds like a plan :)

  • mechwd

    I love it, but at least on Chrome the site bounced left and right because of the scrollbar would go out and come back in.

    • shadeobrady

      You just need to set the scroll bar to always display and it should get rid of the jumping.

    • Sebastiano Guerriero

      Right, I didn’t notice this on Windows (on Mac scrollbars don’t push the content). As @shadeobrady:disqus is suggesting, one solution would be to eliminate the .overflow-hidden class given to the body when the cart is open. Or, more extreme, you could use a plugin like

  • mgunitrend

    i like it, but on my website not use menu fixed you have solution for normal menu ?

    thank you :)

    • Claudia Romano

      We are working on new resources. I’m sure you will find something that fits for your needs. Just stay tuned! :)

      • mgunitrend

        Many Thanks :)

    • madahmani

      Make your menu fixed!

  • Marcus Forsberg

    This is crazy amounts of awesome. Will be using this and the fun flying animations from UI8 for my upcoming project. Thanks for this and for an awesome site. :)

    • Marcus Forsberg

      I notice it’s still scrollable on Chrome for Android, though, causing the slide-out to fly free for a moment and then jump back in place.

      • Sebastiano Guerriero

        Hi Marcus, I’m looking into this. For some reasons the overflow:hidden given to the body doesn’t work on Chrome for Android (and iOS too). Will see if I can find a solution.

        • Marcus Forsberg

          Sounds good! Let me know if you can solve it, will do the same if I find a solution once I start coding my design. :)

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques – Web Designing Kerala India()

  • Pingback: Visually CSS3 Tutorials to Enhance Web Designs()

  • Pingback: 提高网页设计的视觉CSS3教程-字体效果、按钮样式、导航条 | Specs' Blog()

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques | Brisa()

  • fede

    Add this

    html {
    overflow-y: scroll;
    And no more jumping

  • Pingback: استایل سبد خرید کنار سایت()

  • Pingback: 38 Visually Awesome CSS Tutorials & Techniques |

  • Pingback: 38 Visually Awesome CSS Tutorials & Techniques()

  • Pingback: 38 Visually Awesome CSS Tutorials & Techniques - File-Shack()

  • Alexey

    Hello guys! Very nice code and design!

    I have some problems:

    1. How I can wrap header to container? Example: max-width: 1200px
    2. How I can add option not hide scroll after clicking on menu buttons?
    3. How I can add a products catalog on the left cd-items? When menu is mobile catalog must be as off-canvas menu and shopping cart.

    Thank you very much!

    • Sebastiano Guerriero

      Hi Alexey, try wrapping the header content into a new , and give it the max-width: 1200px. About the scrolling bar, you can give a overflow: hidden to the body or the html elements while the cart panel is visible.

      • Alexey

        I have tryed it. No result, because header contains elements with absolute positioning. And when I change the width of the window, I see a vibration elements in shear.

  • Narendra Mannan

    Hi Sebastiano,

    First of all, thank you for sharing this fancy piece of code!

    I have implemented this on my website, however I’m facing an issue regarding triggering the cart.
    When I search a product, the cart anchor becomes unresponsive and thus it doesn’t trigger the cart to slide in. But it works absolutely flawlessly when I enter the page (i.e before I search for a product) or refresh the page and also after the product is added to the cart (since the page reloads using ajax).
    I know the query is slightly off topic but I’m no jQuery pro and I would really appreciate it if you could help me out.
    I’m attaching a screenshot and the link [] where I’ve implemented your code.
    I’ve tested this on chrome in my laptop and also on safari in my iPad, just in case if you might want to know.
    Thank you once again,

  • Cam

    Love this one, but there seems to be a major issue in Chrome that prevents the overlays from showing.

    • Cam

      Looks like addClass doesn’t work properly in Chrome on Windows :(

    • Cam

      My bad. Looks like some kind of CSS issue combined with the addClass in Chrome on Windows.

    • Sebastiano Guerriero

      Hi Cam, I can’t replicate the bug (Chrome on Win7). Can you please provide more info about your os?

      • Cam

        Hi Sebastiano. I use Mac, but was testing on Windows Chrome. All good though… even I can’t replicate it now! I’ll let you know if I find any useful info though.

  • Guest

    wow big fan now… alot can be learned from this website.. keep up the good work.. u guys are amazing (Y)

  • Tony

    Hi Sebastiano, this is really good, I am looking to implement this as well.

    With the menu headings, I am having an issue adding submenus to display correctly, vertically under the main menu options. Can you please guide me.
    For example using the following tags, but unable to get it to display right. as soon as you add submenu throws it out and unable to view properly. Sorry I am not very good with css to try and work it out.


    Heading 1 Option
    Heading 1 Option

    thanks for your help

  • Daariush

    Nice idea, but is there any more examples that websites use this kind of cart?

  • Pingback: Google()

  • Danny Kim


    Nice looking idea!

    I am a novice web designer, just a couple of questions:

    You said the code is free for client projects? I don’t understand. If I build a website with a store for a paying customer, will it be considered a client project? or Would I have to buy the extended license.

    Also, upon checkout, Paypal could handle that right with their checkout button?

  • Jack

    Thank you so much for this, however right now I seem to have a problem getting the cart to work on a Drupal site. On a Drupal site, the cart it self fails to trigger the side cart from popping on. Does anyone know of a remedy?

  • Abdul Razak

    i am having issue for making 3 sliding drawer menu how can i make 3 different sliding drawer?

    If A open B & C should be closed. Only 1 sliding drawer will be open.

    • Abdul Razak

      can anyone help me in this issue

  • Georgi

    This is a great gem! However, when then the page size gets below 300, the side panels show up in IE. Thank you!

    • Teddy

      No devices uses a media size of less than 320, so this shouldn’t be an issue, I doubt someone in their right mind (on a desktop) would resize their window to less than 320 to view a website right?

  • Babak Ghafari

    This is great.I am really appreciated it is free. I would like to know Why the source does not allow to use Ajax to refresh.

  • Pingback: Client side vs server side shopping card storage |()

  • Stefan Kroesbergen

    I’m sorry but can you use this on a wordpress site with woocommerce?

  • Suman Sisodia

    I am Suman web designer. I want to use the same code multiple times in a page like for Cart & Wishlist.
    I am facing issue when I use same ID of Cart panel “cd-cart” & trigger button “cd-cart-trigger”

    Can you please provide for more info regarding this?

  • Pingback: CSS and jQuery Side shopping cart | CodyHouse | Shopping Carts()

  • Pingback: 20 Best UX Patterns Tutorials()