Ecommerce Product Card Design

This code snippet helps you to design a stylish product card for an ecommerce website. It displays product details, such as the product name, description, pricing, and an “Add to Cart” button. The design is responsive and adapts for both desktop and mobile screens.

This code is helpful for enhancing the visual appeal and functionality of your e-commerce product listings.

How to Design Ecommerce Product Card Using HTML and CSS

1. Start by creating an HTML file and setting up the basic structure for the product card as follows. Inside the <div class="right-side">, add your product details, such as product name, description, and pricing. You can customize the text and styling according to your needs:

 <div class="container">
      <div class="left-side">
      </div>
      <div class="right-side">
        <p id="perfume">PERFUME</p>
        <h1 id="header">Gabrielle Essence Eau De Parfum</h1>
        <p id="description">A floral, solar and voluptuous interpretation composed by
                            Olivier Polge, Perfumer-Creator for the House of CHANEL</p>
        <div class="price">
          <h1 id="number-discount">$149.99</h1>
          <p id="number-full">$169.99</p>
        </div>
        <button class="cart-btn">
          <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>
          <p id="btn-text">Add to Cart</p>
        </button>          
      </div>
    </div>

2. Now, it’s time to style your product card using CSS. You can either include the CSS in your HTML file or link an external stylesheet. Here’s a sample CSS code:

body {
    background-color: hsl(30, 38%, 92%);
    font-family: 'Montserrat', sans-serif;
}

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 600px;
    height: 450px;
    background-color: white;
    border-radius: 10px;
}

.left-side {
    background-image: url(https://i.ibb.co/xzq5YWH/image-product-desktop.jpg);
    background-size: cover;
    background-position: center;
  border-radius: 10px 0px 0px 10px;
}

.right-side {
    margin: 20px 32px 32px 32px;
}

#perfume {
    font-size: 12px;
    letter-spacing: 5px;
    color: hsl(228, 12%, 48%);
}

#header {
    font-family: 'Fraunces', serif;
    line-height: 1;
    color: hsl(212, 21%, 14%);
    margin: 25px auto;
}

#description {
    font-size: 14px;
    color: hsl(228, 12%, 48%);
    line-height: 1.8;
    margin-bottom: 5px;
    margin-top: 20px
}


#number-discount, #number-full {
    display: inline-block;
    vertical-align: middle;
}

#number-discount {
    color: hsl(158, 36%, 37%);
    font-family: 'Fraunces', serif;
    margin-right: 10px;
}

#number-full {
    font-size: 14px;
    color: hsl(228, 12%, 48%);
    text-decoration: line-through;
}

.cart-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: none;
    background-color: hsl(158, 36%, 37%);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    transition: background-color 0.2s;
    margin-top: 40px
}

.cart-btn:hover {
    background-color: hsl(156, 42%, 18%);
    cursor: pointer;
}

.cart-btn > svg {
    margin-left: -8px;
}

@media only screen and (max-width: 767px) {
    .container {
      grid-template-columns: 1fr;
      width: 345px;
      height: 610px;
    }

    .left-side {
        background-image: url(https://i.ibb.co/Dpz1GXR/image-product-mobile.jpg);
        height: 240px;
        border-radius: 10px 10px 0 0;
    }

    #perfume {
        margin-top: 5px;
        margin-bottom: -10px;
    }

    #description {
        margin-top: -8px;
        margin-bottom: -1px;
    }

    .price {
        margin-bottom: -8px;
    }

    .cart-btn {
        height: 48px;
    }
  }

Customize the product details, colors, and fonts to match your branding and product offerings. Test your product card design on different devices to ensure it looks great everywhere.

That’s it! You now have a stylish e-commerce product card design ready for your website. This will help you showcase your products effectively and improve the user experience for your customers.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.