---
layout: navbar-v2
title: Cart
---

<div id="shop-page" class="navbar-v2-wrapper">
  <div class="container is-desktop">
    <div class="shop-wrapper">
      <div class="cart-container">
        <div class="cart-header">
          <div class="header-inner">
            <h2>My Cart</h2>
            <div class="header-actions">
              <div class="buttons">
                <a class="button is-light">Save Order</a>
                <a
                  href="/navbar-v2-ecommerce-checkout.html"
                  class="button is-solid accent-button raised"
                  >Checkout</a
                >
              </div>
            </div>
          </div>
        </div>

        <div class="cart-content">
          <div class="columns">
            <div class="column is-8">
              <!--Table-->
              <div class="flex-table">
                <!--Table header-->
                <div class="flex-table-header">
                  <span class="product"><span>Product</span></span>
                  <span class="quantity">Quantity</span>
                  <span class="price">Price</span>
                  <span class="discount">Discount</span>
                  <span class="total">Total</span>
                </div>
                <!--Table item-->
                <div class="flex-table-item">
                  <div class="product">
                    <img src="assets/img/products/2.svg" alt="" />
                    <span class="product-name">Cool Shirt</span>
                  </div>
                  <div class="quantity has-spinner">
                    <div class="spinner">
                      <button class="remove">
                        <i data-feather="minus"></i>
                      </button>
                      <span class="value">1</span>
                      <button class="add">
                        <i data-feather="plus"></i>
                      </button>
                      <input class="spinner-input" type="hidden" value="1" />
                    </div>
                  </div>
                  <div class="price">
                    <span class="has-price">29.00</span>
                  </div>
                  <div class="discount">
                    <span class="has-price">0</span>
                  </div>
                  <div class="total">
                    <span class="has-price">29.00</span>
                  </div>
                </div>
                <!--Table item-->
                <div class="flex-table-item">
                  <div class="product">
                    <img src="assets/img/products/3.svg" alt="" />
                    <span class="product-name">Military Short</span>
                  </div>
                  <div class="quantity has-spinner">
                    <div class="spinner">
                      <button class="remove">
                        <i data-feather="minus"></i>
                      </button>
                      <span class="value">1</span>
                      <button class="add">
                        <i data-feather="plus"></i>
                      </button>
                      <input class="spinner-input" type="hidden" value="1" />
                    </div>
                  </div>
                  <div class="price">
                    <span class="has-price">39.00</span>
                  </div>
                  <div class="discount">
                    <span class="has-price">0</span>
                  </div>
                  <div class="total">
                    <span class="has-price">39.00</span>
                  </div>
                </div>
                <!--Table item-->
                <div class="flex-table-item">
                  <div class="product">
                    <img src="assets/img/products/4.svg" alt="" />
                    <span class="product-name">Cool Backpack</span>
                  </div>
                  <div class="quantity has-spinner">
                    <div class="spinner">
                      <button class="remove">
                        <i data-feather="minus"></i>
                      </button>
                      <span class="value">1</span>
                      <button class="add">
                        <i data-feather="plus"></i>
                      </button>
                      <input class="spinner-input" type="hidden" value="1" />
                    </div>
                  </div>
                  <div class="price">
                    <span class="has-price">125.00</span>
                  </div>
                  <div class="discount">
                    <span class="has-price">0</span>
                  </div>
                  <div class="total">
                    <span class="has-price">125.00</span>
                  </div>
                </div>
              </div>

              <div class="continue-shopping">
                <a href="/navbar-v2-ecommerce-products.html"
                  >Continue Shopping</a
                >
              </div>
            </div>
            <div class="column is-4">
              <div class="cart-summary">
                <div class="summary-header">
                  <h3>Order Summary</h3>
                </div>

                <!--card-->
                <div class="summary-card">
                  <div class="order-line">
                    <span>Subtotal</span>
                    <span>193.00</span>
                  </div>
                  <div class="order-line">
                    <span>Shipping</span>
                    <span class="is-text">Not calculated</span>
                  </div>
                  <div class="order-line">
                    <span>Taxes</span>
                    <span>8.92</span>
                  </div>
                  <div class="order-line">
                    <span class="is-total">Total</span>
                    <span class="is-total">201.92</span>
                  </div>
                </div>

                <!--card-->
                <div class="summary-card">
                  <img
                    class="light-image"
                    src="assets/img/icons/questions/help.svg"
                    alt=""
                  />
                  <img
                    class="dark-image"
                    src="assets/img/icons/questions/help-dark.svg"
                    alt=""
                  />
                  <h4>Help center</h4>
                  <p>
                    Having trouble? Please search our
                    <a class="standard-link">Help Center</a> for a quick answer
                    to your problem.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>