TRACK ORDER

<div class="track-order-page">
  <div class="track-order-card">
    <div class="track-order-icon">📦</div>

    <h1>Track Your Order</h1>
    <p class="track-order-subtitle">
      Enter your order number and email address to check your order status.
    </p>

    <form id="trackOrderForm" class="track-order-form">
      <label for="orderNumber">Order Number</label>
      <input
        type="text"
        id="orderNumber"
        name="orderNumber"
        placeholder="Example: 1001"
        required
      >

      <label for="orderEmail">Email Address</label>
      <input
        type="email"
        id="orderEmail"
        name="orderEmail"
        placeholder="you@example.com"
        required
      >

      <button type="submit">
        Track My Order
      </button>

      <p id="trackOrderError" class="track-order-error"></p>
    </form>

    <div class="track-order-help">
      <p>Can't find your order?</p>
      <a href="/pages/contact">Contact us</a>
    </div>
  </div>
</div>

<style>
  .track-order-page {
    max-width: 700px;
    margin: 60px auto;
    padding: 20px;
  }

  .track-order-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  }

  .track-order-icon {
    font-size: 42px;
    margin-bottom: 15px;
  }

  .track-order-card h1 {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: 700;
  }

  .track-order-subtitle {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .track-order-form {
    text-align: left;
  }

  .track-order-form label {
    display: block;
    margin: 18px 0 8px;
    font-weight: 600;
  }

  .track-order-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .track-order-form input:focus {
    outline: none;
    border-color: #111;
  }

  .track-order-form button {
    width: 100%;
    margin-top: 25px;
    padding: 15px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }

  .track-order-form button:hover {
    opacity: 0.85;
  }

  .track-order-error {
    color: #d00;
    text-align: center;
    margin-top: 15px;
  }

  .track-order-help {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #666;
  }

  .track-order-help a {
    color: #111;
    font-weight: 600;
  }

  @media (max-width: 600px) {
    .track-order-page {
      margin: 30px auto;
      padding: 15px;
    }

    .track-order-card {
      padding: 25px 20px;
    }

    .track-order-card h1 {
      font-size: 26px;
    }
  }
</style>

<script>
  document.getElementById("trackOrderForm").addEventListener("submit", function(e) {
    e.preventDefault();

    const orderNumber = document
      .getElementById("orderNumber")
      .value
      .trim();

    const email = document
      .getElementById("orderEmail")
      .value
      .trim();

    const error = document.getElementById("trackOrderError");

    if (!orderNumber || !email) {
      error.textContent = "Please enter your order number and email.";
      return;
    }

    error.textContent = "";

    /*
      Shopify's order status page can be accessed using:
      /account/orders

      For guest orders, Shopify does not provide a simple
      public URL that lets custom JavaScript look up an order
      by email + order number.

      Redirecting to the customer account/order area is the
      safest native Shopify approach.
    */

    window.location.href = "/account";
  });
</script>