Search
Close this search box.

Create Cart UI Design in HTML & CSS

Unleash the potential of your e-commerce website with a visually stunning and user-friendly Cart UI design using HTML & CSS.
cart-ui-design

Table of Contents

The Cart UI design plays a critical role in the success of an e-commerce website. It directly impacts user experience, conversion rates, and customer satisfaction. In this in-depth guide, we will explore the art of creating an exceptional Cart UI design using HTML and CSS. Whether you are a beginner or an experienced web designer, this tutorial will equip you with the knowledge and skills to develop a visually appealing, intuitive, and user-friendly cart interface. Get ready to transform your e-commerce site with a cart design that engages and delights your customers.

Step 1: Importance of Cart UI Design

User Experience: A well-designed Cart UI enhances the overall user experience. It makes the shopping process more intuitive, seamless, and enjoyable for customers.

Conversion Rates: The design of your Cart UI directly impacts conversion rates. A visually engaging and well-organized cart interface can instill confidence in users and motivate them to proceed with the checkout process.

Branding and Consistency: Your Cart UI is an extension of your brand. It presents an opportunity to reinforce your brand identity, aesthetics, and values.

Cross-device Compatibility: With the increasing prevalence of mobile shopping, it is essential to design a responsive Cart UI that works seamlessly across different devices and screen sizes.

Upselling and Cross-selling Opportunities: A well-designed Cart UI can also be leveraged to promote upselling and cross-selling.

Step 2: Planning and Wireframing Your Cart UI

Planning and wireframing your Cart UI involves several key steps. Begin by identifying the essential elements of your cart interface, such as product details, pricing information, quantity selection, and checkout options. Consider the logical flow and user journey within the cart, ensuring a seamless and intuitive experience. Sketch out a rough wireframe, mapping out the placement and hierarchy of these elements. Pay attention to the visual organization, ensuring clarity and ease of use. Consider the responsive design aspects, accommodating different screen sizes. Iterate and refine the wireframe, incorporating feedback and making adjustments as needed. By carefully planning and wireframing your Cart UI, you can establish a solid foundation for its implementation, ensuring a streamlined and user-friendly interface for your e-commerce website.

Step 3: Cart UI Design in HTML

In this section, we will dive into the practical implementation of the Cart UI design using HTML. We will guide you through the process of structuring the cart layout, creating semantic HTML markup.

				
					<!DOCTYPE html>
<!-- By Mr. Geek - www.wphotshot.com -->
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cart UI Design | WPHotshot</title>
  <link rel="stylesheet" href="style.css" />
  <script src="main.js" defer></script>
  <link rel="icon" type="image/x-icon" href="/Img/favicon.png">
  <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>

