# E-commerce

## Component #1

- Preview
- HTML

## The better way to shop with Front top-products

### T-shirts

Starting from $29.99

View all

### Tech covers

Starting from $399.99

View all

### Caps

Starting from $13.99

View all

Limited time only, while stocks last.

                    <!-- Card Grid -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                        <h2>The better way to shop with Front top-products</h2>
                      </div>
                      <!-- End Heading -->

                      <div class="row mb-2">
                        <div class="col-sm-6 col-md-4 mb-4">
                          <!-- Card -->
                          <div class="card card-bordered shadow-none overflow-hidden">
                            <div class="card-body d-flex align-items-center border-bottom p-0">
                              <div class="w-65 border-end">
                                <img class="img-fluid" src="../assets/img/380x400/img3.jpg" alt="Image Description">
                              </div>
                              <div class="w-35">
                                <div class="border-bottom">
                                  <img class="img-fluid" src="../assets/img/380x360/img8.jpg" alt="Image Description">
                                </div>
                                <img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
                              </div>
                            </div>

                            <div class="card-footer text-center">
                              <h3 class="card-title">T-shirts</h3>
                              <p class="card-text text-muted small">Starting from $29.99</p>
                              <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-md-4 mb-4">
                          <!-- Card -->
                          <div class="card card-bordered shadow-none overflow-hidden">
                            <div class="card-body d-flex align-items-center border-bottom p-0">
                              <div class="w-65 border-end">
                                <img class="img-fluid" src="../assets/img/380x400/img4.jpg" alt="Image Description">
                              </div>
                              <div class="w-35">
                                <div class="border-bottom">
                                  <img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="Image Description">
                                </div>
                                <img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
                              </div>
                            </div>

                            <div class="card-footer text-center">
                              <h3 class="card-title">Tech covers</h3>
                              <p class="card-text text-muted small">Starting from $399.99</p>
                              <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-md-4 mb-4">
                          <!-- Card -->
                          <div class="card card-bordered shadow-none overflow-hidden">
                            <div class="card-body d-flex align-items-center border-bottom p-0">
                              <div class="w-65 border-end">
                                <img class="img-fluid" src="../assets/img/380x400/img2.jpg" alt="Image Description">
                              </div>
                              <div class="w-35">
                                <div class="border-bottom">
                                  <img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
                                </div>
                                <img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="Image Description">
                              </div>
                            </div>

                            <div class="card-footer text-center">
                              <h3 class="card-title">Caps</h3>
                              <p class="card-text text-muted small">Starting from $13.99</p>
                              <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="text-center">
                        <p class="small">Limited time only, while stocks last.</p>
                      </div>
                    </div>
                    <!-- End Card Grid -->

## Component #2

- Preview
- HTML
- JS

287 reviews

# New Era 9Forty LA Dodgers adjustable cap in black

American label New Era manufacturing baseball hats for teams since the 1930s.

Total price:

### $159.99

$179.99
Select quantity
Free shipping

We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.

30 Days return

If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.

