SubscriptionsCollectionBackorderShopify Flow

Removing friction from every repeat-purchase touchpoint

A premier family-owned supplement distributor had strong repeat-purchase potential blocked at every retention touchpoint — a clunky subscription widget, a massive catalogue that was hard to filter, and account pages with layout and functionality problems. Oversold orders were also tracked by hand. We fixed all three touchpoints and built a native backorder engine to replace the manual work.

Supplement First Client
DTC Supplements Industry
Shopify Platform
Recharge subscription Scope
Supplement First storefront and PDP with subscription widget
About the client

Supplement First — family-owned, professional-grade nutrition

Supplement First is a premier, family-owned e-commerce distributor of professional-grade vitamins and health supplements. Their catalogue spans hundreds of SKUs across dozens of brands.

Their customer base has strong repeat-purchase behaviour — exactly the profile that benefits most from a smooth subscription experience. But recurring purchases were harder than they should be, the catalogue was difficult to navigate, and customer account pages had layout and functionality issues driving users to support for things they should handle themselves. On top of that, a fast-moving catalogue meant items regularly sold past available stock, and those oversold orders were tracked and released by hand.

Project at a glance
Client Supplement First
Industry DTC / Professional Supplements
Platform Shopify
Scope Recharge Subscription
Outcome Smoother repeat purchase flow
The challenge

Strong repeat-purchase potential, blocked at every touchpoint

Supplement First had the right product range and a loyal customer base. A set of friction points — across subscribing, browsing, account management, and backorder handling — were getting in the way of repeat purchases.

01

Subscription widget clunky and unclear

The product-page subscription widget didn't communicate the value of subscribing clearly, and the subscribe vs one-time choice wasn't presented in a compelling way.

02

Massive catalogue hard to browse

A very large product catalogue made default collection filtering slow and unwieldy — shoppers struggled to narrow down to what they were looking for.

03

Account pages broken and frustrating

Customer account pages had layout and functionality problems that drove subscribers to contact support for things they should be able to handle themselves.

04

Oversold orders managed by hand

With a large, fast-moving catalogue, items regularly sold past available stock. Tracking which orders were waiting on which restocked variant — and releasing them in the right order — meant manual work or a paid backorder app.

Collection filter architecture for large supplement catalogue
The constraint

A large catalogue makes default filtering unworkable

A very large product catalogue makes default collection filtering slow and unwieldy for shoppers trying to narrow down. The standard Shopify filter UI doesn't perform well under the weight of hundreds of SKUs and dozens of filter dimensions.

  • Default Shopify collection filters struggle with large catalogues and many filter combinations.
  • Account page issues had accumulated across multiple customisations without a clean resolution.
  • The subscription widget design couldn't be changed without touching the Recharge integration directly.
  • Shopify has no native way to queue oversold orders and release them in sequence when stock returns — usually handled by a paid backorder app.

The approach: restructure filtering for performance with a large catalogue, customise the subscription widget within the Recharge integration, fix account page issues root by root, and build backorder handling natively with Shopify Flow instead of a paid app.

Our solution

Subscribe widget, filters, account pages, and a native backorder engine

UpSolite customised and optimised the product-page subscription widget for recurring purchases, restructured collection filters to streamline browsing across the large catalogue, fixed critical layout and functionality issues in customer account pages, and built a native backorder/restock engine on Shopify Flow to replace the manual handling of oversold orders.

  • Subscription widget redesigned on the PDP — clearer one-time vs subscribe comparison, stronger value proposition for recurring orders.
  • Collection filters restructured to handle the large catalogue efficiently — fast, navigable, mobile-friendly.
  • Customer account page issues diagnosed and resolved — reliable subscription management, order history, and address book.
  • Native backorder/restock automation built with Shopify Flow — orders tagged at creation, then released oldest-first when stock returns, with no paid backorder app.
Redesigned subscription widget on the Supplement First PDP
What we delivered

Three retention upgrades, plus a native backorder engine

01
Product-page subscription widgetRecharge

Customised and optimised the Recharge subscription widget on the PDP — clearer one-time vs subscribe presentation, stronger savings callout, and a better recurring purchase proposition.

