The Birth of Flashly: A Visionary Brand for Unique Beauty
After 25 years of shaping the beauty industry and crafting best-selling products, Reed Cromwell IV uncovered a profound truth: our eyes tell potent stories, revealing who we are and aspire to be. They reflect creativity, resilience, and individuality.
This realization inspired Reed to create Flashly—a brand celebrating self-expression with customizable lashes and bold, vibrant makeup. Flashly empowers everyone to showcase their unique beauty. Reed also recognized that beauty is deeply personal, and a one-size-fits-all approach doesn't work. This led to the idea of creating an interactive quiz to help customers find their perfect matches in lashes, color cosmetics, and accessories tailored to their individual styles and preferences.
Flashly invites everyone on a personalized journey to discover products crafted just for them, all available on our website. Reed continues his legacy with this brand by empowering people to shine with products that reflect their individuality, celebrating the unique story behind every pair of eyes.
Challenges
Design: Craft a Shopify Plus store with a pixel-perfect design to create a visually stunning, brand-aligned user experience across all devices.
Dynamic Architecture: Build interconnected micro frontend architecture that can sync updates across all components seamlessly in real-time.
Interactive Quiz: Build a custom quiz to provide personalized product recommendations and increase user engagement and conversion rates.
Custom Bundle Feature: Create a flexible bundling system so customers can curate and purchase products in a more personalized way.
Searching for Shopify Plus Partner Agency
Reed concentrated on the production line, while Fred, a co-founder, oversaw business strategy, digital marketing, and the development of their upcoming online store.
Fred, along with the eCommerce manager, was responsible for the design process, designing an exceptional UX design with a quiz at the heart. To achieve this, they went for a pixel-perfect design approach so the design would be professional, polished, and aligned with the brand identity. This design makes navigation intuitive and visually pleasing, increases conversion rates with clear calls to action, and design consistency across devices, especially mobile. It also increases brand credibility and website speed and gives the Shopify store a competitive edge.
However, they still lacked a reliable software eCommerce development agency with specialized expertise to bring their design to life and launch a custom Shopify store on time. Finding the right partner agency was challenging, as not all agencies could combine pixel-perfect design expertise with the ability to implement complex projects functionalities like the interactive quiz.
After receiving positive recommendations about our Shopify Plus agency, they contacted us. Following an introductory call where we showcased our portfolio and demonstrated our capabilities, we began our partnership.
Shopify Plus, ReactJS with Redux for Dynamic eCommerce Solution
First, we had to plan the website's architecture and tech stack, making sure it worked with Shopify as the ecommerce platform and fit the pixel-perfect design that was already in place, with room for further refinement during development. Given the site's need to manage complex data, we recommended a headless commerce approach. However, Flashly decided against this option, opting to leverage apps from the Shopify ecosystem now and in the future.
We chose Shopify Plus for the plan because it provided the flexibility needed to implement the pixel-perfect design and custom features. With its advanced customization options, including tailored workflows and improved checkout features, Shopify Plus allowed us to create a seamless and functional store.
Shopify uses Liquid, a templating language designed for rendering static content, but it's not suitable for handling dynamic interactions on the front end.
For more complex features like quizzes or cart management, we turned to JavaScript frameworks like React. Shopify and React work seamlessly together—React handles real-time updates and interactive content, while custom Liquid Shopify handles the static elements. Combining Shopify with React allows us to maintain a pixel-perfect design while adding dynamic features.
We used Redux with React to manage complex data and performance in a micro-frontend. This approach enabled us to manage large-scale data effectively while ensuring a smooth, modular user experience.
Using React and Redux in a microfrontend architecture has many benefits for a dynamic eCommerce store. Here's why:
State Management: Redux makes managing the React global state of a Shopify Plus site easier when handling complex data interactions. This way you can access and update the state across multiple components without relying on global frameworks like React.
Performance: Redux with React ensures that data changes are managed efficiently and updated in real time, without affecting the user experience. This minimizes unnecessary re-renders and optimizes performance, which is especially important for stores with complex interactions, like quizzes, inventory updates, and subscription management.
Scalability: Micro frontend frameworks allow for better scalability by breaking down the store into smaller independent sections. Each section can be developed, deployed, and scaled independently so you can add or update features without affecting the whole store.
User Experience: Redux ensures predictable state transitions so user interactions are smooth and seamless. For instance, when a customer adds an item to their cart Redux updates the cart state across all relevant parts of the site including checkout, so the experience is cohesive and enjoyable. Micro frontends give flexibility by allowing different store sections to be updated or redesigned independently so the platform can evolve over time without affecting the user experience.
Integration: The combination of Redux and React with a micro frontend approach facilitates managing the data flow between your Shopify Plus store and custom or third-party APIs. Whether working with custom apps, product recommendations, or external services, Redux ensures that the data is handled predictably and efficiently.
Clean Code: Using React with Redux we separate UI state management from business logic. This means cleaner more maintainable code. With Shopify Plus, where updates and new features are frequent, this separation makes it easier to track changes, debug issues, and improve the site over time.
To keep things consistent, we built three interconnected microfrontends—checkout, bundle, and quiz—that communicate via Redux as a single source of truth for the shopping cart.
The React-based checkout uses Redux to sync updates across all components dynamically. Even non-react elements like "Add to Cart" buttons rely on this global state so everything is smooth and in sync across quiz, bundle, and checkout.
Shopify Agency: Store Setup, Custom Features, Optimisation
Next, we proceeded with the custom Shopify store setup. The project scope encompassed crafting key pages, including the Homepage, Product Page, Collection Page, Login Page, Quiz and Bundle Pages, Contact Page, About Page, Cart, Checkout, FAQ, Footer, and Menu. A pixel-perfect design approach was taken, prioritizing mobile responsiveness.
Additionally, we integrated filter and search functionalities, along with other essential elements.
We added data analytics tools like Google Analytics GA4, Google Tag Manager, Hotjar and social media pixels to track and analyze user activity. Additionally, we integrated essential marketing software tools for online businesses. To support customers, we added live chat powered by Tidio.
We customised the checkout to include payment options like Venmo, Shop Pay, Apple Pay and PayPal. We also optimised the site speed and performance.
Custom Shopify Quiz App for Personalized Product Recommendations
Building a custom quiz for the Shopify Plus store was a key part of the project. While Shopify has many quiz apps none of them met our requirements. The main goal was to have an interactive, AI-powered chatbot for product recommendations and a seamless, visually stunning experience with pixel perfect design.
While the Shopify ecosystem offers several quiz apps, none met our specific requirements. The primary goal was to integrate a highly interactive, AI-powered chatbot for personalized product suggestions while ensuring a seamless, visually striking experience with pixel-perfect design.
To achieve this, we built a custom solution from scratch using Storybook CMS to create a scalable and flexible structure for the quiz UI.
We ensured seamless communication between the quiz and checkout by integrating its results with the cart via Shopify's Storefront API, as well as React and Redux for dynamic state management. Once the user completed the quiz, the result data—such as personalized product recommendations—was passed into the cart and updated in real-time to include the correct products and customizations.
Redux was key to this flow by centralising the state and keeping all components in sync, with updates reflected across the system instantly. This gave a highly personalized shopping experience and seamless communication between quiz, cart, product recommendations, checkout, and ultimately, customer conversions. See the result here.
Custom Shopify Product Bundle
Another challenge in this project was creating a subscription-based bundling system. We started by searching for the best bundle app for Shopify on the App Store. There are many good options, like Vitals, Bundles, Wide, Bundler, Recharge, and others, which we are familiar with as a Shopify Plus partner agency. However, there was no off-the-shelf Shopify bundle app that met our requirements.
Our decision to develop a custom solution was driven by the need for a highly tailored system that could align with our pixel-perfect design and seamless functionality needs, particularly when syncing with checkout and integrating with our React micro frontend.
The custom bundling system allows customers to create Shopify bundles with 3 to 5 products of their choice, which they can include in their subscription. This gives customers control over the products they receive each month and creates a more personalised experience. Clients can easily change their bundles by swapping products, adjust delivery frequency, or update quantities to fit their preferences. The system integrates seamlessly with Shopify checkout and adds the selected products to the cart, with data managed in real time through Redux.
By going custom, we made sure the bundling system met the unique requirements of our online store and gave us more control over the design and functionality. This custom development gave us a better user experience, reduced marketing efforts, and increased conversions and scalability for future growth. Take a look here.
Check out more related cases: Rokoko: Product Bundling and Stakora: Shopify Jewelry Stores.
Shopify Product Reviews App for Customer Engagement
During a sync call with Flashly, we suggested that allowing customers to review the product could build trust and boost sales, leading us to integrate Shopify product review app into our Shopify store.
The Shopiy App Store offers plenty of great options, such as Yotpo, Judge Me, Stamped, Loox, Okendo, and others—some of which we were already familiar with as certified partners. Still, finding the best Shopify review app can be challenging, as each has pros and cons. Also, pricing plans can sometimes be a deciding factor, but the Shopify ecosystem also offers even free product reviews app Shopify solutions.
After evaluation, we selected Okendo because of its seamless integration, advanced segmentation options, customization options for review formats, and competitive pricing that met our Shopify store requirements. More importantly, Okendo allowed Flashly to engage with real shoppers on social platforms, gather and showcase detailed customer reviews, including photos and videos and UGC through Facebook Shops, build social proof and increase sales. They also have expert guidance for less experienced users on how to add reviews to Shopify.
As a result, the reviews on Shopify greatly enhanced Flashly's store credibility, increased customer engagement, and boosted conversion rates by building trust and offering a more interactive shopping experience. Client testimonials played a key role in this success.
Achieving Success with a Shopify Plus Ecommerce Agency
The project delivered a fully custom and dynamic Shopify Plus app for Flashly, designed to elevate the customer experience. Key features included an interactive quiz for personalized product recommendations, advanced subscription bundle management where users can edit their bundles, and an integrated Shopify reviews app. This increased customer engagement and satisfaction, customer loyalty, subscription retention and overall business growth.
