MStoreComponents
Live previewDocsBuy now

Shop components

—  Components related to the e-commerce: product cards, shop category cards, promo banners.

Product cards (style 1)

Product
Men's jeans

Gues Slim Taper Fit Jeans

$124.99
Quick view
Sale -15%Product
Backpacks

JanSport Hatchet Special Edition

$70.00$58.90
Quick view 
<!-- Example 1 -->
<div class="product-card mb-4">
  <div class="product-thumb">
    <a href="#" class="product-thumb-link"></a>
    <span class="product-wishlist-btn" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
      <i data-feather="heart"></i>
    </span>
    <img src="path-to-product-image" alt="Product">
  </div>
  <div class="product-card-body text-center">
    <a href="#" class="product-meta">Men's jeans</a>
    <h3 class="product-card-title"><a href="#">Gues Slim Taper Fit Jeans</a></h3>
    <span class="text-primary">$124.99</span>
  </div>
  <div class="product-card-body body-hidden">
    <div class="pb-2 text-center">
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="size-1" id="xl-1">
        <label for="xl-1" class="custom-option-label">XL</label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="size-1" id="l-1" checked>
        <label for="l-1" class="custom-option-label">L</label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="size-1" id="m-1">
        <label for="m-1" class="custom-option-label">M</label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="size-1" id="s-1">
        <label for="s-1" class="custom-option-label">S</label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="size-1" id="xs-1">
        <label for="xs-1" class="custom-option-label">XS</label>
      </div>
    </div>
    <button type="button" class="btn btn-primary btn-sm btn-block">Add to cart</button>
    <a href="#quick-view" class="quick-view-btn" data-toggle="modal">
      <i data-feather="eye" class="mr-1"></i>
      Quick view
    </a>
  </div>
</div>

<!-- Example 2 -->
<div class="product-card mb-4">
  <div class="product-thumb">
    <a href="#" class="product-thumb-link"></a>
    <span class="badge badge-danger rounded-0">Sale -15%</span>
    <span class="product-wishlist-btn" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
      <i data-feather="heart"></i>
    </span>
    <img src="path-to-product-image" alt="Product">
  </div>
  <div class="product-card-body text-center">
    <a href="#" class="product-meta">Backpacks</a>
    <h3 class="product-card-title"><a href="#">JanSport Hatchet Special Edition</a></h3>
    <span class="text-primary">
      <del class="text-muted mr-1">$70.00</del>
      $58.90
    </span>
  </div>
  <div class="product-card-body body-hidden">
    <div class="pb-2 text-center">
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="color-1" id="blue-1">
        <label for="blue-1" class="custom-option-label">
          <span class="custom-option-color" style="background-color: #193481;"></span>
        </label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="color-1" id="gray-1" checked>
        <label for="gray-1" class="custom-option-label">
          <span class="custom-option-color" style="background-color: #cdc7c7;"></span>
        </label>
      </div>
      <div class="custom-control custom-option custom-control-inline mb-2">
        <input type="radio" class="custom-control-input" name="color-1" id="terracote-1">
        <label for="terracote-1" class="custom-option-label">
          <span class="custom-option-color" style="background-color: #c46652;"></span>
        </label>
      </div>
    </div>
    <button type="button" class="btn btn-primary btn-sm btn-block">Add to cart</button>
    <a href="#quick-view" class="quick-view-btn" data-toggle="modal">
      <i data-feather="eye" class="mr-1"></i>
      Quick view
    </a>
  </div>
</div>
// Example 1
.product-card.mb-4
  .product-thumb
    a(href="#").product-thumb-link
    span.product-wishlist-btn(data-toggle="tooltip", data-placement="left", title="Add to wishlist")
      i(data-feather="heart")
    img(src="path-to-product-image", alt="Product")
  .product-card-body.text-center
    a.product-meta(href="#") Men's jeans
    h3.product-card-title
      a(href="#") Gues Slim Taper Fit Jeans
    span.text-primary $124.99
  .product-card-body.body-hidden
    .pb-2.text-center
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="size-1", id="xl-1").custom-control-input
        label.custom-option-label(for="xl-1") XL
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="size-1", id="l-1" checked).custom-control-input
        label.custom-option-label(for="l-1") L
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="size-1", id="m-1").custom-control-input
        label.custom-option-label(for="m-1") M
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="size-1", id="s-1").custom-control-input
        label.custom-option-label(for="s-1") S
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="size-1", id="xs-1").custom-control-input
        label.custom-option-label(for="xs-1") XS
    button.btn.btn-primary.btn-sm.btn-block(type="button") Add to cart
    a(href="#quick-view", data-toggle="modal").quick-view-btn
      i(data-feather="eye").mr-1
      | Quick view

