Adding custom order filter to new customer account order page

Technical Q&A
1

Hi,

Is there a way to add custom order filter to new customer account order page, currently the order filter is by date only, and I wanted by order status too.

Thanks in advance.

2

Hey! The built-in filter only does dates, you can’t change that. But there’s a workaround!

You can add a custom status filter using a UI Extension it sits next to the existing filter and lets customers filter by Fulfilled, Pending, Cancelled, etc. Needs a bit of dev work though.

If you’d rather skip the coding, apps like flits or Customer Accounts Concierge do this out of the box. I’d try those first honestly, much easier!

Hope it helps :raising_hands:

3

Thank you, do you have any apps to recommend, did try to look for some apps but no luck.

4

I’d suggest flits, custlo, Customer Accounts Concierge

Try any of these.

5

The new customer accounts (the one with passwordless login) does not support custom filters on the order list. Date is the only native sort/filter option, and there is no way to add status filtering through theme settings or Liquid code. This is a documented limitation of the new system.

Per the Shopify Help Center’s upgrade guide: “There are no filters available for the new version of customer accounts.” That is a direct quote from the page covering what you lose when migrating from legacy accounts.

Your options:

Option 1 - Stay on legacy accounts (quickest fix, real trade-off) Legacy accounts do support a more featured order history layout and URL-based filtering. The cost is losing passwordless login, the newer UI, and B2B features. If status filtering matters more than those things, this is a valid choice right now.

Option 2 - Custom UI extension (requires a developer) Shopify does expose an order-index.block.render target, which lets an app inject a content block on the order index page. A developer could build a customer account UI extension that fetches the customer’s orders via the Customer Account API - which does return fulfillmentStatus per order - and renders a custom-filtered list inside that block. It would sit alongside or above the native order list. This is not trivial to build, but it is the only supported path to status filtering on the new accounts.

There is currently an open feature request on the Shopify Developer Community forum asking Shopify to allow customisation of the native order cards. Worth upvoting it if you find it, as it signals demand.

Option 3 - App There is no app in the App Store that specifically adds status filtering to the new customer accounts order page. Apps like W3 Custom Order Status work on the order status page itself (individual order view), not the order list. I could not find an app that directly solves your exact request.

If you are on the new accounts and need this now without custom development, switching to legacy accounts is the only realistic workaround.

6

That’s not supported in the new customer accounts at the moment. Shopify currently only provides the built-in date filter for the orders list. If you need filtering by status, the alternative would be a custom account built with the Storefront API or waiting for Shopify to add more flexibility in customer account customization.

7

Hi @hobbyzoneuk ,
Add Filter with JavaScript

1. Edit your account.liquid template (or the section handling orders)

Add a filter dropdown/buttons above the orders list:

<div class="account-orders-filter">
  <label for="order-status-filter">Filter by status:</label>
  <select id="order-status-filter">
    <option value="">All Orders</option>
    <option value="fulfilled">Fulfilled</option>
    <option value="pending">Pending</option>
    <option value="cancelled">Cancelled</option>
  </select>
</div>

<div id="orders-list">
  {% for order in customer.orders %}
    <div class="order-card" data-status="{{ order.fulfillment_status | downcase }}">
      <!-- Your existing order display code -->
      <p>Order #{{ order.order_number }} - Status: {{ order.fulfillment_status }}</p>
    </div>
  {% endfor %}
</div>

2. Add JavaScript to filter orders:

document.getElementById('order-status-filter').addEventListener('change', function() {
  const selectedStatus = this.value.toLowerCase();
  const orders = document.querySelectorAll('.order-card');
  
  orders.forEach(order => {
    if (selectedStatus === '' || order.dataset.status === selectedStatus) {
      order.style.display = 'block';
    } else {
      order.style.display = 'none';
    }
  });
});