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 bg-danger">-50%</span>
      <div class="star-rating ms-auto">
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star"></i>
      </div>
    </div>
    <div class="card-product-widgets-bottom">
      <a class="btn-wishlist ms-auto" href="#" data-bs-toggle="tooltip" data-bs-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 ms-2 ps-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="form-check form-option form-option-sm form-option-size form-check-inline">
          <input type="radio" class="form-check-input" id="xl-sm-1" name="size-1" value="XL" checked>
          <label for="xl-sm-1" class="form-option-label">XL</label>
        </div>
        <div class="form-check form-option form-option-sm form-option-size form-check-inline">
          <input type="radio" class="form-check-input" id="l-sm-1" name="size-1" value="L">
          <label for="l-sm-1" class="form-option-label">L</label>
        </div>
        <div class="form-check form-option form-option-sm form-option-size form-check-inline">
          <input type="radio" class="form-check-input" id="m-sm-1" name="size-1" value="M">
          <label for="m-sm-1" class="form-option-label">M</label>
        </div>
        <div class="form-check form-option form-option-sm form-option-size form-check-inline">
          <input type="radio" class="form-check-input" id="x-sm-1" name="size-1" value="X">
          <label for="x-sm-1" class="form-option-label">X</label>
        </div>
        <div class="form-check form-option form-option-sm form-option-size form-check-inline">
          <input type="radio" class="form-check-input" id="xs-sm-1" name="size-1" value="XS">
          <label for="xs-sm-1" class="form-option-label">XS</label>
        </div>
      </div>
      <div class="ms-auto">
        <div class="form-check form-option form-option-sm form-option-color form-check-inline">
          <input class="form-check-input" type="radio" name="color-sm-1" id="blue-sm-1" value="Blue" checked>
          <label class="form-option-label rounded-circle" for="blue-sm-1">
            <span class="form-option-color-indicator rounded-circle" style="background-color: #6a9bf4;"></span>
          </label>
        </div>
        <div class="form-check form-option form-option-sm form-option-color form-check-inline">
          <input class="form-check-input" type="radio" name="color-sm-1" id="orange-sm-1" value="Orange">
          <label class="form-option-label rounded-circle" for="orange-sm-1">
            <span class="form-option-color-indicator rounded-circle" style="background-color: #ff9d50;"></span>
          </label>
        </div>
        <div class="form-check form-option form-option-sm form-option-color form-check-inline">
          <input class="form-check-input" type="radio" name="color-sm-1" id="green-sm-1" value="Green">
          <label class="form-option-label rounded-circle" for="green-sm-1">
            <span class="form-option-color-indicator rounded-circle" style="background-color: #16c995;"></span>
          </label>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary d-block w-100">
      <i class="ci-cart align-middle mt-n1 me-2"></i>
      Add to cart
    </button>
  </div>
</div>

Category card: Style 1

<!-- Category card: Style 1 -->
<a class="d-block image-scale heading-highlight text-center" href="#">
  <div class="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 image-scale heading-highlight text-center" href="#">
  <div class="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 fs-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 fs-sm text-uppercase">Limited time offer</h3>
    <div class="countdown h3 mb-0" data-countdown="10/01/2022 07:00:00 PM">
      <div class="countdown-days mb-0">
        <span class="countdown-value">0</span>
        <span class="countdown-label mt-1 fs-sm text-body">Days</span>
      </div>
      <div class="countdown-hours mb-0">
        <span class="countdown-value">0</span>
        <span class="countdown-label mt-1 fs-sm text-body">Hours</span>
      </div>
      <div class="countdown-minutes mb-0">
        <span class="countdown-value">0</span>
        <span class="countdown-label mt-1 fs-sm text-body">Mins</span>
      </div>
      <div class="countdown-seconds mb-0">
        <span class="countdown-value">0</span>
        <span class="countdown-label mt-1 fs-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 fs-lg">Annette Black</h3>
      <span class="d-block mb-3 fs-sm text-muted">1 day ago</span>
      <div class="mt-n1 star-rating">
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star"></i>
      </div>
    </div>
    <div class="col">
      <p class="mb-3">
        <a class="me-1 fw-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 fs-sm" href="#">
          <i class="ci-chat me-2 fs-base align-middle mt-n1"></i>
          Reply
        </a>
        <div class="d-flex">
          <a class="nav-link me-3 p-0 fs-sm" href="#">
            <i class="ci-like me-2 fs-base align-middle mt-n1 text-success"></i>
            2
          </a>
          <a class="nav-link p-0 fs-sm" href="#">
            <i class="ci-dislike me-2 fs-base align-middle mt-n1 text-danger"></i>
            1
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
Top