Subscription widgetRechargePDPSubscribe UX
02
Collection filter restructureBrowse UX

Restructured collection filters to streamline browsing across a very large catalogue — fast faceted filtering, mobile-friendly, and navigable even across hundreds of SKUs.

Collection filtersLarge catalogueMobile-friendlyFast browse
03
Account page fixesSelf-service

Diagnosed and resolved critical layout and functionality issues in customer account pages — reliable subscription management, clean order history, and address book — so customers can self-serve common tasks.

Account pagesSubscription managementOrder historySelf-service
04
Native backorder & restock engineShopify Flow

A native backorder and restock engine built with two Shopify Flow automations — no paid backorder app. When an order contains oversold items, it's tagged at creation with per-variant backorder detail (otherwise tagged ready-to-ship). When stock is replenished, a second flow releases waiting orders oldest-first (FIFO), prioritises subscription orders when stock is limited, and automatically flips an order to ready-to-ship once all its backordered items are back in stock.

Shopify FlowRun CodeFIFO releaseSubscriptions prioritised
Results

Subscribe smoother, browse faster, manage without support

Primary outcomeSmootherRecurring purchase flow across all three retention touchpointsSubscribe widget, filter system, and account pages improved — plus a native backorder engine — in a single engagement
Clearer Subscribe vs one-time comparison on the PDP
Faster Catalogue navigation with restructured filters
Reliable Account pages — customers can self-serve
Auto Backorders released oldest-first when stock returns, no paid app
Before
Subscription widget Clunky, unclear value prop
Collection filtering Slow on large catalogue
Account pages Layout and functionality issues
Backorder handling Manual tracking / paid app
Support contact Account issues driving support
After
Subscription widget Clear subscribe vs one-time
Collection filtering Fast, restructured filters
Account pages Reliable self-service
Backorder handling Native Shopify Flow, FIFO
Support contact Customers self-serve common tasks
The work

Screenshots from the delivered improvements

Redesigned subscribe widget on PDP
Subscribe widgetClear one-time vs subscribe, savings front and centre
Restructured collection filters
Collection filtersFast, search-within, restructured for 847 SKUs
Fixed customer account page
Account pagesReliable self-service — no support needed
Shopify Flow backorder automation
Backorder engineNative Shopify Flow, FIFO, no paid app
Supplement First full storefront overview
Full storefrontEvery repeat-purchase touchpoint improved
Our tech stack

Recharge, Liquid, Shopify Flow, and the collection filter API

Subscription widget built within the Recharge integration, collection filters using Shopify's native filter API for performance, account page fixes in Liquid and JavaScript, and a native backorder/restock engine built with Shopify Flow and Run Code.

Shopify Liquid
Recharge Integration
Shopify Collection Filters API
Shopify Flow + Run Code
JavaScript
Customer Account API
Approach & timeline

Three retention touchpoints and a backorder engine, one focused engagement

Scoped around the three highest-friction touchpoints for repeat buyers — the subscription widget on the PDP, the collection filter system for catalogue navigation, and the account page for self-service subscription management — plus a native backorder/restock automation built on Shopify Flow to replace manual oversold-order handling. Each delivered in a single engagement.

Common questions

What a retention-focused build actually involves

Questions we often hear before a subscription UX, collection filter, or fulfilment automation build.

Yes. We work within the Recharge API and theme integration — customising the display and UX without touching the underlying subscription logic that handles billing and renewals.
We restructure the filter configuration and use Shopify's native filter API for server-side filtering — much faster than client-side approaches and scalable to large SKU counts.
Yes. We build it with Shopify Flow and custom Run Code — oversold items are tagged at order creation, and when stock returns the orders are released oldest-first, with subscription orders prioritised when stock is limited. No recurring app fee.
Layout bugs, subscription management that doesn't work on mobile, order history that won't load for large accounts, and address book issues — all diagnosed and fixed at the root cause.
Depends on the complexity of each piece, but a build like Supplement First's is typically four to eight weeks depending on catalogue size and integration complexity.
Retention built properly

Losing repeat buyers to friction you can fix?

Whether it's a subscription widget, collection filters, account pages, or backorder handling — let's remove the friction that's getting in the way of repeat purchases.

See how we approach custom app development →