Challenges
Noise’s existing Shopify Liquid storefront had grown more difficult to maintain as new functionality was added. Accumulated code increased the size and complexity of the frontend, contributing to slower responses and making it harder for the development team to introduce improvements without affecting existing journeys.
The requirement went beyond improving individual pages. Noise needed a storefront that could support richer product discovery, faster customer registration, interactive promotions and additional cart functionality. These capabilities had to work together without making browsing and purchasing more complicated for customers.
The main requirements included:
- OTP-based customer registration
- Product, collection, filtering and search experiences
- Gaana Plus and Fit Pass options within the cart
- A structured product-complaint flow
- Affiliate registration and referral functionality
- Video-based shopping through Quinn
- Noise gift cards and promotional spin-wheel functionality
- A pull-up cart with discount-code support
The project therefore required both a frontend rebuild and the careful integration of multiple customer-facing workflows with the existing Shopify commerce system.
Solution
Lucent Innovation began by reviewing the existing Shopify Liquid implementation, its accumulated frontend code and the customer journeys that needed to be retained. This helped the team separate the essential commerce functionality from the parts of the storefront that required rebuilding.
The customer-facing experience was then developed using ReactJS, while Shopify continued to manage the underlying commerce operations. This approach gave the team greater control over storefront interactions without replacing the platform responsible for products, carts and other ecommerce processes.
JavaScript and SCSS were used to create a more organised frontend structure across desktop and mobile experiences.
Product pages, collection pages, filters and search were rebuilt to create a more consistent discovery journey. Customers could move between product categories, narrow their options and review relevant items through storefront components developed for the new ReactJS experience.
The cart journey was also expanded. A pull-up cart allowed customers to view and adjust selected products without leaving the page they were browsing. Discount-code functionality was incorporated into the cart, alongside options related to Gaana Plus and Fit Pass.
Lucent introduced OTP-based registration to simplify account creation and verification. A separate complaint-registration flow gave customers a structured way to submit product-related issues through the website rather than relying on an unorganised support journey.
Several engagement and promotional capabilities were incorporated into the storefront. Quinn enabled customers to discover products through video content and add items to their cart from that experience. Gift cards, affiliate functionality and a promotional spin wheel supported additional ways for customers and partners to interact with the brand.
The implementation brought these separate requirements into one connected storefront experience. Lucent’s broader Shopify development services support similar projects involving custom storefront development, integrations and improvements to existing Shopify stores.
Before launch, the team checked the main browsing, registration, search, cart and customer-support journeys. This validation focused on ensuring that the ReactJS frontend and connected Shopify functions worked together across the intended customer experience.
