Luah Jewelry
Transitioning a high-volume Shopify store from "functional" to "exceptional" through native feature refactoring, speed optimization, and UX polish.
The Context
Refining a Live Platform
Luah Jewelry had a functional Shopify Plus site, but as the brand scaled, technical debt and "app bloat" began to impact the customer experience. We were brought in alongside digital agency Cogney to provide high-level technical support, speed optimization, and polish.
The mission was not to rebuild, but to perfect: fixing and optimizing existing native solutions, eliminating dependency on third-party apps, and solving specific friction points that generic themes couldn't handle.
Key Challenges
App Dependency & Broken Native Solution
The "Stacking" feature (bundling jewelry) was using both the "Fast Bundle" third-party app and an existing metafield-based solution, but neither worked correctly. Both created friction in the add-to-cart to purchase stage and broke "Abandoned Checkout" and "Added to Cart" email flows. The client needed the metafield solution fixed to support their creative direction.
The "Texture" Dilemma
High-end jewelry requires zoomed-in clarity to show hammered gold and stone textures, but large images were hurting mobile performance scores.
International Friction
Returning visitors were frequently defaulting to the wrong currency (USD) despite being in local markets (HKD), forcing them to manually switch back.
Constraints & Considerations
- High Volume & Risk — As a live, high-sales volume site, all updates required zero downtime and careful regression testing.
- Visual Fidelity vs. Speed — Jewelry requires high-resolution imagery to show textures (e.g., hammered gold, stone details), but mobile load speeds are paramount for conversion.
- Operational Efficiency — Fixed functionality had to work reliably for the operations team, allowing them to manage complex bundles without constant developer intervention.
Approach & Execution
Native "Stacks" Architecture (App Migration)
The Problem: The client was using two methods for bundling: the "Fast Bundle" third-party app and an existing metafield-based solution built by a freelance developer. Neither worked perfectly—both created friction in the add-to-cart to purchase stage, and the bundle structure broke their "Abandoned Checkout" and "Added to Cart" email flows. The client decided to abandon the app and fix the metafield solution, which they needed to support their creative direction of launching 10-15 bundled looks per product category.
The Solution: We fixed and optimized the existing metafield-based bundling system. Resolved bugs with variant selection (dropdown state conflicts when navigating between products), corrected image links to properly route to the correct variant, and improved the overall UX by implementing a "Quick View" approach that prevented users from losing their selection context when exploring stack options. This ensured the bundling functionality worked seamlessly with native checkout and marketing automation flows.
Outcome: Eliminated monthly app fees and restored data integrity for marketing automation, while supporting the brand's "Jewelry Without Limits" styling initiative with a reliable native solution.
"Progressive Zoom" Performance
The Problem: Customers complained that product images were "blurry" when zooming in on details. However, loading 4K images by default would tank the site's Core Web Vitals.
The Solution: Implemented a hybrid loading strategy. Served highly optimized, lightweight WebP images for immediate page rendering. Engineered the zoom interaction to dynamically fetch the high-resolution source file only when the user actively engages with the image.
Outcome: Balanced the luxury need for visual fidelity with the e-commerce need for speed.
Visual Merchandising & Editorializing
The Problem: The standard collection grid was monotonous, causing "scroll fatigue." The brand wanted to inject lifestyle storytelling without breaking the grid layout.
The Solution: Developed a "Visual Content Block" system that allows the team to inject editorial photos (e.g., lifestyle shots) into specific grid slots (every 5-6 products). Updated grid logic to display secondary variants (e.g., Silver) as standalone cards, doubling the visibility of the catalog without cloning products. Moved "bumper text" (SEO headers) to the bottom of the page, ensuring actual products are the first thing users see on mobile.
Internationalization Fixes
The Problem: Returning users were getting "stuck" in the wrong geo-location settings.
The Solution: Refined the session logic to prioritize user history. We ensured that if a user previously visited the Hong Kong site (/en-hk), they would automatically land there on return, preserving their currency preference (HKD) and reducing bounce rates.
Fix Over Build. While third-party Shopify apps offer quick fixes, they often fragment the customer journey (especially in checkout and email automation). Fixing and optimizing existing native implementations using Metafields and Liquid—rather than relying on apps—provides total control over the UX and ensures data integrity across the entire marketing funnel.
Skills & Tools
Platform: Shopify Plus
Languages: Liquid, JavaScript (ES6+), CSS
Focus Areas: Web Performance Optimization (WPO), Third-party App Migration, Technical SEO
Collaboration: Partnered with Cogney for strategy and design direction.