Product Compatibility - When it MATTERS

Shopify Plus
1

Recently I built a couple new features on our site that I was hoping I could get your feedback on. In our industry (fly fishing) a complete outfit includes a rod, reel, and line which are defined by a specific unifying class called “wt” defined in each of those product types.

A “5wt” rod should match to a reel and line, and vice verse in the “5wt” class. The build out took a couple months to finish, but it offers a unique method for similar types of builds where that compatibility is derived and needed. Cameras, bikes, skis, hunting, and a variety of other products could also be used along these product types as well.

  1. Outfit Builder: Stillwater Fly Shop Outfit Builder
    I built this out and based it on single-hand rods based on price banding (Budget, Value, Premium), where you can swap out components depending on the brand or price you can afford.

  2. Product Page Compatibility: https://www.stillwaterflyshop.com/products/lamson-liquid-s-fly-reel
    The product pages for reels, lines, and rods all have a unique feature called “Compatibility” whereas you can either click the “Compatibility” button or scroll down to the tab and see compatible products for the line weight. You can also swap out the lists by brand as well.

The pages themselves have been up for a short while, but I wanted to get feedback (good or bad) on them from the perspecitve of users/developers who may find it beneficial. The “secret sauce” behind it is a bunch of logic, governance, contracts, runtime layers, analytics and of course theme modifications. All in all it is pretty lightweight considering the variant and product depth.

It may be a bit overbuilt with all the documentation, etc. for a “fly shop” but I found it an excellent challenge and am pleased with the outcome. Specifically, the PDP pages have generated a 3x AOV and continue to help our customers make better and more informed decisions.

Thanks in advance for checking out the pages.

2

For the Stillwater Fly Shop Outfit Builder, I select the options, and there are 3 options showing up. Why are the 2 options in grey? Are they sold out? When I select the filter on top, the empty state may be better replaced by a loading state.

The page has too many options to select. Customers can select from 3 options (budget, value, premium) and change the product to others. May be overwhelming.

And there are too many CTA buttons for the Lamson Liquid S Fly Reel. I don’t know which is the correct button when there are 5 in the same location.

Currently, I’m working on a new guided bundle feature that helps customers reduce selection complexity and support better compatibility.

Here’s a sample bundle for a PC Builder: Guided Bundle - PC Builder (Top Banner) – BYOB Store

I hope we can serve similar industries like ebike, camera, furniture, PC, or other complex products. Looks like we have a similar thought.

FireShot Webpage Capture 864 - 'Stillwater Fly Shop Outfit Builder' - www.stillwaterflyshop.com
FireShot Webpage Capture 864 - 'Stillwater Fly Shop Outfit Builder' - www.stillwaterflyshop.com3024×1927 417 KB

FireShot Webpage Capture 865 - 'Lamson Liquid S Fly Reel – Stillwater Fly Shop' - www.stillwaterflyshop.com
FireShot Webpage Capture 865 - 'Lamson Liquid S Fly Reel – Stillwater Fly Shop' - www.stillwaterflyshop.com1920×1223 278 KB

3

@jam_chan thank you for your time.

To address your points:

  • The three optiohs are broken down by price band, hence the “Budget”, “Value”, “Premium” as tiers.
  • The two options that are “grey” are not purchasable because you have not selected the “retrieve hand”. Once that is selected the buy button is visible as shown by your screenshot.
  • As for the PDP with the various CTA, your preference is noted.
  • Your interface for building appears to be a good build. A bit different than what I have constructed and simple as to the structure which is nice.

I think both of our use cases have a place for sure.