The problem
The client's website had plenty of traffic and plenty of products, but the two didn't meet. The navigation was a plain dropdown list, several "browse by color" collections pointed at the wrong products, and there was no way to answer the question every customer actually has: "do you have this color in this finish?" Shoppers either dug through hundreds of listings or called the shop and asked.
What we built
A custom mega-menu for their Shopify store, built into the theme so there are no app fees:
- A visual color picker in the menu itself. Customers pick a finish (gloss, satin, matte, metallic, and so on) and see 14 color swatches. One click lands on exactly those products.
- Combinations that don't exist show as unavailable instead of leading to an empty page. The menu reads live catalog data, so when new colors get published it updates itself. Nobody has to touch code.
- Editable promo cards in every dropdown. The owner can change the featured image, headline, and link from the theme editor, the same way they'd edit any page.
- A mobile menu that works like the desktop one, including the color picker, since most of their traffic is on phones.
Before launch we audited every link in the navigation: 129 links across 52 destinations, all verified working, several broken collections retagged and fixed.
Results
- Live on the client's storefront, replacing the old navigation with zero downtime.
- Customers can get from the homepage to "matte black film I can buy" in two clicks.
- The catalog's structure (finishes, colors, availability) is now data the site maintains itself, not a menu someone has to hand-edit.