Need Help? Chat now

                    <!-- Hero -->
                    <div class="container content-space-1">
                      <div class="row">
                        <div class="col-md-7 mb-7 mb-md-0">
                          <div class="pe-md-4">
                            <div class="card-pinned">
                              <!-- Swiper Main Slider -->
                              <div class="js-swiper-shop-product swiper">
                                <div class="swiper-wrapper">
                                  <!-- Slide -->
                                  <div class="swiper-slide">
                                    <div class="card card-bordered shadow-none">
                                      <img class="card-img" src="../assets/img/600x600/img1.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Slide -->

                                  <!-- Slide -->
                                  <div class="swiper-slide">
                                    <div class="card card-bordered shadow-none">
                                      <img class="card-img" src="../assets/img/600x600/img2.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Slide -->

                                  <!-- Slide -->
                                  <div class="swiper-slide">
                                    <div class="card card-bordered shadow-none">
                                      <img class="card-img" src="../assets/img/600x600/img3.jpg" alt="Image Description">
                                    </div>
                                  </div>
                                  <!-- End Slide -->
                                </div>

                                <!-- Arrows -->
                                <div class="js-swiper-shop-product-button-next swiper-button-next"></div>
                                <div class="js-swiper-shop-product-button-prev swiper-button-prev"></div>
                              </div>
                              <!-- End Swiper Main Slider -->

                              <!-- Swiper Thumb Slider -->
                              <div class="position-absolute bottom-0 end-0 start-0 zi-1 p-4">
                                <div class="js-swiper-shop-product-thumb swiper" style="max-width: 15rem;">
                                  <div class="swiper-wrapper">
                                    <!-- Slide -->
                                    <div class="swiper-slide">
                                      <a class="avatar avatar-circle" href="javascript:;">
                                        <img class="avatar-img" src="../assets/img/160x160/img11.jpg" alt="Image Description">
                                      </a>
                                    </div>
                                    <!-- End Slide -->

                                    <!-- Slide -->
                                    <div class="swiper-slide">
                                      <a class="avatar avatar-circle" href="javascript:;">
                                        <img class="avatar-img" src="../assets/img/160x160/img12.jpg" alt="Image Description">
                                      </a>
                                    </div>
                                    <!-- End Slide -->

                                    <!-- Slide -->
                                    <div class="swiper-slide">
                                      <a class="avatar avatar-circle" href="javascript:;">
                                        <img class="avatar-img" src="../assets/img/160x160/img13.jpg" alt="Image Description">
                                      </a>
                                    </div>
                                    <!-- End Slide -->
                                  </div>
                                </div>
                              </div>
                              <!-- End Swiper Thumb Slider -->
                            </div>
                          </div>
                        </div>
                        <!-- End Col -->

                        <div class="col-md-5">
                          <!-- Rating -->
                          <a class="d-flex gap-1 mb-4" href="#reviewSection">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <span class="ms-1">287 reviews</span>
                          </a>
                          <!-- End Rating -->

                          <!-- Heading -->
                          <div class="mb-5">
                            <h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
                            <p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
                          </div>
                          <!-- End Heading -->

                          <!-- Price -->
                          <div class="mb-5">
                            <span class="d-block mb-2">Total price:</span>
                            <div class="d-flex align-items-center">
                              <h3 class="mb-0">$159.99</h3>
                              <span class="ms-2"><del>$179.99</del></span>
                            </div>
                          </div>
                          <!-- End Price -->

                          <!-- Quantity -->
                          <div class="quantity-counter mb-3">
                            <div class="js-quantity-counter row align-items-center">
                              <div class="col">
                                <span class="d-block small">Select quantity</span>
                                <input class="js-result form-control form-control-quantity-counter" type="text" value="1">
                              </div>
                              <!-- End Col -->

                              <div class="col-auto">
                                <a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
                                  <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
                                  </svg>
                                </a>
                                <a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
                                  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
                                  </svg>
                                </a>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->
                          </div>
                          <!-- End Quantity -->

                          <!-- Accordion -->
                          <div class="accordion mb-5" id="shopCartAccordion">
                            <!-- Collapse -->
                            <div class="accordion-item">
                              <a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseOne" aria-expanded="false" aria-controls="shopCartAccordionCollapseOne">
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="svg-icon svg-icon-sm text-primary">

                                    </span>
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    Free shipping
                                  </div>
                                </div>
                              </a>

                              <div id="shopCartAccordionCollapseOne" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
                                <div class="accordion-body">
                                  <p class="mb-0">We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.</p>
                                </div>
                              </div>
                            </div>
                            <!-- End Collapse -->

                            <!-- Collapse -->
                            <div class="accordion-item">
                              <a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseTwo" aria-expanded="false" aria-controls="shopCartAccordionCollapseTwo">
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="svg-icon svg-icon-sm text-primary">

                                    </span>
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    30 Days return
                                  </div>
                                </div>
                              </a>

                              <div id="shopCartAccordionCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
                                <div class="accordion-body">
                                  <p class="mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
                                </div>
                              </div>
                            </div>
                            <!-- End Collapse -->
                          </div>
                          <!-- End Accordion -->

                          <div class="d-grid mb-4">
                            <button type="button" class="btn btn-primary btntransition">Add to cart</button>
                          </div>

                          <!-- Media -->
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <div class="svg-icon svg-icon-sm text-primary">

                              </div>
                            </div>
                            <div class="flex-grow-1 ms-2">
                              <span class="small me-1">Need Help?</span>
                              <a class="link small" href="#">Chat now</a>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Hero -->

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>
                    <script src="../assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF SWIPER
                        // =======================================================
                        var swiper = new Swiper('.js-swiper-shop-product',{
                          effect: 'fade',
                          autoplay: true,
                          loop: true,
                          navigation: {
                            nextEl: '.js-swiper-shop-product-button-next',
                            prevEl: '.js-swiper-shop-product-button-prev',
                          },
                          thumbs: {
                            swiper: sliderThumbs
                          }
                        });

                        var sliderThumbs = new Swiper('.js-swiper-shop-product-thumb', {
                          slidesPerView: 3,
                          watchSlidesVisibility: true,
                          watchSlidesProgress: true,
                          history: false,
                        });

                        // INITIALIZATION OF  QUANTITY COUNTER
                        // =======================================================
                        new HSQuantityCounter('.js-quantity-counter')
                      })()
                    </script>

