Дизайн карточек товара интернет-магазина

product-card

Перейти на страницу с примерами

Продажа товаров через Интернет приобретает все большую популярность. Карточка товара (product card) представляет собой детальное описание продукта вместе с функциональными элементами (кнопка «купить/добавить в корзину», доступные цвета, размеры и т.д.). Функциональность карточки товара можно расширить дополнительными кнопками, а с помощью трансформаций и переходов придать элементам динамичность.

Пример 1

HTML разметка

<div class="product-item">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
      <span class="price">₽ 1999</span>
      <a href="" class="button">В корзину</a>
  </div>
</div>

CSS стили

* {box-sizing: border-box;}
.product-item {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid #F5F5F5;
  background: white;
  font-family: "Open Sans";
  transition: .3s ease-in;
}
.product-item:hover {border-bottom: 2px solid #fc5a5a;}
.product-item img {
  display: block;
  width: 100%;
}
.product-list {
  background: #fafafa;
  padding: 15px 0;
}
.product-list h3 {
  font-size: 18px;
  font-weight: 400;
  color: #444444;
  margin: 0 0 10px 0;
}
.price {
  font-size: 16px;
  color: #fc5a5a;
  display: block;
  margin-bottom: 12px;
}
.button {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: .3s ease-in;
}
.product-item:hover .button {background: #fc5a5a;}

Пример 2

HTML разметка

<div class="product-item">
  <div class="product-img">
    <a href="">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    </a>
  </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="stars"></div>
    <span class="price">₽ 1999</span>
    <div class="actions">
      <div class="add-to-cart">
        <a href="" class="cart-button">В корзину</a>
      </div>
      <div class="add-to-links">
        <a href="" class="wishlist"></a>
        <a href="" class="compare"></a>
      </div>
      </div>
    </div>
</div>

CSS стили

* {box-sizing: border-box;}
.product-item {
  width: 300px;
  margin: 0 auto;
  padding: 10px 10px 5px 10px;
  border: 1px solid #eee;
  background: white;
  font-family: "Open Sans";
  overflow: hidden;
  transition: .4s linear;
}
.product-img {transition: 1s ease-in-out;}
.product-img:hover {transform: scale(1.1);}
.product-img img {
  display: block;
  width: 100%;
}
.product-list {margin-top: 15px;}
.product-list h3 {
  font-weight: 700;
  color: #39404B;
  margin: 0;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 2;
}
.price {
  color: #E34D38;
  display: block;
  margin-bottom: 12px;
}
.stars {
  height: 14px;
  line-height: 14px;
  margin: 7px 0;
}
.stars:before {
  content: "\f005\f005\f005\f005\f006";
  color: #EFB71C;
  font-size: 14px;
  font-family: FontAwesome;
}
.actions {
  border-top: 1px solid #eee;
  padding-top: 4px;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
}
.actions:after {
  content: "";
  display: table;
  clear: both;
}
.add-to-cart, .add-to-links {float: left;}
.cart-button {
  text-decoration: none;
  color: #8C877C;
  padding-right: 20px;
  border-right: 1px solid #ddd;
  transition: .4s linear;
}
.cart-button:before {
  content: "\f07a";
  font-family: FontAwesome;
  margin-right: 10px;
}
.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover {color: #E34D38;}
.wishlist, .compare {
  color: #8C877C;
  padding-left: 20px;
  transition: .4s linear;
}
.wishlist:after, .compare:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 13px;
}
.wishlist:after {content: "\f004";}
 .compare:after {content: "\f079";}

Пример 3

HTML разметка

<div class="product-wrap">
  <div class="product-item">
    <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    <div class="product-buttons">
      <a href="" class="button">В корзину</a>
    </div>
  </div>
  <div class="product-title">
    <a href="">Маленькое черное платье</a>
    <span class="product-price">₽ 1999</span>
  </div>
</div>

CSS стили

* {box-sizing: border-box;}
.product-wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
  padding: 0 0 20px;
  text-align: center;
  font-size: 14px; 
  font-family: Lora;
  text-transform: uppercase;
}
.product-item {
  position: relative;
  overflow: hidden;
}
.product-wrap img {
  display: block;
  width: 100%;
}
.product-buttons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  transition: .3s ease-in-out;
}
.button { 
  text-decoration: none;
  color: #c0a97a;
  font-size: 12px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 50%; 
  left: 50%;
  border: 2px solid #c0a97a;
  transform: translate(-50%, -50%) scale(0);
  transition: .3s ease-in-out;
}
.button:before {
  content: "\f07a";
  font-family: FontAwesome;
  margin-right: 10px;
}
.product-item:hover .product-buttons {opacity: 1;}
.product-item:hover .button {transform: translate(-50%, -50%) scale(1);}
.button:hover {background: black;}
.product-title {color: #5e5e5e;}
.product-title a {
  text-decoration: none;
  color: #2e2e2e;
  font-weight: 600;
  margin: 15px 0 5px;
  padding-bottom: 7px;
  display: block;
  position: relative;
  transition: .3s ease-in-out;
}
.product-title a:after{    
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  background: #2e2e2e;
  left: 50%;
  margin-left: -20px;
  bottom: 0;
  transition: .3s ease-in-out;
}
.product-title a:hover {color: #c0a97a;}
.product-title:hover a:after {background: #c0a97a;}
.product-price {
  font-size: 20px;
  color: #c0a97a;
  font-weight: 700;
}

Пример 4

HTML разметка

<div class="product-inner">
  <div class="product-wrap">
    <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    <div class="actions">
      <a href="" class="add-to-cart"></a>
      <a href="" class="quickview"></a>
      <a href="" class="wishlist"></a>
  </div>
  </div>
  <div class="product-info">
    <h3 class="product-title"><a href="">Маленькое черное платье</a></h3>
    <span class="price">₽ 1999</span>
  </div>
</div>

CSS стили

* {box-sizing: border-box;}
.product-inner {
  width: 300px;
  margin: 0 auto;
  background: white;
  text-align: center;
  border-bottom: 2px solid #ebebec;  
  transition: .2s linear;
}
.product-inner:hover {border-color: #bca480;}
.product-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.product-wrap img {
  display: block;
  width: 100%;
}
.actions {
  position: absolute;
  left: 0;
  bottom: -20%;
  width: 100%;
  background: rgba(59,62,67,0.75);
  transition: .3s linear;
}
.product-inner:hover .actions {bottom: 0;}
.actions a {
  text-decoration: none;
  float: left;
  width: 33.33333333333333%;
  color: white;
  padding: 15px 0;
  transition: .2s linear;
}
.actions a:hover {background: rgba(59,62,67,0.85);}
.actions a:before {font-family: "FontAwesome";}
.add-to-cart:before {content: "\f07a";}
.quickview:before {content: "\f002";}
.wishlist:before {content: "\f08a";}
.product-info {
  padding-bottom: 10px;
  font-family: 'Noto Sans', sans-serif;
}
.product-title {
  margin: 0 0 10px 0;
  font-family: 'Noto Sans', sans-serif;
}
.product-title a {
  text-decoration: none;
  color: #1e1e1e;
  font-weight: 400;
  font-size: 16px;
}
.price {
  font-weight: bold;
  color: #bca480;
}

Пример 5

HTML разметка

<div class="item">
  <div class="product">
    <div class="thumb-img">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
      <div class="actions">
        <a href="" class="share-button"><i class="fa fa-search"></i></a>
        <span class="share-wrap">
          <a href="" class="share-button"><i class="fa fa-cloud"></i></a>
          <span class="share-item">
            <a class="share-button" href=""><i class="fa fa-facebook"></i></a>
            <a class="share-button" href=""><i class="fa fa-twitter"></i></a>
            <a class="share-button" href=""><i class="fa fa-google-plus"></i></a>
            <a class="share-button" href=""><i class="fa fa-pinterest-p"></i></a>
          </span>
        </span>
        <a href="" class="share-button"><i class="fa fa-heart-o"></i></a>
        <a href="" class="add-to-cart">В корзину</a>
      </div>
    </div>
    <div class="product-about">
      <h3 class="product-title">
        <a href="">Маленькое черное платье</a>
      </h3>
      <span class="price"><i class="fa fa-rub"></i>1999</span>
    </div>
  </div>
</div>

CSS стили

*{box-sizing: border-box;}
.item {
  width: 300px;
  border: 1px solid rgba(0,0,0,.08);
  padding: 15px 0;
  margin: 0 auto;
  background: white;
}
.item a {
  text-decoration: none;
  outline: 0;
}
.product {
  padding: 0 15px;
  position: relative;
}
.thumb-img {
  position: relative;
  overflow: hidden;
}
.thumb-img img {
  width: 100%;
  display: block;
}
.thumb-img:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: .3s ease-in-out; 
}
.product:hover .thumb-img:after {opacity: 1;}
.actions {
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 15px;
  text-align: center;
  opacity: 0;
  transition: .3s ease-in-out; 
}
.product:hover .actions {
  top: 50%;
  opacity: 1;
}
.actions a {
  margin: 7px 6px;
  color: white;
  height: 30px;
  line-height: 26px;
  display: inline-block;
  border-radius: 30px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid white;
  background: transparent;
  transition: .3s ease-in-out; 
}
.share-button {width: 30px;}
.add-to-cart:hover {background: #A2927F;}
.actions a:hover {
  border-color: #A2927F;
  background: #A2927F;
}
.share-wrap {
  display: inline-block;
  height: 30px;
  position: relative;
  margin: 7px 6px;
}
.share-item {
  width: 200px;
  margin-left: -100px;
  position: absolute;
  z-index: 3;
  bottom: 38px;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transition: .3s ease-in-out; 
}
.share-wrap:hover .share-item {
  opacity: 1;
  visibility: visible;
}
.add-to-cart {padding: 0 20px;}
.product-about {
  padding: 20px 0 0;
  text-align: center;
}
.product-title {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.1;
  font-size: 16px;
  margin: 5px 0 15px;
  font-weight: normal;
}
.product-title a {color: #373737;}
.price {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  color: #F2453E; 
}

Пример 6

HTML разметка

<div class="border">
  <div class="wrap">
    <div class="product-wrap">
      <a href=""><img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg"></a>
    </div>
    <div class="loop-action">
      <a href="" class="add-to-cart">Быстрый просмотр</a>
      <a href="" class="loop-add-to-cart">В корзину</a>
    </div>
  </div>
    <div class="product-info">
      <div class="stars"></div>
      <h3 class="product-title">Маленькое черное платье</h3>
      <div class="price">&#8381; 1999</div>
   </div>
</div> 

CSS стили

* {box-sizing: border-box;}
.border {
  width: 300px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border: 1px solid #F1E7E8;
}
.wrap {
  height: 100%;
  position: relative;
 }
.product-wrap {position: relative;}
.product-wrap:after {
  content: '';
  background: rgba(73, 102, 162, .5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  transform: scale(.3);
  transition: .3s ease-in-out;
}
.border:hover .product-wrap:after {
  opacity: 1;
  transform: scale(1);
}
.product-wrap a {
  display: block;
  text-decoration: none;
}
.product-wrap img {
  display: block;
  width: 100%;
}
.loop-action {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: .3s ease-in-out;
}
.border:hover .loop-action {opacity: 1;}
.loop-action a {
  text-decoration: none;
  display: block;
  border: 1px solid white;
  white-space: nowrap;
  text-transform: uppercase;
  padding: .5em 1em;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: white;
  min-width: 160px;
  margin: 5px auto;
  transition: .3s ease-in-out;
}
.loop-action a:after {
  content: '';
  position: absolute;
  left: -220%;
  top: -500%;
  width: 140%;
  height: 1000%;
  transform: rotate(45deg);
  background: white;
  z-index: -1;
  transition: .3s ease-in-out;
}
.loop-action a:hover {color: black;}
.loop-action a:hover:after {left: 0%;}
.border:hover {border-color: #4966A2;}
.product-info {padding-top: 15px;}
.stars {
  font-size: 14px;
  font-family: FontAwesome;
}
.stars:before {
  content: "\f005\f005\f005\f005\f123";
  color: #F2453E;
}
.product-title {
  font-weight: normal;
  font-family: "Open Sans";
  color: #162546;
  font-size: 18px;
}
.price {
  font-family: "Open Sans";
  color: #162546;
  font-style: italic;
  font-weight: bold;
}

Пример 7

HTML разметка

<div class="product-wrap">
  <div class="product-image">
    <a href="">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
      <div class="shadow"></div>
    </a>
    <a class="detail-link" href="" title="Быстрый просмотр"></a>
    <div class="actions">
      <div class="actions-btn">
        <a class="add-to-cart" href="" title="Добавить в корзину"></a>
        <a class="add-to-wishlist" href="" title="Добавить в мои желания"></a>
        <a class="add-to-compare" href="" title="Добавить для сравнения"></a>
      </div>
    </div> 
  </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="price">&#8381; 1999</div>
  </div>
</div>

CSS стили

.product-wrap {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  background: white;
}
.product-image {
  position: relative;
  overflow: hidden;
}
.product-image a {display: block;}
.product-image img {
  display: block;
  width: 100%;
}
.shadow {
  background: rgba(0,0,0,0.3);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .3s ease-in-out;
}
.product-wrap:hover .shadow {opacity: 1;}
.detail-link {
  text-decoration: none;
  width: 50px;
  height: 50px;
  background: #ff7659;
  border-radius: 3px;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: .3s ease-in-out;
}
.detail-link:before {
  content: "\f06e";
  font-family: FontAwesome;
  color: white;
  font-size: 20px;
  display: block;
  height: 50px;
  line-height: 50px;
  width: 50px;
  transform: rotate(-45deg);
  transition: .3s ease-in-out;
}
.product-wrap:hover .detail-link {
  opacity: 1;
  top: 50%;
}
.actions {
  width: 100%;
  height: 47px;
  position: absolute;
  bottom: -47px;
  right: 0;
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.product-wrap:hover .actions {
  bottom: 0;
  opacity: 1;
}
.actions-btn {float: right;}
.actions-btn a {
  display: inline-block;
  background: white;
  color: #555;
  width: 47px;
  height: 47px;
  line-height: 47px;
  text-decoration: none;
  transition: .3s ease-in-out;
}
.actions-btn a:hover {
  background: #ff7659;
  color: white;
}
.actions-btn a:after {
  font-family: FontAwesome;
  font-size: 14px;
}
.add-to-cart:after {content: "\f07a";}
.add-to-wishlist:after {content: "\f004";}
.add-to-compare:after {content: "\f079";}
.product-list {
  margin: 20px 0;
  font-family: 'Open Sans', serif;
}
.product-list h3 {
  color: #555;
  font-size: 15px;
}
.price {
  font-weight: bold;
  font-size: 18px;
  color: #ff7659;
}

Пример 8

HTML разметка

<div class="product-wrap">
  <div class="product-image">
    <a href=""><img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg"></a>
    <div class="shadow"></div>
    <div class="actions">
      <div class="actions-btn">
        <div class="add-to-cart">
          <a class="add-to-cart-button" href="#" title="Добавить в корзину"></a>
        </div>
        <div class="add-to-links">
          <div class="add-to-wishlist">
            <a class="add-to-wishlist-button" href="#" title="Добавить в мои желания"></a>
          </div>
          <div class="add-to-compare">
            <a class="add-to-compare-button" href="#" title="Добавить для сравнения"></a>
          </div>
          <div class="quikview">
            <a class="quikview-button" href="#" title="Быстрый просмотр"></a>
          </div>
          </div>
        </div>
      </div>
    </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="price">&#8381; 1999</div>
  </div>
</div>

CSS стили

*{box-sizing: border-box;}
.product-wrap {
  width: 300px;
  text-align: center;
  background: white; 
  margin: 0 auto;
}
.product-image {position: relative;}
.product-image a {display: block; }
.product-image img {
  display: block;
  width: 100%;
}
.shadow {
  position: absolute;
  left: 0;  
  top: 0;  
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.1);  
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.product-wrap:hover .shadow {opacity: 1;}
.actions {
  bottom: 15px; 
  right: 15px; 
  position: absolute;
}
.add-to-cart { 
  opacity: 0; 
  visibility: hidden;
  transform: translate(0,-50px);
  transition: 1s ease-in-out; 
}
.actions a {
  background: #202020;
  color: white;
  display: block;
  height: 36px;
  line-height: 36px;
  width: 42px;
  transition: .3s ease-in-out; 
  text-decoration: none;
}
.actions a:before {
  font-family: FontAwesome;
  font-size: 14px;
}
.add-to-cart-button:before {content: "\f07a"; }
.add-to-wishlist-button:before {content: "\f004";}
.add-to-compare-button:before{content: "\f079";}
.quikview-button:before {content: "\f002";}
.actions a:hover {background: #67BFA6;}
.product-wrap:hover .add-to-cart {
  opacity: 1;
  visibility: visible;
  transform: translate(0,0);
}
.add-to-wishlist {
  opacity: 0;
  visibility: hidden;
  transform: translate(0,-50px);
  transition: .8s ease-in-out;
  margin: 9px 0 0;
}
.product-wrap:hover .add-to-wishlist, .product-wrap:hover .add-to-compare, .product-wrap:hover .quikview {
  opacity: 1;
  visibility: visible;
  transform: translate(0,0);
}
.add-to-compare {
  opacity: 0;
  position: relative;
  visibility: hidden;
  transition: .6s ease-in-out;
  transform: translate(0,-50px);
  margin: 9px 0 0;
}
.quikview {
  opacity: 0;
  visibility: hidden;
  transition: .4s ease-in-out;
  transform: translate(0,-50px);
  margin: 9px 0 0;
}
.product-list {
  margin-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-family: 'Open Sans', serif;
}
.product-list h3 {
  color: #555;
  font-size: 15px;
  font-family: 'Open Sans', serif;
}
.price {
  font-weight: bold;
  font-size: 16px;
  color: #ff7659;
}
  • Создание Сайтов

    Ну вот и дождались. Все красиво, заманчиво. Остается дело за малым — как реализовать это на готовых cms?

    • На готовых еще не пробовала. В основном в cms карточки товара идут через слайдер, поэтому нужно адаптировать стили под готовую разметку

      • Создание Сайтов

        Без знания программирования ловить нечего ))

  • Создание Сайтов

    Натянул на вукомерц №3 карточку товара. Заморочек много было с поиском решения — как это реализовать в коде php. Почему то там каким-то образом генерируется две ссылки и получается, что над заголовком и под заголовком линия. Со стилями тоже были некоторые отклонения. Самое сложное оказалось с кнопкой добавления в корзину. Можно сказать случайно нашел решение проблемы.

    Загубил на карточке товара акцию — Распродажа. На основной карточке товара она смотрится как надо, а здесь самое красивое место обрезало. Надо будет рыться, как его вывести. Осталось еще несколько не решенных проблем — как вывести для этой карточки товара кнопку когда товара нет. Там на скрине родные кнопки показывают когда нет товара, выводится другая кнопка — подробнее. Если кнопки скрыть, то при отсутствии товара посетитель будет щелкать по кнопке покупки а результата не будет.

    А так, конечно карточка цивильная. Легкая для реализации (тут есть намного сложней) и красивая. Спасибо Елена, за хороший материал.

    • Спасибо за реальный пример. Согласна, натягивание на cms процесс не лёгкий.

      • Создание Сайтов

        Нашел причину обрезки Рапродажи. .product-item overflow — обрезал. отключил.