---
layout: sidebar-v1
title: Cart
---

<div class="toolbar-v1-fixed-wrap">{{> toolbar-v1}}</div>

<!-- Container -->
<div
  id="shop-page"
  class="container sidebar-boxed"
  data-open-sidebar
  data-page-title="Cart"
>
  {{> toolbar-v1}}

  <div class="shop-wrapper">
    <div class="cart-container">
      <div class="cart-header">
        <div class="header-inner">
          <h2></h2>
          <div class="header-actions">
            <div class="buttons">
              <a class="button is-light">Save Order</a>
              <a
                href="/sidebar-v1-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="/sidebar-v1-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>