Interactive rod configurator
Anglers build a rod from components on the product page instead of sending a blank enquiry.
Case study · Shopify Plus
A custom rod builder on Shopify Plus for HFF Custom Rods
Shopify Plus store for HFF Custom Rods: an interactive rod builder, specification filters, and a booking path for expert advice. Delivered in three months in 2024.
Tech stack
- Shopify Plus
- Liquid
- JavaScript
- CSS3
- App Development
- Klaviyo
- POS
- React
- Node.js
- Remix
01 — The challenge
What did the client need?
HFF sells custom fishing rods to amateur and professional anglers. A normal product grid cannot express blanks, guides, and components, and the technical detail anglers need was not searchable. Serious buyers left the site to ask a person what they could actually order.
02 — The solution
What did we build?
We built a Shopify Plus store with an interactive rod configurator, component selection, and a specification database. Filtering separates professional and amateur gear. Video sits on the product, a dealer locator finds a nearby shop, and an expert consultation can be booked from the same storefront. The custom layer is a React, Node, and Remix app on top of Liquid, with Klaviyo and Shopify POS beside it.
03 — Key features
What's inside
Key features
Specification filters
The catalog filters by technical spec, so a pro and a beginner are not looking at the same undifferentiated grid.
Component selection
Each choice is a real component, carried into the order.
Expert booking
A consultation can be booked when the build needs a person, without leaving the store.
Specification database
Technical details live with the product, not in a PDF.
Audience split
Professional and amateur ranges are categorized so the right gear surfaces first.
Video demonstrations
Product video shows the build, not only a still photograph.
Dealer locator
Shoppers can find a dealer as well as buy direct.
04 — Results and impact
What changed after launch
+89%
Custom orders
+45%
Average order value
2.4s
Page load
+78%
User engagement
05 — Architecture
How the pieces connect
- 01Filter the spec
- 02Configure the rod
- 03Book or buy
- 04Order
Tech stack
- Shopify Plus
- Liquid
- JavaScript
- CSS3
- App Development
- Klaviyo
- POS
- React
- Node.js
- Remix