<style>
  .shopify .shopify-info-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E3E4E6;
    min-height: 38px;
  }

  .shopify .shopify-info-item:last-child {
    border-bottom: none;
  }

  .shopify .shopify-info-item .item-label {
    margin-top: 10px;
    color: #9D9D9D;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 600;
  }

  .shopify .shopify-info-item .item-value-shopify {
    background: transparent;
    color: #5A5A5A;
    border-bottom: none;
    text-align: right;
    margin-top: 7px;
  }

  .shopify .shopify-info-item:last-child {
    border-bottom: none;
  }

  .shopify .item-label-shopify {
    font-size: 14px;
    color: #808080;
    opacity: .7;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .shopify .custom-div {
    padding-top: 0 !important;
  }

  .shopify .order-meta {
    margin: 0;
    cursor: pointer;
  }

  .shopify .order-label {
    margin: 0;
  }

  .shopify .order-meta .s-icon.i-service-shopify {
    background: #C7E6A5;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 10px;
    float: left;
  }

  .shopify .order-meta .s-icon:before {
    vertical-align: -16px;
    margin-left: 3px;
  }

  .shopify .order-meta .media-heading {
    color: #5A5A5A;
    background-color: #E3E4E6;
    font-size: 12px;
    font-weight: 600;
    width: 345px;
    display: flex;
    justify-content: space-between;
    border-radius: 6px 6px 0px 0px;
    padding: 9px 10px 0px 10px;
    box-sizing: border-box;
    margin-bottom: 0;
    height: 30px;
  }

  .shopify .tab {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    overflow: hidden;
    display: flex;
  }

  .shopify .tab .label {
    text-transform: none;
  }

  .shopify .tab-side {
    width: 2px;
    background: #C7E6A5;
    height: inherit;
    border-radius: 1px;
    margin-left: 13px;
    margin-right: 15px;
    display: block;
    float: left;
    min-height: 30px;
  }

  .shopify .tab-content {
    max-height: 0;
    overflow: hidden;
    padding: 0px 10px 0px 10px;
    border: 1px solid #E3E4E6;
    border-radius: 0px 0px 6px 6px;
  }

  .shopify .tab-content-holder {
    display: block;
    width: 100%;
  }

  .shopify input::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    transition: all .35s;
  }

  .shopify input.hidden[type=checkbox]:checked~.tab-content {
    max-height: 999em;
    padding-top: 10px;
    padding-bottom: 5px;
  }

  .shopify input.hidden[type=checkbox]:checked~.order-label .order-meta .media-heading {
    border-radius: 6px 6px 0px 0px !important;
    background-color: red !important;
  }

  .shopify .card-table-holder {
    border: none !important;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .shopify .order-table {
    margin-bottom: 0;
    overflow: hidden;
    width: 100%;
  }

  .shopify .order-table tr th,
  .shopify .order-table tr td {
    background-color: #F4F4F4;
    padding: 0 4px;
    line-height: 1.42857143;
    vertical-align: top;
  }

  .shopify .order-table th{
    height: 32px;
  }

  .shopify .order-table tr th {
    font-size: 14px;
    color: #808080;
    font-weight: 400;
    opacity: .7;
    padding: 5px;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    border-top: 0px!important;
  }

  .shopify .order-table tr td {
    color: #717171;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    padding: 5px;
  }

  .shopify .order-table tr:last-child td {
    border-bottom: 0;
  }

  .shopify a {
    padding: 4px;
  }

  .shopify p {
    margin: 0;
  }

  .shopify .tab label {
    display: block;
  }

  .shopify table {
    background-color: transparent;
    max-width: 100%;
  }
  .shopify table > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
  }
