← All work

Case Study

Bayelon: a leather goods catalog that fits every device

Bayelon makes handcrafted leather cases that develop a patina over time, sold across a sprawling matrix of iPhone, Samsung, and Pixel models plus watch bands, AirPods cases, and EDC bags.

Shopify Liquid Catalog UX Variant Management Core Web Vitals
https://bayelon.com
Bayelon storefront, desktop view

The brief

Bayelon's range is enormous: every iPhone series from 11 to 17, Samsung Galaxy S21 to S25, Z Fold and Flip, and Google Pixel, each in case styles like Flip Cover Wallet, Crossbody, and Detachable Wallet, across leather colors such as Vintage Brown, Rustic Tan, and Smoked Black. Helping a shopper land on the one case that fits their exact phone, without drowning in a 77-product wall, was the core challenge.

  • Device-by-style-by-color combinatorics across iPhone, Samsung, and Pixel that explode into hundreds of variant permutations
  • A single brand spanning phone cases, watch bands, AirPods, AirTag holders, wallets, and full leather bags under one roof
  • Communicating a craft story (real leather, patina aging, no two cases alike) that justifies premium pricing against cheap silicone cases

What I built

Gencer built a custom Shopify theme that organizes the catalog into lifestyle hubs (Phone, Watch, Audio, EDC, Workspace, Style) so the device matrix stays navigable. Mega-menu drilldowns route shoppers straight to their exact model series, color swatches and Quick Add surface variants without a page reload, and the craft narrative (patina, precision fit, slim protection) is woven through templated sections that scale across every product.

  • Lifestyle-grouped mega menu with model-series drilldowns (iPhone 17 down to 11, Galaxy S25 down to S21, Pixel) so the right case is two clicks away
  • Liquid variant pickers with named leather color swatches (Vintage Brown, Rustic Tan, Burgundy, Smoked Black) and inline Quick Add
  • Reusable section blocks for the 'Why Choose Bayelon' craft story, sale badges, and compare-at pricing reused across the whole catalog
  • Performance-minded build keeping the long Best Sellers carousel and large leather imagery fast on mobile

FAQ

How does the theme handle so many phone models without becoming a maze?

The catalog is grouped into lifestyle hubs (Phone, Watch, Audio, EDC, Workspace, Style) with a mega menu that drills down by model series, so a Galaxy S24 owner reaches matching cases in two clicks instead of scrolling a flat product wall.

Are the leather color options handled as Shopify variants?

Yes. Each case uses Liquid variant pickers with named swatches like Vintage Brown, Rustic Tan, and Smoked Black, paired with inline Quick Add so shoppers choose a color and bag the right SKU without leaving the listing.

How does the build support the premium, handcrafted positioning?

Reusable theme sections carry the craft narrative (genuine leather, unique patina, precision fit, slim protection) consistently across every product, alongside review counts and compare-at sale pricing that reinforce value over cheap silicone cases.

Built with ShopifyLiquidJavaScript (ES6+)Storefront APICore Web Vitals