// Example 2
.product-card.mb-4
  .product-thumb
    a(href="#").product-thumb-link
    span.badge.badge-danger.rounded-0 Sale -15%
    span.product-wishlist-btn(data-toggle="tooltip", data-placement="left", title="Add to wishlist")
      i(data-feather="heart")
    img(src="path-to-product-image", alt="Product")
  .product-card-body.text-center
    a.product-meta(href="#") Backpacks
    h3.product-card-title
      a(href="#") JanSport Hatchet Special Edition
    span.text-primary
      del.text-muted.mr-1 $70.00
      | $58.90
  .product-card-body.body-hidden
    .pb-2.text-center
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="color-1", id="blue-1").custom-control-input
        label(for="blue-1").custom-option-label
          span(style="background-color: #193481;").custom-option-color
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="color-1", id="gray-1", checked).custom-control-input
        label(for="gray-1").custom-option-label
          span(style="background-color: #cdc7c7;").custom-option-color
      .custom-control.custom-option.custom-control-inline.mb-2
        input(type="radio", name="color-1", id="terracote-1").custom-control-input
        label(for="terracote-1").custom-option-label
          span(style="background-color: #c46652;").custom-option-color
    button.btn.btn-primary.btn-sm.btn-block(type="button") Add to cart
    a(href="#quick-view", data-toggle="modal").quick-view-btn
      i(data-feather="eye").mr-1
      | Quick view

Product cards (style 2)

Product
Cameras

Samsung Gear 360 SM-R210 (2017 Edition) Spherical Cam 360 degree 4K Camera

$107.95
Compare
  • 4096x2048@24fps 360 video
  • 360 still image
  • Dual CMOS 8.4MP, Dual F2.2
  • Built-in 1,160mAh
Sale -40%Product
Smart home
4.2

All-new Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal

$49.99$29.99
Compare
  • 4096x2048@24fps 360 video
  • 360 still image
  • Dual CMOS 8.4MP, Dual F2.2
  • Built-in 1,160mAh
<!-- Row without gutters -->
<div class="row no-gutters">

  <!-- Product card (inside column) -->
  <div class="col-lg-3 col-md-4 col-sm-6 border border-collapse">
    <div class="product-card">
      <div class="product-thumb">
        <a href="#" class="product-thumb-link"></a>
        <span class="product-wishlist-btn" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
          <i data-feather="heart"></i>
        </span>
        <img src="path-to-product-image" alt="Product">
      </div>
      <div class="product-card-body">
        <div class="d-flex flex-wrap justify-content-between pb-1">
          <a href="#" class="product-meta">Cameras</a>
        </div>
        <h3 class="product-card-title">
          <a href="#">Samsung Gear 360 SM-R210 (2017 Edition) Spherical Cam 360 degree 4K Camera</a>
        </h3>
        <span class="text-primary">$107.95</span>
      </div>
      <div class="product-card-body body-hidden pt-2">
        <button type="button" class="btn btn-primary btn-sm btn-block">Add to cart</buttoni>
        <a href="#" class="quick-view-btn">
          <i class="mr-1" data-feather="repeat"></i>
          Compare
        </a>
        <ul class="font-size-sm opacity-80 pl-4 pt-2 mb-2">
          <li>4096x2048@24fps 360 video</li>
          <li>360 still image</li>
          <li>Dual CMOS 8.4MP, Dual F2.2</li>
          <li>Built-in 1,160mAh</li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- Product card (inside column) -->
  <div class="col-lg-3 col-md-4 col-sm-6 border border-collapse">
    <div class="product-card">
      <div class="product-thumb">
        <a href="#" class="product-thumb-link"></a>
        <span class="badge badge-danger rounded-0">Sale -40%</span>
        <span class="product-wishlist-btn" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
          <i data-feather="heart"></i>
        </span>
        <img src="path-to-product-image" alt="Product">
      </div>
      <div class="product-card-body">
        <div class="d-flex flex-wrap justify-content-between pb-1">
          <a href="#" class="product-meta">Smart home</a>
          <div class="star-rating">
            <span class="sr-label mr-1">4.2</span>
            <i class="sr-star active" data-feather="star"></i>
          </div>
        </div>
        <h3 class="product-card-title">
          <a href="#">All-new Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal</a>
        </h3>
        <span class="text-primary">
          <del class="text-muted mr-1">$49.99</del>
          $29.99
        </span>
      </div>
      <div class="product-card-body body-hidden pt-2">
        <button type="button" class="btn btn-primary btn-sm btn-block">Add to cart</buttoni>
        <a href="#" class="quick-view-btn">
          <i class="mr-1" data-feather="repeat"></i>
          Compare
        </a>
        <ul class="font-size-sm opacity-80 pl-4 pt-2 mb-2">
          <li>4096x2048@24fps 360 video</li>
          <li>360 still image</li>
          <li>Dual CMOS 8.4MP, Dual F2.2</li>
          <li>Built-in 1,160mAh</li>
        </ul>
      </div>
    </div>
  </div>
