How to Create a Shopping Cart UI using CSS & JavaScript

CodingRaul Dronca • January 02, 2023 • 3 minutes READ

Topic: HTML / CSS3 / JavaScript

Difficulty: Intermediate
Estimated Completion Time: 30 minutes

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

We’ll design and style the structure of a webpage using the web development technologies HTML and
CSS, respectively. Any eCommerce website must have a shopping cart so that customers can choose and
buy products. You may build your own shopping cart from scratch by following this guide and gaining
hands-on experience in web development and design.

Table of Contents hide

Start Creating a Shopping Cart UI using CSS & JavaScript

HTML

CSS

JavaScript

Download the Shopping Cart UI

Start Creating a Shopping Cart UI using CSS & JavaScript

HTML

Step 1: 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:

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills!
Includes more than 100 components to help you create custom emails templates faster than
ever before.

 two buttons — delete button and favorite button

 product image

 product name and description

 buttons that will adjust quantity of products

 total price

1 <div class="shopping-cart">

2 <!-- Title -->

3 <div class="title">

4 Shopping Bag

5 </div>

7 <!-- Product #1 -->

8 <div class="item">

9 <div class="buttons">

10 <span class="delete-btn"></span>

11 <span class="like-btn"></span>

12 </div>

13

14 <div class="image">

15 <img src="item-1.png" alt="" />

16 </div>

17

18 <div class="description">

19 <span>Common Projects</span>

20 <span>Bball High</span>

21 <span>White</span>
22 </div>

23

24 <div class="quantity">

25 <button class="plus-btn" type="button" name="button">

26 <img src="plus.svg" alt="" />

27 </button>

28 <input type="text" name="name" value="1">

29 <button class="minus-btn" type="button"

name="button">
30
<img src="minus.svg" alt="" />
31
</button>
32
</div>
33

34
<div class="total-price">$549</div>
35
</div>
36

37
<!-- Product #2 -->
38
<div class="item">
39
<div class="buttons">
40
<span class="delete-btn"></span>
41
<span class="like-btn"></span>
42
</div>
43

44
<div class="image">
45
<img src="item-2.png" alt="" />
46
</div>
47

48
<div class="description">
49
<span>Maison Margiela</span>
50 <span>Future Sneakers</span>

51 <span>White</span>

52 </div>

53

54 <div class="quantity">

55 <button class="plus-btn" type="button" name="button">

56 <img src="plus.svg" alt="" />

57 </button>

58 <input type="text" name="name" value="1">

59 <button class="minus-btn" type="button"

name="button">
60
<img src="minus.svg" alt="" />
61
</button>
62
</div>
63

64
<div class="total-price">$870</div>
65
</div>
66

67
<!-- Product #3 -->
68
<div class="item">
69
<div class="buttons">
70
<span class="delete-btn"></span>
71
<span class="like-btn"></span>
72
</div>
73

74
<div class="image">
75
<img src="item-3.png" alt="" />
76
</div>
77
 <div class="description">
78
<span>Our Legacy</span>
79
<span>Brushed Scarf</span>
80
<span>Brown</span>
81
</div>
82

83
<div class="quantity">
84
<button class="plus-btn" type="button" name="button">
85
<img src="plus.svg" alt="" />
86
</button>
87
<input type="text" name="name" value="1">
88
<button class="minus-btn" type="button"
89
name="button">
90
<img src="minus.svg" alt="" />
91
</button>
92
</div>
93

94
<div class="total-price">$349</div>
95
</div>
96
</div>

CSS

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

1 *{

2 box-sizing: border-box;

3 }

5 html,

6 body {
7 width: 100%;

8 height: 100%;

9 margin: 0;

10 background-color: #7EC855;

11 font-family: 'Roboto', sans-serif;

12}

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.

1 .shopping-cart {

2 width: 750px;

3 height: 423px;

4 margin: 80px auto;

5 background: #FFFFFF;

6 box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);

7 border-radius: 6px;

9 display: flex;

10 flex-direction: column;

11}

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.

1 .title {

2 height: 60px;

3 border-bottom: 1px solid #E1E8EE;

4 padding: 20px 30px;

5 color: #5E6977;

6 font-size: 18px;

7 font-weight: 400;
 }
8

