Three-level variant selectors for Nomad's headless Shopify store

Nomad makes phone cases, chargers, watch bands and leather goods, many of them in Horween leather. Its Shopify store ran on Shogun Frontend, a headless front end, with page content managed in Shogun's CMS.

Nomad's catalog was set up with each color as its own Shopify product. A shopper looking at one case had no way to switch colors on the page, and the team couldn't group, name or order those products for the storefront. Nomad wanted control at the variant level: images, names, prices and swatches for each color, on product and collection pages.

DYODE joined as Nomad's development partner, working alongside the Shogun team and then on a monthly development retainer. Rather than restructure the catalog in Shopify, we built a merchandising layer in the CMS on top of it.

A Merchandising Group ties separate color products together. Each product carries its group, a swatch color and a swatch name, and the product page reads them to draw one color selector. We wrote the setup steps up in Confluence so Nomad's team could build and edit groups themselves.

Phone cases added another layer. One case could come in several iPhone sizes, as a case or a folio, and in several colors. DYODE extended the system to a third variant level, so a shopper picks model, style and color on one product page, and the collection pages follow the same structure.

The release went live after a planned code freeze on the store.

• A custom product name field in the CMS that overrides the Shopify title on product pages, collection pages and carousels
• A CMS price field, plus fixes to how variant prices show on product and collection pages
• Split color swatches
• A switch to turn merchandising groups on or off
• A new header component
• A Klaviyo unsubscribe flow
• Accessibility fixes on the product page, including color options screen readers can announce and keyboard access to the product accordions

Nomad's shoppers could choose a case by phone model, style and color on one product page instead of moving between separate listings.

Nomad's team got control of how each color is grouped, named, priced and shown, set in the CMS rather than in code.