## Component #3

- Preview
- HTML

# Shopping cart

2 items

- ##### Originals national backpack

  ##### $29.99

  Gender: Men
  Color: Grey
  Size: One size
  Remove Save for later
  $29.99

- ##### Vans large image t-shirt

  ##### $43.99

  Gender: Women
  Color: Core Black / Carbon
  Size: S
  Remove Save for later
  $29.99

Continue shopping

### Order summary

Item subtotal (2)
  $73.98

Delivery
  Free

Free - Standard delivery Shipment may take 5-6 business days
$7.99 - Express delivery Shipment may take 2-3 business days

Estimated tax
  $0.00

Total
  $73.98

Checkout
Need Help? Chat now

                    <!-- Content -->
                    <div class="container content-space-1 content-space-lg-2">
                      <div class="row">
                        <div class="col-lg-8 mb-7 mb-lg-0">
                          <!-- Heading -->
                          <div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
                            <h1 class="h3 mb-0">Shopping cart</h1>
                            <span>2 items</span>
                          </div>
                          <!-- End Heading -->

                          <!-- Form -->
                          <form>
                            <!-- List Group -->
                            <ul class="list-group list-group-flush list-group-no-gutters mb-5">
                              <!-- Item -->
                              <li class="list-group-item">
                                <div class="d-flex">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <div class="row">
                                      <div class="col-sm-7 mb-3 mb-sm-0">
                                        <h5><a class="text-dark" href="#">Originals national backpack</a></h5>

                                        <div class="d-block d-sm-none">
                                          <h5 class="mb-1">$29.99</h5>
                                        </div>

                                        <div class="d-grid gap-1">
                                          <div class="text-body">
                                            <span class="small">Gender:</span>
                                            <span class="fw-semi-bold small">Men</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Color:</span>
                                            <span class="fw-semi-bold small">Grey</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Size:</span>
                                            <span class="fw-semi-bold small">One size</span>
                                          </div>
                                        </div>
                                      </div>
                                      <!-- End Col -->

                                      <div class="col-sm-3">
                                        <div class="row">
                                          <div class="col-auto">
                                            <!-- Select -->
                                            <select class="form-select form-select-sm mb-3">
                                              <option value="quantity1">1</option>
                                              <option value="quantity2">2</option>
                                              <option value="quantity3">3</option>
                                              <option value="quantity4">4</option>
                                              <option value="quantity5">5</option>
                                              <option value="quantity6">6</option>
                                              <option value="quantity7">7</option>
                                              <option value="quantity8">8</option>
                                              <option value="quantity9">9</option>
                                              <option value="quantity10">10</option>
                                            </select>
                                            <!-- End Select -->
                                          </div>

                                          <div class="col-auto">
                                            <div class="d-grid gap-2">
                                              <a class="link-sm link-secondary small" href="javascript:;">
                                                <i class="bi-trash me-1"></i> Remove
                                              </a>

                                              <a class="link-sm link-secondary small" href="javascript:;">
                                                <i class="bi-heart me-1"></i> Save for later
                                              </a>
                                            </div>
                                          </div>
                                          <!-- End Col -->
                                        </div>
                                        <!-- End Row -->
                                      </div>
                                      <!-- End Col -->

                                      <div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
                                        <span class="h5 d-block mb-1">$29.99</span>
                                      </div>
                                      <!-- End Col -->
                                    </div>
                                    <!-- End Row -->
                                  </div>
                                </div>
                              </li>
                              <!-- End Item -->

                              <!-- Item -->
                              <li class="list-group-item">
                                <div class="d-flex">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <div class="row">
                                      <div class="col-sm-7 mb-3 mb-sm-0">
                                        <h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>

                                        <div class="d-block d-sm-none">
                                          <h5 class="mb-1">$43.99</h5>
                                        </div>

                                        <div class="d-grid gap-1">
                                          <div class="text-body">
                                            <span class="small">Gender:</span>
                                            <span class="fw-semi-bold small">Women</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Color:</span>
                                            <span class="fw-semi-bold small">Core Black / Carbon</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Size:</span>
                                            <span class="fw-semi-bold small">S</span>
                                          </div>
                                        </div>
                                      </div>
                                      <!-- End Col -->

                                      <div class="col-sm-3">
                                        <div class="row">
                                          <div class="col-auto">
                                            <!-- Select -->
                                            <select class="form-select form-select-sm mb-3">
                                              <option value="quantity1">1</option>
                                              <option value="quantity2">2</option>
                                              <option value="quantity3">3</option>
                                              <option value="quantity4">4</option>
                                              <option value="quantity5">5</option>
                                              <option value="quantity6">6</option>
                                              <option value="quantity7">7</option>
                                              <option value="quantity8">8</option>
                                              <option value="quantity9">9</option>
                                              <option value="quantity10">10</option>
                                            </select>
                                            <!-- End Select -->
                                          </div>

                                          <div class="col-auto">
                                            <div class="d-grid gap-2">
                                              <a class="link-sm link-secondary small" href="javascript:;">
                                                <i class="bi-trash me-1"></i> Remove
                                              </a>

                                              <a class="link-sm link-secondary small" href="javascript:;">
                                                <i class="bi-heart me-1"></i> Save for later
                                              </a>
                                            </div>
                                          </div>
                                          <!-- End Col -->
                                        </div>
                                        <!-- End Row -->
                                      </div>
                                      <!-- End Col -->

                                      <div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
                                        <span class="h5 d-block mb-1">$29.99</span>
                                      </div>
                                      <!-- End Col -->
                                    </div>
                                    <!-- End Row -->
                                  </div>
                                </div>
                              </li>
                              <!-- End Item -->
                            </ul>
                            <!-- End List Group -->

                            <div class="d-sm-flex justify-content-end">
                              <a class="link" href="../demo-shop/index.html">
                                <i class="bi-chevron-left small ms-1"></i> Continue shopping
                              </a>
                            </div>
                          </form>
                          <!-- End Form -->
                        </div>
                        <!-- End Col -->

                        <div class="col-lg-4">
                          <div class="ps-lg-4">
                            <!-- Card -->
                            <div class="card card-sm shadow-sm mb-4">
                              <div class="card-body">
                                <div class="border-bottom pb-4 mb-4">
                                  <h3 class="card-header-title">Order summary</h3>
                                </div>

                                <form>
                                  <div class="border-bottom pb-4 mb-3">
                                    <input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
                                  </div>

                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-grid gap-3">
                                      <dl class="row">
                                        <dt class="col-sm-6">Item subtotal (2)</dt>
                                        <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                      </dl>
                                      <!-- End Row -->

                                      <dl class="row">
                                        <dt class="col-sm-6">Delivery</dt>
                                        <dd class="col-sm-6 text-sm-end mb-0">Free</dd>
                                      </dl>
                                      <!-- End Row -->
                                    </div>
                                  </div>

                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-grid gap-3">
                                      <!-- Check -->
                                      <div class="form-check">
                                        <input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg1" checked>
                                        <label class="form-check-label text-dark" for="deliveryRadio1Eg1">
                                          Free - Standard delivery
                                          <span class="d-block text-muted small">Shipment may take 5-6 business days</span>
                                        </label>
                                      </div>
                                      <!-- End Check -->

                                      <!-- Check -->
                                      <div class="form-check">
                                        <input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg1">
                                        <label class="form-check-label text-dark" for="deliveryRadio2Eg1">
                                          $7.99 - Express delivery
                                          <span class="d-block text-muted small">Shipment may take 2-3 business days</span>
                                        </label>
                                      </div>
                                      <!-- End Check -->
                                    </div>
                                  </div>

                                  <div class="d-grid gap-3 mb-4">
                                    <dl class="row">
                                      <dt class="col-sm-6">Estimated tax</dt>
                                      <dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
                                    </dl>
                                    <!-- End Row -->

                                    <dl class="row">
                                      <dt class="col-sm-6">Total</dt>
                                      <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                    </dl>
                                    <!-- End Row -->
                                  </div>

                                  <div class="d-grid">
                                    <a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
                                  </div>
                                </form>
                              </div>
                              <!-- End Card -->
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <div class="svg-icon svg-icon-sm text-primary">

                                </div>
                              </div>
                              <div class="flex-grow-1 ms-2">
                                <span class="small me-1">Need Help?</span>
                                <a class="link small" href="#">Chat now</a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Content -->