9
.item {
10
padding: 20px 30px;
11
height: 120px;
12
display: flex;
13
}
14

15
.item:nth-child(3) {
16
border-top: 1px solid #E1E8EE;
17
border-bottom: 1px solid
18
#E1E8EE;
19
}

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.

1 .buttons {

2 position: relative;

3 padding-top: 30px;

4 margin-right: 60px;

5 }

6 .delete-btn,

7 .like-btn {

8 display: inline-block;

9 Cursor: pointer;

10}

11.delete-btn {

12 width: 18px;
13 height: 17px;

14 background: url(&amp;amp;quot;delete-icn.svg&amp;amp;quot;) no-repeat center;

15}

16

17.like-btn {

18 position: absolute;

19 top: 9px;

20 left: 15px;

21 background: url('twitter-heart.png');

22 width: 60px;

23 height: 60px;

24 background-size: 2900%;

25 background-repeat: no-repeat;

26}

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

1 .is-active {

2 animation-name: animate;

3 animation-duration: .8s;

4 animation-iteration-count: 1;

5 animation-timing-function: steps(28);

6 animation-fill-mode: forwards;

7 }

9 @keyframes animate {

10 0% { background-position: left; }

11 50% { background-position: right; }

12 100% { background-position: right; }

13}
Next, is the product image which needs a 50px right margin.

1 .image {

2 margin-right: 50px;

3 }

5 Let’s add some basic style to product name and description.

6 .description {

7 padding-top: 10px;

8 margin-right: 60px;

9 width: 115px;

10}

11

12.description span {

13 display: block;

14 font-size: 14px;

15 color: #43484D;

16 font-weight: 400;

17}

18

19.description span:first-child {

20 margin-bottom: 5px;

21}

22.description span:last-child {

23 font-weight: 300;

24 margin-top: 8px;

25 color: #86939E;

26}

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.
Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which
includes ready-made designed and coded elements, templates and themes.

1 .quantity {

2 padding-top: 20px;

3 margin-right: 60px;

4 }

5 .quantity input {

6 -webkit-appearance: none;

7 border: none;

8 text-align: center;

9 width: 32px;

10 font-size: 16px;

11 color: #43484D;

12 font-weight: 300;

13}

14

15button[class*=btn] {

16 width: 30px;

17 height: 30px;

18 background-color:
#E1E8EE;
19
border-radius: 6px;
20
border: none;
21
cursor: pointer;
22
}
23
.minus-btn img {
24
margin-bottom: 3px;
25
}
26
 .plus-btn img {
27
margin-top: 2px;
28
}
29

30
button:focus,
31
input:focus {
32
outline:0;
33
}

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

1.total-price {

2 width: 83px;

3 padding-top: 27px;

4 text-align: center;

5 font-size: 16px;

6 color: #43484D;

7 font-weight: 300;

8}

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

1 @media (max-width: 800px) {

2 .shopping-cart {

3 width: 100%;

4 height: auto;

5 overflow: hidden;

6 }

7 .item {

8 height: auto;

9 flex-wrap: wrap;

10 justify-content: center;
11 }

12 .image img {

13 width: 50%;

14 }

15 .image,

16 .quantity,

17 .description {

18 width: 100%;

19 text-align: center;

20 margin: 6px 0;

21 }

22 .buttons {

23 margin-right: 20px;

24 }

25}

That’s it for the CSS.

JavaScript

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

1$('.like-btn').on('click', function() {

2 $(this).toggleClass('is-active');

3});

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

1 $('.minus-btn').on('click', function(e) {

2 e.preventDefault();

3 var $this = $(this);

4 var $input = $this.closest('div').find('input');

5 var value = parseInt($input.val());

6
7 if (value > 1) {

8 value = value - 1;

9 } else {

10 value = 0;

11 }

12

13 $input.val(value);

14});

15

16$('.plus-btn').on('click', function(e) {

17 e.preventDefault();

18 var $this = $(this);

19 var $input = $this.closest('div').find('input');

20 var value = parseInt($input.val());

21

22 if (value < 100) {

23 value = value + 1;

24 } else {

25 value = 100;

26 }

27

28 $input.val(value);

29});

And this is our final version:

The tutorial is done! I hope you enjoyed it and learned something new. If you have any questions,
ping me!

Download the Shopping Cart UI