Ecommerce Product Card Design

Ecommerce Product Card Design
Code Snippet:Product Preview Card
Author: Emanuele
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 1,791
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X