## Component #4

- Preview
- HTML

### Order summary

1

###### Originals national backpack

Gender: Men
Color: Grey
Size: One size
1

###### Vans large image t-shirt

Gender: Women
Color: Core Black / Carbon
Size: S

Item subtotal (2)
  $73.98

Delivery
  Free

Free - Standard delivery Shipment may take 5-6 business days
$7.99 - Express delivery Shipment may take 2-3 business days

Estimated tax
  $0.00

Total
  $73.98

Checkout
Need Help? Chat now

                    <!-- Content -->
                    <div class="container content-space-1 content-space-lg-2">
                      <div class="row">
                        <div class="col-lg-4">
                          <div class="ps-lg-4">
                            <!-- Card -->
                            <div class="card card-sm shadow-sm mb-4">
                              <div class="card-body">
                                <div class="border-bottom pb-4 mb-4">
                                  <h3 class="card-header-title">Order summary</h3>
                                </div>

                                <form>
                                  <!-- Product -->
                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-flex">
                                      <div class="flex-shrink-0">
                                        <div class="avatar avatar-lg me-3">
                                          <img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="Image Description">
                                          <sup class="avatar-status avatar-status-primary">1</sup>
                                        </div>
                                      </div>

                                      <div class="flex-grow-1">
                                        <h6>Originals national backpack</h6>

                                        <div class="d-grid">
                                          <div class="text-body">
                                            <span class="small">Gender:</span>
                                            <span class="small">Men</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Color:</span>
                                            <span class="small">Grey</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Size:</span>
                                            <span class="small">One size</span>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Product -->

                                  <!-- Product -->
                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-flex">
                                      <div class="flex-shrink-0">
                                        <div class="avatar avatar-lg me-3">
                                          <img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="Image Description">
                                          <sup class="avatar-status avatar-status-primary">1</sup>
                                        </div>
                                      </div>

                                      <div class="flex-grow-1">
                                        <h6>Vans large image t-shirt</h6>

                                        <div class="d-grid">
                                          <div class="text-body">
                                            <span class="small">Gender:</span>
                                            <span class="small">Women</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Color:</span>
                                            <span class="small">Core Black / Carbon</span>
                                          </div>

                                          <div class="text-body">
                                            <span class="small">Size:</span>
                                            <span class="small">S</span>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Product -->

                                  <div class="border-bottom pb-4 mb-3">
                                    <input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
                                  </div>

                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-grid gap-3">
                                      <dl class="row">
                                        <dt class="col-sm-6">Item subtotal (2)</dt>
                                        <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                      </dl>
                                      <!-- End Row -->

                                      <dl class="row">
                                        <dt class="col-sm-6">Delivery</dt>
                                        <dd class="col-sm-6 text-sm-end mb-0">Free</dd>
                                      </dl>
                                      <!-- End Row -->
                                    </div>
                                  </div>

                                  <div class="border-bottom pb-4 mb-4">
                                    <div class="d-grid gap-3">
                                      <!-- Check -->
                                      <div class="form-check">
                                        <input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg2" checked>
                                        <label class="form-check-label text-dark" for="deliveryRadio1Eg2">
                                          Free - Standard delivery
                                          <span class="d-block text-muted small">Shipment may take 5-6 business days</span>
                                        </label>
                                      </div>
                                      <!-- End Check -->

                                      <!-- Check -->
                                      <div class="form-check">
                                        <input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg2">
                                        <label class="form-check-label text-dark" for="deliveryRadio2Eg2">
                                          $7.99 - Express delivery
                                          <span class="d-block text-muted small">Shipment may take 2-3 business days</span>
                                        </label>
                                      </div>
                                      <!-- End Check -->
                                    </div>
                                  </div>

                                  <div class="d-grid gap-3 mb-4">
                                    <dl class="row">
                                      <dt class="col-sm-6">Estimated tax</dt>
                                      <dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
                                    </dl>
                                    <!-- End Row -->

                                    <dl class="row">
                                      <dt class="col-sm-6">Total</dt>
                                      <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                    </dl>
                                    <!-- End Row -->
                                  </div>

                                  <div class="d-grid">
                                    <a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
                                  </div>
                                </form>
                              </div>
                              <!-- End Card -->
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <div class="svg-icon svg-icon-sm text-primary">

                                </div>
                              </div>
                              <div class="flex-grow-1 ms-2">
                                <span class="small me-1">Need Help?</span>
                                <a class="link small" href="#">Chat now</a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Content -->