Orders template

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 to customize the individual order page customers open from this overview. Common tags are documented on Common tags: {% 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.
`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:

{% 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:

{% 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.

Get Started

Get Started on Shopify

Continue your project setup

Customer Portal v2

Self Service Center v1

Manage

Reporting & Metrics

Configure

Billing and Account

Explained

Troubleshooting

Enterprise

Page context

Build an order listing

Link an order to its invoice

​Page context

​Build an order listing

​Link an order to its invoice

Page context

Build an order listing

Link an order to its invoice