</div>
// Row without gutters
.row.no-gutters
  
  // Product card (inside column)
  .col-lg-3.col-md-4.col-sm-6.border.border-collapse
    .product-card
      .product-thumb
        a(href="#").product-thumb-link
        span.product-wishlist-btn(data-toggle="tooltip", data-placement="left", title="Add to wishlist")
          i(data-feather="heart")
        img(src="path-to-product-image", alt="Product")
      .product-card-body
        .d-flex.flex-wrap.justify-content-between.pb-1
          a.product-meta(href="#") Cameras
        h3.product-card-title
          a(href="#") Samsung Gear 360 SM-R210 (2017 Edition) Spherical Cam 360 degree 4K Camera
        span.text-primary $107.95
      .product-card-body.body-hidden.pt-2
        button.btn.btn-primary.btn-sm.btn-block(type="button") Add to cart
        a(href="#").quick-view-btn
          i(data-feather="repeat").mr-1
          | Compare
        ul.font-size-sm.opacity-80.pl-4.pt-2.mb-2
          li 4096x2048@24fps 360 video
          li 360 still image
          li Dual CMOS 8.4MP, Dual F2.2 
          li Built-in 1,160mAh
  
  // Product card (inside column)
  .col-lg-3.col-md-4.col-sm-6.border.border-collapse
    .product-card
      .product-thumb
        a(href="#").product-thumb-link
        span.badge.badge-danger.rounded-0 Sale -40%
        span.product-wishlist-btn(data-toggle="tooltip", data-placement="left", title="Add to wishlist")
          i(data-feather="heart")
        img(src="path-to-product-image", alt="Product")
      .product-card-body
        .d-flex.flex-wrap.justify-content-between.pb-1
          a.product-meta(href="#") Smart home
          +star-rating-short(4.2)
        h3.product-card-title
          a(href="#") All-new Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal
        span.text-primary
          del.text-muted.mr-1 $49.99
          | $29.99
      .product-card-body.body-hidden.pt-2
        button.btn.btn-primary.btn-sm.btn-block(type="button") Add to cart
        a(href="#").quick-view-btn
          i(data-feather="repeat").mr-1
          | Compare
        ul.font-size-sm.opacity-80.pl-4.pt-2.mb-2
          li 4096x2048@24fps 360 video
          li 360 still image
          li Dual CMOS 8.4MP, Dual F2.2 
          li Built-in 1,160mAh

Category card (style 1)

Clothing
ClothingClothing

Clothing

