Shopify Customer Accounts: Adding Order Status Filters (New vs. Legacy)

Hey store owners! I recently dove into a really interesting discussion on the Shopify community forums that touched on a common pain point: adding custom filters to the customer order history page. Specifically, a store owner, @hobbyzoneuk, was asking about adding an order status filter to the new customer account order page, since it only offers a date filter by default.

This is a fantastic question because it highlights a crucial distinction in how Shopify is evolving, and it's something many of you might be wondering about. Let's break down what the community had to say and what your options truly are.

The Challenge: Custom Filters on New Customer Accounts

When @hobbyzoneuk first posted, an initial suggestion from @oscprofessional offered a Liquid and JavaScript solution. This approach is quite standard for many theme customizations where you have direct control over the `account.liquid` template or related sections. Here's a peek at what that kind of code looks like:

The Traditional Liquid/JavaScript Approach (For Legacy Accounts or Custom Setups)

If you were working with a legacy customer account setup or a completely custom customer portal, this method would be a solid starting point. It involves adding a dropdown filter and then using JavaScript to toggle the visibility of order cards based on their `data-status` attribute.

  Filter by status:
  
    All Orders
    Fulfilled
    Pending
    Cancelled
  



  {% for order in customer.orders %}
    

      
      
Order #{{ order.order_number }} - Status: {{ order.fulfillment_status }}
    
  {% endfor %}

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';
    }
  });
});

The "Gotcha": New Customer Accounts Are Different!

Here's where the community discussion got really insightful. As @HackneyDigitalUK and @kaspianfuad quickly clarified, the straightforward Liquid/JavaScript method is not supported in the new customer accounts. This is a critical point that many store owners might miss!

@kaspianfuad even shared a direct quote from the Shopify Help Center's upgrade guide: “There are no filters available for the new version of customer accounts.” Ouch. That means the passwordless login, modern UI, and B2B features of the new accounts come with a trade-off in direct Liquid customization for things like order filtering.

Your Options for Adding Order Filters

So, if you're on the new customer accounts and need status filtering, what are your choices? The community outlined a few distinct paths:

Option 1: Stick with Legacy Customer Accounts (The Trade-Off)

If having granular control over your customer order history — including custom filters and more featured layouts — is absolutely crucial, and you're not yet deeply invested in the new customer account features, you can choose to stay on legacy accounts. This is the quickest fix if you need this functionality right now.

• Pros: Full Liquid control, allowing you to implement solutions like the JavaScript filter shown above.
• Cons: You'll miss out on passwordless login, the newer, cleaner UI, and Shopify's evolving B2B features. It's a real trade-off you need to consider for your business.

Option 2: Embrace New Accounts with Advanced Solutions (The Future-Proof Path)

If you've migrated to the new customer accounts or plan to, and you still want custom filtering, you'll need to look at more modern Shopify development pathways.

Sub-Option A: Custom UI Extensions (Developer Required)

@kaspianfuad and @vicky32 both pointed to Shopify UI Extensions as the supported path. This is a powerful, albeit developer-intensive, solution:

1. Shopify provides an `order-index.block.render` target. This is essentially a designated spot where an app (built as a UI Extension) can inject its own content block onto the customer order index page.
2. A developer would build a UI Extension that fetches the customer's orders using the Customer Account API. Crucially, this API does return the `fulfillmentStatus` for each order.
3. The extension would then render a custom-filtered list or a filtering interface within that injected block, sitting alongside or above the native order list.

This isn't a simple theme tweak; it requires app development expertise. But it's the officially supported way to extend functionality within the new customer account experience.

Sub-Option B: Explore Third-Party Apps

For those who'd rather skip the custom development, apps are often the answer! @vicky32 recommended checking out apps like Flits, Custlo, and Customer Accounts Concierge. While @kaspianfuad noted that a specific app for *just* status filtering on the order list might be hard to find, these apps specialize in enhancing the overall customer account experience. It's definitely worth exploring if they offer the kind of advanced order management and filtering you're looking for — they often bundle features that go beyond what Shopify offers natively.

A Call to Action for the Community

Finally, @kaspianfuad mentioned that there's an open feature request on the Shopify Developer Community forum asking Shopify to allow more customization of the native order cards. If this is a feature you really want, go find that request and upvote it! It's how we signal demand to Shopify and help shape the platform's future.

So, there you have it. The ability to add custom order filters, especially by status, to your customer accounts isn't as straightforward as it once was, particularly with the new passwordless customer accounts. While the old Liquid/JavaScript methods were great for legacy accounts, the new system pushes us towards UI Extensions or comprehensive third-party apps. It's all about weighing the benefits of the modern customer experience against your need for deep customization. Keep an eye on those feature requests — your voice helps Shopify evolve!