Greyson Clothiers, recognized for sophisticated apparel that merges athletic performance with elevated style, aimed to empower customers through a fully personalized shopping experience. Seeking a premium solution to let users design their own custom hats, Greyson needed a seamless product-builder capable of complex bundling and real-time customization. Myntr led end-to-end UX strategy and full-stack Shopify development, delivering an elegant, multi-step JS component integrated via metaobjects and custom JSON bundling logic.
PROJECT TYPE: Custom product builder with bundled SKUs
TIMEFRAME: June 1, 2025
TECH STACK: Shopify 2.0, Metaobjects, JS components, custom JSON bundling
SERVICES: UX strategy, full-stack Shopify development, component architecture
TEAM: Led end-to-end by Myntr in partnership with Greyson’s ecommerce and brand teams
In just over one month post-launch, the “Create Your Own Hat” experience became one of Greyson’s most impactful product initiatives to date:
- Outperformed the next best-selling product by over 40%, becoming a top-selling item on-site during its first month
- Delivered an average order value nearly 20% higher than comparable product categories, without promotional discounts
- Exceeded PDP benchmarks by 38% and cut bounce rate by more than 50%
- Outpaced legacy PDPs in engagement time, interaction rate, and overall performance
- Validated personalization as a high-performing revenue driver and unlocked a scalable framework for future builder-style experiences
Greyson wanted to give customers the ability to build their own fully customized hat, combining base cap styles with embroidered patches, all within a smooth, premium user experience.
But the standard Shopify product structure wasn’t built to support complex bundling logic or real-time customization. They needed:
- A multi-step builder that felt elegant, not clunky
- Support for hat + patch bundling with distinct product SKUs
- Cart-level logic that preserved product-level visibility and analytics
- Compatibility with Shopify’s 2.0 theme structure and admin tooling
We architected a fully custom solution using segmentable metaobjects, a multi-step JS component, and a JSON-based bundling structure that allowed hats and patches to be sold together without merging into a single untrackable variant.
KEY FEATURES INCLUDED:
- Segmented & nested metaobjects to manage hats, patches, image galleries, and configuration logic
- A multi-step product form built in native JS, styled to match the Greyson experience
- Custom cart transformation logic to merge selections into a Shopify-native order while preserving SKU-level data
- An intuitive admin editing experience for marketing and merchandising teams to manage hat styles, patch availability, and upsells
We delivered the full end-to-end product configurator as a reusable Shopify-native build.
WHAT WE DELIVERED:
- Metaobject-powered configuration system for hats and patches
- Multi-step JS component embedded within the PDP
- JSON bundling and cart merge logic for accurate tracking and fulfillment
- Shadow DOM implementation for safe component rendering
- Shopify theme and Liquid file updates across config, layout, snippets, and templates
- Intuitive merchandising control from Shopify admin
