> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Orders template

> Reference for customizing the Customer Portal orders overview with orders.liquid.

`orders.liquid` controls the complete orders overview page. The Firmhouse default template includes the page heading, customer-visible orders, order lines, totals, statuses, links, and empty state. Replace any of its markup to match your storefront.

Use [`order.liquid`](./order-template) to customize the individual order page customers open from this overview.

Common tags are documented on [Common tags](./common): `{% legacy_navbar %}`.

## Page context

The template receives these page-specific variables:

| Variable      | Description                                                                                                                                                      |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orders`      | Customer-visible orders for the current subscription, newest first. Each item is an [order Liquid object](https://developer.firmhouse.com/liquid/objects#order). |
| `page_title`  | Localized orders-page title.                                                                                                                                     |
| `page_byline` | Localized supporting text for the orders page.                                                                                                                   |

Awaiting-confirmation orders are not included because customers cannot open them from the portal.

## Build an order listing

Loop through `orders` to control the complete card, table, or list markup. Each order contains its customer-facing URL and nested order lines:

```liquid theme={null}
{% if orders.size > 0 %}
  {% for order in orders %}
    <article>
      <a href="{{ order.self_service_url | escape }}">
        Order #{{ order.id | escape }} — {{ order.status_translated | escape }}
      </a>
      <p>{{ order.display_date | escape }} · {{ order.amount | escape }}</p>

      {% for order_line in order.order_lines %}
        <p>
          {{ order_line.quantity | escape }} × {{ order_line.product_title | escape }}
          {{ order_line.total_amount_including_tax | escape }}
        </p>
      {% endfor %}
    </article>
  {% endfor %}
{% else %}
  <p>{{ "orders.no_orders" | t | escape }}</p>
{% endif %}
```

Use `order.status` for styling conditions and `order.status_translated` for the customer-facing label. `order.display_date` formats the date the order was created in the customer's locale.

## Link an order to its invoice

Finalized invoices are available through `order.invoice`. The legacy navbar hides the separate invoices overview by default, so you can provide invoice access alongside each order:

```liquid theme={null}
{% if order.invoice %}
  <a href="{{ order.invoice.pay_now_url | escape }}">View invoice</a>
{% endif %}
```

`order.invoice` is empty when the order has no finalized invoice.