Shop components

Components that are related to the e-commerce section of the website.

Createx component

Product card: Basic example

Product image
-50%
<!-- Product card: Basic example -->
<div class="card card-product">
  <div class="card-product-img">
    <a class="card-img-top" href="#">
      <img src="path-to-image" alt="Product image">
    </a>
    <div class="card-product-widgets-top">
      <span class="badge product-badge badge-danger">-50%</span>
      <div class="star-rating ml-auto">
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star"></i>
      </div>
    </div>
    <div class="card-product-widgets-bottom">
      <a class="btn-wishlist ml-auto" href="#" data-toggle="tooltip" data-placement="left" title="Add to wishlist"></a>
    </div>
  </div>
  <div class="card-body pb-2">
    <h3 class="card-product-title text-truncate mb-2">
      <a class="nav-link" href="#">Shirt with insertion lace trims</a>
    </h3>
    <div class="d-flex align-items-center">
      <span class="h5 d-inline-block mb-0 text-danger">$20.40</span>
      <del class="d-inline-block ml-2 pl-1 text-muted">$40.80</del>
    </div>
  </div>
  <div class="card-footer">
    <div class="d-flex align-items-center mb-2 pb-1">
      <div class="mt-n2">
        <div class="custom-control cs-custom-size-option cs-custom-size-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="size" id="xl" checked>
          <label class="cs-custom-option-label" for="xl">XL</label>
        </div>
        <div class="custom-control cs-custom-size-option cs-custom-size-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="size" id="l">
          <label class="cs-custom-option-label" for="l">L</label>
        </div>
        <div class="custom-control cs-custom-size-option cs-custom-size-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="size" id="m">
          <label class="cs-custom-option-label" for="m">M</label>
        </div>
        <div class="custom-control cs-custom-size-option cs-custom-size-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="size" id="s">
          <label class="cs-custom-option-label" for="s">S</label>
        </div>
        <div class="custom-control cs-custom-size-option cs-custom-size-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="size" id="xs">
          <label class="cs-custom-option-label" for="xs">XS</label>
        </div>
      </div>
      <div class="ml-auto">
        <div class="custom-control cs-custom-color-option cs-custom-color-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="color" id="blue" value="Blue" checked>
          <label class="cs-custom-option-label" for="blue">
            <span class="cs-color-swatch" style="background-color: #6a9bf4;"></span>
          </label>
        </div>
        <div class="custom-control cs-custom-color-option cs-custom-color-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="color" id="orange" value="Orange">
          <label class="cs-custom-option-label" for="orange">
            <span class="cs-color-swatch" style="background-color: #ff9d50;"></span>
          </label>
        </div>
        <div class="custom-control cs-custom-color-option cs-custom-color-option-sm custom-control-inline">
          <input class="custom-control-input" type="radio" name="color" id="green" value="Green">
          <label class="cs-custom-option-label" for="green">
            <span class="cs-color-swatch" style="background-color: #16c995;"></span>
          </label>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary btn-block">
      <i class="cxi-cart align-middle mt-n1 mr-2"></i>
      Add to cart
    </button>
  </div>
</div>

Category card: Style 1

<!-- Category card: Style 1 -->
<a class="d-block cs-image-scale cs-heading-highlight text-center" href="#">
  <div class="cs-image-inner mb-3 rounded">
    <img src="path-to-image" alt="Category image">
  </div>
  <h3 class="h5 mb-3">Women’s</h3>
</a>

Category card: Style 2

<!-- Category card: Style 2 -->
<a class="d-block cs-image-scale cs-heading-highlight text-center" href="#">
  <div class="cs-image-inner mb-4 rounded-circle">
    <img src="path-to-image" alt="Category image">
  </div>
  <h3 class="h5 mb-3">Jackets</h3>
</a>

Promo banner

Summer Collections

Sale Up to 70%

Explore new prices

Limited time offer

0Days
0Hours
0Mins
0Secs
<!-- Promo banner -->
<div class="py-5 px-md-5 px-4 bg-size-cover bg-position-center-y" style="background-image: url(path-to-background-image);">
  <div class="mt-md-3 mb-5 pb-5 p-md-2" style="max-width: 14rem;">
    <h3 class="mb-2 pb-1 font-size-sm text-uppercase">Summer Collections</h3>
    <h2 class="pb-3">Sale Up to 70%</h2>
    <a class="btn btn-outline-primary mb-5" href="#">Explore new prices</a>
  </div>
  <div class="mb-md-3 pt-5 p-md-2">
    <h3 class="mb-2 pb-1 font-size-sm text-uppercase">Limited time offer</h3>
    <div class="cs-countdown h3 mb-0" data-countdown="10/01/2022 07:00:00 PM">
      <div class="cs-countdown-days mb-0">
        <span class="cs-countdown-value">0</span>
        <span class="cs-countdown-label mt-1 font-size-sm text-body">Days</span>
      </div>
      <div class="cs-countdown-hours mb-0">
        <span class="cs-countdown-value">0</span>
        <span class="cs-countdown-label mt-1 font-size-sm text-body">Hours</span>
      </div>
      <div class="cs-countdown-minutes mb-0">
        <span class="cs-countdown-value">0</span>
        <span class="cs-countdown-label mt-1 font-size-sm text-body">Mins</span>
      </div>
      <div class="cs-countdown-seconds mb-0">
        <span class="cs-countdown-value">0</span>
        <span class="cs-countdown-label mt-1 font-size-sm text-body">Secs</span>
      </div>
    </div>
  </div>
</div>

Active filters

<!-- Active filters -->
<a class="active-filter" href="#">Active filter</a>

Product review

Devon Lane

July 15, 2020

Phasellus varius faucibus ultrices odio in. Massa neque dictum natoque ornare rutrum malesuada et phasellus. Viverra natoque nulla cras vel nisl proin senectus. Tortor sed eleifend ante tristique felis sed urna aliquet. Suspendisse fames egestas sed duis purus diam et.

Annette Black

1 day ago

@Devon LaneEgestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.

Albert Flores

July 7, 2020

Libero commodo sit dui ac proin. Penatibus ultricies at adipiscing mauris nunc. Fames faucibus nisl duis id diam.

<!-- Product review -->
<div class="mb-4 pb-4 border-bottom">
  <div class="row">
    <div class="col-md-3 col-sm-4 mb-sm-0 mb-3">
      <h3 class="mb-2 font-size-lg">Annette Black</h3>
      <span class="d-block mb-3 font-size-sm text-muted">1 day ago</span>
      <div class="mt-n1 star-rating">
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star"></i>
      </div>
    </div>
    <div class="col">
      <p class="mb-3">
        <a class="mr-1 font-weight-bold text-decoration-none" href="#">@Devon Lane</a>
        Egestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.
      </p>
      <div class="d-flex justify-content-between">
        <a class="nav-link p-0 font-size-sm" href="#">
          <i class="cxi-chat mr-2 font-size-base align-middle mt-n1"></i>
          Reply
        </a>
        <div class="d-flex">
          <a class="nav-link mr-3 p-0 font-size-sm" href="#">
            <i class="cxi-like mr-2 font-size-base align-middle mt-n1 text-success"></i>
            2
          </a>
          <a class="nav-link p-0 font-size-sm" href="#">
            <i class="cxi-dislike mr-2 font-size-base align-middle mt-n1 text-danger"></i>
            1
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
Top