</style>
<div class="shopify">
  <div class="shopify-card">
    {% if customer.first_name != nil %}
    <div class="shopify-info-item">
      <h6 class="item-label">Customer</h6>
      <p class="item-value-shopify">{{ customer.first_name }} {{customer.last_name}}</p>
    </div>
    {% endif %}
    {% if customer.email != nil %}
    <div class="shopify-info-item">
      <h6 class="item-label">Customer email</h6>
      <p class="item-value-shopify">{{ customer.email }}</p>
    </div>
    {% endif %}
  </div>

  {% if orders.size > 0 %}

  {% for order in orders %}
  {% if forloop.index0 < 3 %}
  <div class="tab">
    <div class="tab-content-holder">
      <label for="order_{{ order.order_number }}" class="order-label">
        <div class="order-meta">
          <h5 class="media-heading">
            Order #{{ order.order_number }}
            <span class="media-date">{{ order.created_at | date: "%a, %b %d, %y" }}</span>
          </h5>
        </div>
      </label> {% if forloop.first == true %}
      <input type="checkbox" name="" class="hidden" id="order_{{ order.order_number }}" checked> {% else %}
      <input type="checkbox" name="" class="hidden" id="order_{{ order.order_number }}"> {% endif %}
      <div class="tab-content">
        <div class="shopify-info-item">
          <h6 class="item-label">Shipping address</h6>
          <p class="item-value-shopify">
            {% if order.shipping_address.name != nil %} {{ order.shipping_address.name }} <br /> {% endif %} {% if order.shipping_address.address1 != nil %} {{ order.shipping_address.address1 }} <br /> {% endif %} {% if order.shipping_address.zip != nil
            %} {{ order.shipping_address.zip }}, {{ order.shipping_address.city }} <br /> {% endif %} {% if order.shipping_address.phone != nil %} Tel. {{ order.shipping_address.phone }} <br /> {% endif %}
          </p>
        </div>

        <div class="shopify-info-item">
          <h6 class="item-label">Billing address</h6>
          <p class="item-value-shopify">
            {% if order.billing_address.name != nil %} {{ order.billing_address.name }} <br /> {% endif %} {% if order.billing_address.address1 != nil %} {{ order.billing_address.address1 }} <br /> {% endif %} {% if order.billing_address.zip != nil %} {{
            order.billing_address.zip }}, {{ order.billing_address.city }} <br /> {% endif %} {% if order.billing_address.phone != nil %} Tel. {{ order.billing_address.phone }} <br /> {% endif %}
          </p>
        </div>

        {% if order.closed_at != nil %}
        <div class="shopify-info-item">
          <h6 class="item-label">Status</h6>
          <p class="item-value-shopify">Closed</p>
        </div>
        <div class="shopify-info-item">
          <h6 class="item-label">Closing date</h6>
          <p class="item-value-shopify">{{ order.closed_at | date: "%a, %b %d, %y" }}</p>
        </div>
        {% else %}
        <div class="shopify-info-item">
          <h6 class="item-label">Status</h6>
          <p class="item-value-shopify">Open</p>
        </div>
        {% endif %}

        <div class="shopify-info-item">
          <h6 class="item-label">Order price</h6>
          <p class="item-value-shopify">{{ order.total_price }} ({{order.currency}})</p>
        </div>

        <div class="card-table-holder">
          <table class="order-table">
            <tbody>
              <tr>
                <th>Qty.</th>
                <th>Item</th>
              </tr>
              {% for item in order.line_items %}
              <tr>
                <td>{{ item.quantity }}</td>
                <td>{{ item.title }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}

  {% if orders.size > 3 %}
  <div class="tab">
    <div class="tab-content-holder">
    <label for="readMore">
        <div class="order-meta">
          <h5 class="media-heading">
            <b>View more</b>
          </h5>
        </div>
      </label>
      <input type="checkbox" name="" class="hidden" id="readMore">
      <div class="tab-content">
          {% for order in orders %}
          {% if forloop.index0 > 2 %}
            <div class="tab">
              <div class="tab-content-holder">
                <label for="order_{{ order.order_number }}">
                  <div class="order-meta">
                    <h5 class="media-heading">
                      Order #{{ order.order_number }}
                    </h5>
                  </div>
                </label>
                <input type="checkbox" name="" class="hidden" id="order_{{ order.order_number }}">
                <div class="tab-content">
                  <div class="shopify-info-item">
                    <h6 class="item-label">Shipping address</h6>
                    <p class="item-value-shopify">
                      {% if order.shipping_address.name != nil %} {{ order.shipping_address.name }} <br /> {% endif %} {% if order.shipping_address.address1 != nil %} {{ order.shipping_address.address1 }} <br /> {% endif %} {% if order.shipping_address.zip != nil
                      %} {{ order.shipping_address.zip }}, {{ order.shipping_address.city }} <br /> {% endif %} {% if order.shipping_address.phone != nil %} Tel. {{ order.shipping_address.phone }} <br /> {% endif %}
                    </p>
                  </div>

                  <div class="shopify-info-item">
                    <h6 class="item-label">Billing address</h6>
                    <p class="item-value-shopify">
                      {% if order.billing_address.name != nil %} {{ order.billing_address.name }} <br /> {% endif %} {% if order.billing_address.address1 != nil %} {{ order.billing_address.address1 }} <br /> {% endif %} {% if order.billing_address.zip != nil %} {{
                      order.billing_address.zip }}, {{ order.billing_address.city }} <br /> {% endif %} {% if order.billing_address.phone != nil %} Tel. {{ order.billing_address.phone }} <br /> {% endif %}
                    </p>
                  </div>

                  {% if order.closed_at != nil %}
                  <div class="shopify-info-item">
                    <h6 class="item-label">Status</h6>
                    <p class="item-value-shopify">Closed</p>
                  </div>
                  <div class="shopify-info-item">
                    <h6 class="item-label">Closing date</h6>
                    <p class="item-value-shopify">{{ order.closed_at }}</p>
                  </div>
                  {% else %}
                  <div class="shopify-info-item">
                    <h6 class="item-label">Status</h6>
                    <p class="item-value-shopify">Open</p>
                  </div>
                  {% endif %}

                  <div class="shopify-info-item">
                    <h6 class="item-label">Order price</h6>
                    <p class="item-value-shopify">{{ order.total_price }}</p>
                  </div>

                  <div class="card-table-holder">
                    <table class="order-table">
                      <tbody>
                        <tr>
                          <th>Qty.</th>
                          <th>Item</th>
                        </tr>
                        {% for item in order.line_items %}
                        <tr>
                          <td>{{ item.quantity }}</td>
                          <td>{{ item.title }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
          {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {% else %}
  <div class="shopify-info-item">
    <h6 class="item-label">This customer has no orders in Shopify.</h6>
  </div>
  {% endif %}
</div>