Shopping Cart UI using CSS & JavaScript

Watch out! This tutorial is over 3 years old. Please keep this in mind as some code snippets provided may no longer work or need modification to work on current systems.
Tutorial Difficulty Level    

In this tutorial, we are going to create a Shopping Cart using HTML and CSS. We’re going to use Google Fonts for this tutorial, more specifically “Roboto.”

The finished product will look something like this:


Let’s create our HTML structure.

First, we need a container div, which we’ll call “.shopping-cart”.
Inside the container, we will have a title and three items which will include:

  • two buttons — delete button and favorite button
  • product image
  • product name and description
  • buttons that will adjust quantity of products
  • total price

CSS Part

Make sure you include the font we use for this tutorial.
Now, let’s add some style to our body with the following lines:

Great, now let’s make our Shopping Cart to be 750×423 and style it to look nice. Notice that we are using flexbox, so we set it to display flex and make the flex direction column, because by default the flex direction is set as row.

Next, let’s style the first item, which is the title, by changing the height to 60px and giving it some basic styling, and the next three items which are the shopping cart products, will make them 120px height each and set them to display flex.

Now we’ve styled the basic structure of our shopping cart.
Let’s style our products in order.

The first elements are the delete and favorite buttons.
I’ve always loved Twitter’s heart button animation, I think it would look great on our Shopping Cart, let’s implement it.

We set class “is-active” for when we click the button to animate it using jQuery, but this is for the next section.

Next, is the product image which needs a 50px right margin, and let’s add some basic style to product name and description.

Then we need to add a quantity element, where we have two buttons for adding or removing product quantity. First, make the CSS and then we’ll make it work by adding some JavaScript.

And last, which is the total price of the product.

Let’s also make it responsive by adding the following lines of code:

That’s it for the CSS.

JavaScript Part

Let’s make the heart animate when we click on it by adding the following code:

Cool! Now let’s make the quantity buttons work.

And that’s it! You can download a sample project here and try it out yourself. Of course, you would need to add a checkout, payment gateway etc in a finished production version.