Starting from $49.99Shop clothing 
<!-- Category card (style 1) -->
<div class="card border-0">
  <a href="#" class="card-img-tiles">
    <div class="main-img">
      <img src="path-to-main-image" alt="Clothing">
    </div>
    <div class="thumblist">
      <img src="path-to-thumbnail" alt="Clothing">
      <img src="path-to-thumbnail" alt="Clothing">
    </div>
  </a>
  <div class="card-body border mt-n1 py-4 text-center">
    <h2 class="h5 mb-1">Clothing</h2>
    <span class="d-block mb-3 font-size-xs text-muted">
      Starting from&nbsp;
      <span class="font-weight-semibold">$49.99</span>
    </span>
    <a href="#" class="btn btn-pill btn-outline-primary btn-sm">Shop clothing</a>
  </div>
</div>
// Category card (style 1)
.card.border-0
  a(href="#").card-img-tiles
    .main-img
      img(src="path-to-main-image", alt="Clothing")
    .thumblist
      img(src="path-to-thumbnail", alt="Clothing")
      img(src="path-to-thumbnail", alt="Clothing")
  .card-body.border.mt-n1.py-4.text-center
    h2.h5.mb-1 Clothing
    span.d-block.mb-3.font-size-xs.text-muted
      | Starting from&nbsp;
      span.font-weight-semibold $49.99
    a(href="#").btn.btn-pill.btn-outline-primary.btn-sm
      | Shop clothing

Category card (style 2)

<!-- Row without gutters -->
<div class="row no-gutters">

  <!-- Category card (style 2 inside column) -->
  <div class="col-lg-3 col-sm-4 col-6 category-card border border-collapse">
    <div class="card border-0">
      <a href="#" class="d-block">
        <img src="path-to-category-image" alt="Computers & Accessories">
      </a>
      <div class="card-body pb-2">
        <h2 class="h6 mb-2">Computers & Accessories</h2>
        <span class="d-block mb-3 font-size-xs text-muted">
          Starting from&nbsp;
          <span class="font-weight-semibold">$149.80</span>
        </span>
        <div class="list-group list-group-flush font-size-sm">
          <a href="#" class="list-group-item list-group-item-action">
            Laptops & Tablets
            <i data-feather="chevron-right" class="ml-1" style="width: .875rem; height: .875rem;"></i>
          </a>
          <a href="#" class="list-group-item list-group-item-action">
            Desktop Computers
            <i data-feather="chevron-right" class="ml-1" style="width: .875rem; height: .875rem;"></i>
          </a>
          <a href="#" class="list-group-item list-group-item-action">
            Computer Accessories
            <i data-feather="chevron-right" class="ml-1" style="width: .875rem; height: .875rem;"></i>
          </a>
          <a href="#" class="list-group-item list-group-item-action">
            Networking Products
            <i data-feather="chevron-right" class="ml-1" style="width: .875rem; height: .875rem;"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
// Row without gutters
.row.no-gutters

  // Category card (style 2 inside column)
  .col-lg-3.col-sm-4.col-6.category-card.border.border-collapse
    .card.border-0
      a(href="#").d-block
        img(src="path-to-category-image", alt="Computers & Accessories").d-block
      .card-body.pb-2
        h2.h6.mb-2 Computers & Accessories
        span.d-block.mb-3.font-size-xs.text-muted
          | Starting from&nbsp;
          span.font-weight-semibold $149.80
        .list-group.list-group-flush.font-size-sm
          a(href="#").list-group-item.list-group-item-action
            | Laptops & Tablets
            i(data-feather="chevron-right", style="width: .875rem; height: .875rem;").ml-1
          a(href="#").list-group-item.list-group-item-action
            | Desktop Computers
            i(data-feather="chevron-right", style="width: .875rem; height: .875rem;").ml-1
          a(href="#").list-group-item.list-group-item-action
            | Computer Accessories
            i(data-feather="chevron-right", style="width: .875rem; height: .875rem;").ml-1
          a(href="#").list-group-item.list-group-item-action
            | Computer Components
            i(data-feather="chevron-right", style="width: .875rem; height: .875rem;").ml-1
          a(href="#").list-group-item.list-group-item-action
            | Networking Products
            i(data-feather="chevron-right", style="width: .875rem; height: .875rem;").ml-1