<body>
  <div class="container">
    <div class="master-container">
      <div class="card cart">
        <label class="title">Your Cart</label>
        <div class="products">
          <div class="product">
            <svg fill="none" viewBox="0 0 60 60" height="60" width="60" xmlns="http://www.w3.org/2000/svg">
              <rect fill="#FFF6EE" rx="8.25" height="60" width="60"></rect>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413" fill="#FFB672"
                d="M34.2812 18H25.7189C21.9755 18 18.7931 20.5252 17.6294 24.0434C17.2463 25.2017 17.0547 25.7808 17.536 26.3904C18.0172 27 18.8007 27 20.3675 27H39.6325C41.1993 27 41.9827 27 42.4639 26.3904C42.9453 25.7808 42.7538 25.2017 42.3707 24.0434C41.207 20.5252 38.0246 18 34.2812 18Z">
              </path>
              <path fill="#FFB672"
                d="M18 36H17.25C16.0074 36 15 34.9926 15 33.75C15 32.5074 16.0074 31.5 17.25 31.5H29.0916C29.6839 31.5 30.263 31.6754 30.7557 32.0039L33.668 33.9453C34.1718 34.2812 34.8282 34.2812 35.332 33.9453L38.2443 32.0039C38.7371 31.6754 39.3161 31.5 39.9084 31.5H42.75C43.9926 31.5 45 32.5074 45 33.75C45 34.9926 43.9926 36 42.75 36H42M18 36L18.6479 38.5914C19.1487 40.5947 20.9486 42 23.0135 42H36.9865C39.0514 42 40.8513 40.5947 41.3521 38.5914L42 36M18 36H28.5ZM42 36H39.75Z">
              </path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413"
                d="M18 36H17.25C16.0074 36 15 34.9926 15 33.75C15 32.5074 16.0074 31.5 17.25 31.5H29.0916C29.6839 31.5 30.263 31.6754 30.7557 32.0039L33.668 33.9453C34.1718 34.2812 34.8282 34.2812 35.332 33.9453L38.2443 32.0039C38.7371 31.6754 39.3161 31.5 39.9084 31.5H42.75C43.9926 31.5 45 32.5074 45 33.75C45 34.9926 43.9926 36 42.75 36H42M18 36L18.6479 38.5914C19.1487 40.5947 20.9486 42 23.0135 42H36.9865C39.0514 42 40.8513 40.5947 41.3521 38.5914L42 36M18 36H28.5M42 36H39.75">
              </path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#FF8413"
                d="M34.512 22.5H34.4982"></path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413"
                d="M27.75 21.75L26.25 23.25"></path>
            </svg>
            <div>
              <span>Cheese Burger</span>
              <p>Extra Spicy</p>
              <p>No mayo</p>
            </div>
            <div class="quantity content">
              <button>
                <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#47484b"
                    d="M20 12L4 12"></path>
                </svg>
              </button>
              <input type="text" id="myNumber" class="form-control input-number" value="1" />
              <button>
                <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#47484b"
                    d="M12 4V20M20 12H4"></path>
                </svg>
              </button>
            </div>
            <label class="price small">$23.99</label>
          </div>
        </div>
      </div>

      <div class="card coupons">
        <label class="title">Apply Coupons</label>
        <form class="form">
          <input type="text" placeholder="Apply your coupons here" class="input_field">
          <button>Apply</button>
        </form>
      </div>

      <div class="card checkout">
        <label class="title">Checkout</label>
        <div class="details">
          <span>Your cart subtotal:</span>
          <span>47.99$</span>
          <span>Discount through applied coupons:</span>
          <span>3.99$</span>
          <span>Shipping fees:</span>
          <span>4.99$</span>
        </div>
        <div class="checkout--footer">
          <label class="price"><sup>$</sup>57.99</label>
          <button class="checkout-btn btn-hover">Checkout</button>
        </div>
      </div>
    </div>
  </div>

</html>
				
			

Step 4: Styling the Cart UI with CSS

Here, we will explore the power of CSS in transforming the visual aesthetics of your Cart UI design. We will cover various CSS techniques to style the cart elements, such as customizing typography, colors, buttons, and form inputs. Additionally, we will discuss how to create interactive hover effects, animations, and transitions to provide a delightful user experience. By leveraging CSS effectively, you can create a visually cohesive and engaging Cart UI design that aligns with your brand identity.

				
					/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #2832d4, #00A5B2, #7209D4);
  font-family: "Poppins", sans-serif;
}

.master-container {
  display: grid;
  grid-template-columns: auto;
  gap: 5px;
}

.card {
  width: 400px;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.input-number{
  width: 125px;
}

.title {
  /* width: 100%; */
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: linear-gradient(45deg, #2832d4 0%, #7209D4 100%);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px 5px 0 0;
  font-family: 'DM Serif Display', serif;
}

/* cart */
.cart {
  border-radius: 19px 19px 7px 7px;
}

.cart .products {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.cart .products .product {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr;
  gap: 10px;
}

.cart .products .product span {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.cart .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.cart .quantity {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

.cart .quantity label {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #47484b;
}

.cart .quantity button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: transparent;
  padding-bottom: 2px;
}

button:hover{
  cursor: grab;
}

.card .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card .small sup {
  font-size: px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: auto;
  height: 36px;
  font-weight: 600;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #212121;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(45deg, #2832d4 0%, #7209D4 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

.checkout .details {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px;
  gap: 5px;
}

.checkout .details span {
  font-size: 13px;
  font-weight: 600;
}

.checkout .details span:nth-child(odd) {
  font-size: 11px;
  font-weight: 700;
  color: #212121;
  margin: auto auto auto 0;
}

.checkout .details span:nth-child(even) {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin: auto 0 auto auto;
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #e4e4e4;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #212121;
  bottom: 5px;
  display: inline-block;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: linear-gradient(45deg, #2832d4 0%, #7209D4 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.btn-hover{
  background-color: #00A5B2;
}
				
			

Conclusion

A well-crafted Cart UI design is a game-changer for any e-commerce website. By following the guidelines and techniques presented in this article, you now have the tools to create a visually stunning, user-friendly, and performance-optimized Cart UI design using HTML and CSS. Remember to continuously iterate, gather user feedback, and stay updated with the latest design trends to further refine and improve your cart interface. Elevate your e-commerce experience, boost conversions, and delight your customers with a captivating Cart UI design that stands out from the competition.

Find more tutorials regarding Web Development here.

Leave a Reply

Your email address will not be published. Required fields are marked *