Createx UI Kit | Shop components

Product card: Basic example

Result
HTML

-50%

Shirt with insertion lace trims

$20.40 ~~$40.80~~

XL

L

M

X

XS

<!-- 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 w-100">
      <i class="ci-cart align-middle mt-n1 me-2"></i>
      Add to cart
    </button>
  </div>
</div>

Product card: Carousel example

Make sure to link to Tiny Slider css and js files in your document: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js. Use this page as a reference.

Result
HTML

Sport cap with stitches

$40.80

XL

L

M

X

XS

<!-- Product card: Carousel example -->
<div class="card card-product">
  <div class="card-product-img">

    <!-- Carousel -->
    <div class="tns-carousel-wrapper tns-controls-onhover">
      <a class="tns-carousel-inner card-img-top" href="#" data-carousel-options='{
        "nav": false,
        "controlsText": [
          "<i class='ci-angle-left'></i>",
          "<i class='ci-angle-right'></i>"
        ]
      }'>

        <!-- Carousel items -->
        <div><img src="path-to-image" class="card-img-top" alt="Product image"></div>
        <div><img src="path-to-image" class="card-img-top" alt="Product image"></div>
        <div><img src="path-to-image" class="card-img-top" alt="Product image"></div>
      </a>
    </div>
    <div class="card-product-widgets-top">
      <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"></i>
        <i class="sr-star ci-star"></i>
      </div>
    </div>
    <div class="card-product-widgets-bottom">
      <a class="btn-wishlist active ms-auto" href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Remove from wishlist"></a>
    </div>
  </div>
  <div class="card-body pb-2">
    <h3 class="card-product-title text-truncate mb-2">
      <a class="nav-link" href="#">Sport cap with stitches</a>
    </h3>
    <div class="d-flex align-items-center">
      <span class="h5 d-inline-block mb-0">$40.80</span>
    </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-2" name="size-2" value="XL" checked>
          <label for="xl-sm-2" 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-2" name="size-2" value="L">
          <label for="l-sm-2" 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-2" name="size-2" value="M">
          <label for="m-sm-2" 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-2" name="size-2" value="X">
          <label for="x-sm-2" 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-2" name="size-2" value="XS">
          <label for="xs-sm-2" 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-2" id="blue-sm-2" value="Blue" checked>
          <label class="form-option-label rounded-circle" for="blue-sm-2">
            <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-2" id="orange-sm-2" value="Orange">
          <label class="form-option-label rounded-circle" for="orange-sm-2">
            <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-2" id="green-sm-2" value="Green">
          <label class="form-option-label rounded-circle" for="green-sm-2">
            <span class="form-option-color-indicator rounded-circle" style="background-color: #16c995;"></span>
          </label>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary w-100">
      <i class="ci-cart align-middle mt-n1 me-2"></i>
      Add to cart
    </button>
  </div>
</div>

Product cards: Carousel

Make sure to link to Tiny Slider css and js files in your document: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js. Use this page as a reference.

Result
HTML

-50%

Shirt with insertion lace trims

$20.40 ~~$40.80~~

Basic hooded sweatshirt in pink

$20.40 ~~$40.80~~

<!-- Product cards: Carousel -->
<div class="tns-carousel-wrapper tns-controls-outside">
  <div class="tns-carousel-inner" data-carousel-options='{
    "nav": false,
    "responsive": {
      "0": {
        "items":1,
        "gutter": 16
      },
      "500": {
        "items":2,
        "gutter": 18
      },
      "768": {
        "items":3,
        "gutter": 18
      },
      "1200": {
        "items": 3,
        "gutter": 24
      }
    }
  }'>

    <!-- Carousel item -->
    <div>
      <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">
              <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">
          <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>
    </div>

    <!-- Carousel item -->
    <div>
      <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">
            <div class="ms-auto 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"></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">
          <h3 class="card-product-title text-truncate mb-2">
            <a class="nav-link" href="#">Sport cap with stitches</a>
          </h3>
          <div class="d-flex align-items-center">
            <span class="h5 d-inline-block mb-0">$40.80</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Carousel item... -->
    <div>
      <div class="card card-product">
        ...
      </div>
    </div>

    <!-- Add as many items as you need -->
  </div>
</div>

Women’s

<!-- 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

Result
HTML

Jackets

<!-- 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>

Product gallery

Make sure to link to Tiny Slider and Light Gallery css and js files in your document:

vendor/tiny-slider/dist/tiny-slider.css
vendor/tiny-slider/dist/min/tiny-slider.js
vendor/lightgallery.js/dist/css/lightgallery.min.css
vendor/lightgallery.js/dist/js/lightgallery.min.js

If you need extra features like zooming, fullscreen view or video you need to include additional plugins:

vendor/lg-fullscreen.js/dist/lg-fullscreen.min.js
vendor/lg-zoom.js/dist/lg-zoom.min.js
vendor/lg-video.js/dist/lg-video.min.js

Use this page as a reference.

Result
HTML

Gallery image caption #1

Gallery image caption #2

Gallery image caption #3

Gallery image caption #4

Gallery image caption #5

<!-- Product gallery -->
<div class="tns-carousel-wrapper gallery product-gallery" data-video="true">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "navContainer": "#tns-thumbnails",
    "navAsThumbnails": true
  }'>

    <!-- Product gallery item -->
    <a class="gallery-item" href="path-to-large-image" data-sub-html='<h6 class="text-light">Gallery image caption #1</h6>'>
      <img class="rounded" src="path-to-small-image" alt="Carousel image">
      <span class="gallery-caption">Gallery image caption #1</span>
    </a>

    <!-- Product gallery item -->
    <a class="gallery-item" href="path-to-large-image" data-sub-html='<h6 class="text-light">Gallery image caption #2</h6>'>
      <img class="rounded" src="path-to-small-image" alt="Carousel image">
      <span class="gallery-caption">Gallery image caption #2</span>
    </a>

    <!-- Product gallery item -->
    <a class="gallery-item video-item" href="link-to-youtube/vimeo" data-sub-html='<h6 class="text-light">Gallery image caption #3</h6>'>
      <img class="rounded" src="path-to-small-image" alt="Carousel image">
      <span class="gallery-caption">Gallery image caption #3</span>
    </a>
  </div>

  <!-- Product gallery thumbnails -->
  <div class="tns-thumbnails" id="tns-thumbnails">
    <button type="button" data-nav="0">
      <img src="path-to-thumbnail" alt="Thumbnail">
    </button>
    <button type="button" data-nav="1">
      <img src="path-to-thumbnail" alt="Thumbnail">
    </button>
    <button type="button" data-nav="2" class="video-indicator">
      <img src="path-to-thumbnail" alt="Thumbnail">
    </button>
  </div>
</div>

Promo banner

Result
HTML

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="01/30/2024 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

Result
HTML

Clothing Shirts & tops Brand name Size

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

Product review

Result
HTML

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.

Reply

2 0

Annette Black

1 day ago

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

Reply

2 1

Albert Flores

July 7, 2020

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

Reply

0 3

<!-- 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>

Shop components

Product card: Basic example

Shirt with insertion lace trims

Product card: Carousel example

Sport cap with stitches

Product cards: Carousel

Shirt with insertion lace trims

Sport cap with stitches

Men fashion gray shoes

Basic hooded sweatshirt in pink

Category card: Style 1

Women’s

Category card: Style 2

Jackets

Product gallery

Promo banner

Summer Collections

Sale Up to 70%

Limited time offer

Active filters

Product review

Devon Lane

Annette Black

Albert Flores