---
layout: sidebar-v1
title: Checkout
---

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

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

  <!--Payment Wrapper-->
  <div class="shop-wrapper">
    <div class="cart-container">
      <div class="cart-header">
        <div class="header-inner is-smaller">
          <h2 id="checkout-step-title">1. Confirm your order</h2>
          <div class="header-actions">
            <div class="buttons">
              <a id="checkout-back" class="button is-light" data-step="0">
                <span class="icon is-small">
                  <i data-feather="arrow-left"></i>
                </span>
                <span>Back</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!--Checkout content-->
      <div class="cart-content">
        <div class="columns">
          <div class="column is-8">
            <!--Checkout section 1-->
            <div id="checkout-section-1" class="checkout-section is-active">
              <!--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">
                    <span class="has-price">1</span>
                  </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">
                    <span class="has-price">1</span>
                  </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">
                    <span class="has-price">1</span>
                  </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>

            <!--Checkout section-->
            <div id="checkout-section-2" class="checkout-section">
              <div class="columns is-multiline">
                <div class="column is-6">
                  <div class="address-box shipping-address">
                    <input type="radio" name="shipping_address" />
                    <div class="address-box-inner">
                      <p>Jenna Davis</p>
                      <p>53 Miguel Abrejo St.</p>
                      <p>Suite G 63, 92618</p>
                      <p>Los Angeles, CA</p>
                    </div>
                  </div>
                </div>
                <div class="column is-6">
                  <div class="address-box shipping-address">
                    <input type="radio" name="shipping_address" />
                    <div class="address-box-inner">
                      <p>Jenna Davis</p>
                      <p>578 Juan Velasquez Parkway.</p>
                      <p>Appartment 88, 92612</p>
                      <p>Los Angeles, CA</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="add-address-link">
                <a>
                  <i data-feather="plus"></i>
                  <span>Add Address</span>
                </a>
              </div>
            </div>

            <!--Checkout section-->
            <div id="checkout-section-3" class="checkout-section">
              <div class="columns is-multiline">
                <div class="column is-4">
                  <div class="shipping-box">
                    <input type="radio" name="shipping_method" />
                    <div class="shipping-box-inner">
                      <img
                        src="assets/img/icons/checkout/world-dark.svg"
                        alt=""
                      />
                      <p>Worldwide</p>
                    </div>
                  </div>
                </div>
                <div class="column is-4">
                  <div class="shipping-box">
                    <input type="radio" name="shipping_method" />
                    <div class="shipping-box-inner">
                      <img src="assets/img/icons/checkout/ups.svg" alt="" />
                      <p>UPS</p>
                    </div>
                  </div>
                </div>
                <div class="column is-4">
                  <div class="shipping-box">
                    <input type="radio" name="shipping_method" />
                    <div class="shipping-box-inner">
                      <img src="assets/img/icons/checkout/usps.svg" alt="" />
                      <p>USPS</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--Checkout section-->
            <div id="checkout-section-4" class="checkout-section">
              <div class="columns is-multiline">
                <div class="column is-6">
                  <div class="address-box billing-address">
                    <input type="radio" name="billing_address" />
                    <div class="address-box-inner">
                      <p>Jenna Davis</p>
                      <p>53 Miguel Abrejo St.</p>
                      <p>Suite G 63, 92618</p>
                      <p>Los Angeles, CA</p>
                    </div>
                  </div>
                </div>
                <div class="column is-6">
                  <div class="address-box billing-address">
                    <input type="radio" name="billing_address" />
                    <div class="address-box-inner">
                      <p>Jenna Davis</p>
                      <p>578 Juan Velasquez Parkway.</p>
                      <p>Appartment 88, 92612</p>
                      <p>Los Angeles, CA</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="add-address-link">
                <a>
                  <i data-feather="plus"></i>
                  <span>Add Address</span>
                </a>
              </div>
            </div>
          </div>

          <!--Right Side-->
          <div class="column is-4">
            <div class="cart-summary">
              <div class="summary-header">
                <h3>Order Summary</h3>
              </div>

              <!--card-->
              <div
                id="shipping-placeholder-box"
                class="summary-card has-text-centered"
              >
                <img
                  class="light-image"
                  src="assets/img/icons/questions/cart.svg"
                  alt=""
                />
                <img
                  class="dark-image"
                  src="assets/img/icons/questions/cart-dark.svg"
                  alt=""
                />
                <h4>Shipping</h4>
                <p>Please verify your order before proceeding with shipping.</p>
              </div>

              <!--card-->
              <div id="shipping-address-box" class="summary-card is-hidden">
                <img
                  class="light-image shipping-logo"
                  src="assets/img/icons/checkout/world.svg"
                  alt=""
                />
                <img
                  class="dark-image shipping-logo"
                  src="assets/img/icons/checkout/world-dark.svg"
                  alt=""
                />
                <h3>Shipping Address</h3>
              </div>

              <!--card-->
              <div class="summary-card">
                <div class="order-line">
                  <span>Subtotal</span>
                  <span>193.00</span>
                </div>
                <div id="shipping-amount" 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 id="total-amount" class="order-line">
                  <span class="is-total">Total</span>
                  <span class="is-total">201.92</span>
                </div>
                <div class="button-wrap">
                  <button
                    id="checkout-button"
                    class="button is-solid primary-button raised is-fullwidth"
                    data-step="2"
                  >
                    Continue
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>