A Strong Foundation: Building Olaplex’s
Shopify Store for Healthy Growth
37%
22%
76%
Services Provided:
- Optimized UX and UI on Homepage, Cart Drawer, Collection, Pages, and PDPs
- Custom Shopify Theme Development from 1.0 to 2.0
- Implementation of subscriptions and a loyalty program
- Interactive content and immersive product education
- Mobile First Shopping Approach
Since working with Arctic Grey the new UX focused site design with a mobile first approach, optimized product page, and cart drawer increased reached checkout rate by 34% as well as increased total sales by 37% through highly targeted product placement in high click zones alongside strategic upselling.
Olaplex's Promise:
Exceptional Haircare for Every Hair Type
Olaplex, a leader in professional and retail hair care, has built a reputation for delivering innovative, science-backed products that transform hair health. More than just a brand, Olaplex prioritizes meaningful connections with its customers, stylists, and salon partners, creating a community dedicated to hair care excellence. Our redesign of Olaplex’s Shopify store focused on enhancing usability and performance while infusing a modern, clean aesthetic that reflects the brand’s commitment to quality and science. With a sleek, updated design, we aimed to provide a seamless, engaging shopping experience across all devices. The ultimate goal was to increase customer satisfaction, boost average order value, and strategically highlight educational content alongside product recommendations. This case study explores the transformation process, addressing the challenges and showcasing the results that uphold Olaplex’s promise of a top-tier shopping experience, from personalized customer support to reliable, prompt delivery.
The Challenge
In redesigning Olaplex’s Shopify store, our focus was on crafting immersive, educational product and collection pages that highlight the science behind each product, making every interaction both informative and visually engaging. Utilizing Shopify’s multicurrency markets and advanced customization features, we tailored each page to feel distinct, while ensuring a seamless, localized experience for global customers.
To create a cohesive look and feel, we aligned the Olaplex Pro (B2B) and direct-to-consumer (D2C) experiences, enabling consistent branding and functionality across both platforms. We also migrated to Bazaar Voice for reviews, providing a robust system that reinforces product credibility through authentic customer feedback. By refining the design and optimizing site speed, we ensured a smooth, fast-loading interface that supports a cohesive, growth-ready platform, inviting customers into the Olaplex story with each visit.
The Solution
Our partnership with Olaplex commenced with an understanding of their unique needs and goals. In optimizing their site and overall customer experience, we achieved the following milestones:
- Optimized UX and UI: A To create a cohesive and engaging journey across Olaplex’s retail and Professional sites, we focused on simplifying design and navigation while enriching each page with essential product information and educational content. The streamlined layout presents intuitive, easily navigable sections that enhance the shopping experience without overwhelming visitors. We also integrated advanced metafields, providing a rich, immersive experience that prioritizes education, giving customers an in-depth understanding of each product’s benefits and science.
- Custom Shopify 2.0 Theme Development: To elevate the shopping experience, we migrated from Shopify 1.0 to 2.0, developing a custom theme that takes full advantage of Shopify 2.0’s enhanced customization and performance features. This upgrade allowed us to implement a graphic-forward mega menu with clear, interactive imagery, making navigation seamless and visually captivating. Shopify 2.0’s flexible sections enabled us to create interactive graphics throughout the site, breaking up product descriptions and educational content, which draws visitors' attention and enriches the visual experience. Additionally, the migration significantly improved site speed, ensuring a faster, smoother shopping journey that keeps users engaged and supports higher conversion rates..
- Implementation of Subscriptions and Loyalty Program: By introducing Recharge Advanced options in the account pages, we developed an experience that supported streamlined subscription save flows, offering customers convenient, customization options to maintain their hair care routine. Additionally, we revitalized the loyalty program through Zinrelo, creating a rewards experience that encourages repeat purchases and boosts customer retention. These initiatives have strengthened long-term relationships between Olaplex and its customers, driving higher conversion rates and fostering brand loyalty.
- Interactive Content and Product Education: With a wealth of information available about Olaplex’s diverse product range, it was essential to present it in a user-friendly, visually appealing format. Leveraging metafield capabilities across both collections and products, we introduced dynamic graphics and interactive elements that transform dense information into engaging, accessible content. These custom metafields allowed us to break up text with visuals and key highlights, enabling visitors to easily navigate product education and engage with the science behind each item in an entertaining, interactive way.
- Mobile-First Shopping Approach: By implementing a mobile-first design, we ensured easy navigation on smaller screens, reducing bounce rates and enhancing the customer experience across platforms. This comprehensive approach has equipped Olaplex with a modern, user-friendly, and scalable platform that supports both immediate needs and future growth.
Up to 22% increase in conversion with the updated PDP and collection pages.
Total sales increased by 37% Spruce this section up a little bit to showcase analytics or graphics in a more visually appealing manner.
With a Optimized Product Page, and Cart Drawer we increased The Reached Checkout Rate by 34%
A truly diverse range of action
Arctic Grey partnered
Arctic Grey partnered with Olaplex to enhance the user experience on mobile and desktop, focusing on driving upsells and cross-sells. By creating a seamless checkout process and strategically placing upsell opportunities, we achieved significant boosts in Conversion Rate (CR) and Average Order Value (AOV), showcasing the impact of our collaboration.
Mobile First
By prioritizing the mobile experience, you cater to a larger audience, potentially capturing more leads and conversions. With the increasing use of mobile devices for search, an optimized mobile UX becomes crucial. Mobile-friendly websites are favored by search engines, leading to higher rankings and, consequently, increased search traffic. Mobile users often have different browsing habits and intentions compared to desktop users. By catering to mobile users’ specific needs, you align the UX with their behavior, increasing the likelihood of conversions. For Olaplex, this meant optimizing content placement and button placement to cater to their unique audience and stay true to their overall brand.
Optimized UX
In a competitive digital space, exceptional UX sets a brand apart, making conversions smoother and reducing friction. For Olaplex, we enhanced filtering on collection pages and refined spacing and button placement to streamline the user journey and boost engagement.
SEO Traffic Boost
Effective product placement and alignment with search intent improve search rankings and drive organic traffic. By enhancing UX with upsells and targeted placements, we achieved a 21% increase in sales from search traffic.
Site Speed Optimization Summary
Website loading speed significantly impacts conversion rates. Research shows that improving load times by just one second can boost conversions by 17%. Our mission focused on delivering high-speed performance across desktop and mobile. These efforts were rewarded with impressive site speed results, enhancing user experience and conversion potential.
Arctic Grey UI/UX Design Approach
Desktop UX
Improving the desktop user experience is essential for keeping visitors engaged and satisfied with any website. For Olaplex we focused on intuitive navigation and filtering, responsive design, and clear call to action. We maintained consistent branding throughout their website, including colors, fonts, and design elements.
A cohesive brand identity helps users recognize your website and builds trust. It was important to their aesthetic to maintain a clean and organized layout, using the white space strategically and bold call to action buttons. Well-spaced content makes it easier for users to digest information and focus on essential elements, leading to easier browsing and higher click rates and conversion.
Mobile UX
Improving the desktop user experience is essential for keeping visitors engaged and satisfied with any website. For Olaplex we focused on intuitive navigation and filtering, responsive design, and clear call to action. We maintained consistent branding throughout their website, including colors, fonts, and design elements.
A cohesive brand identity helps users recognize your website and builds trust. It was important to their aesthetic to maintain a clean and organized layout, using the white space strategically and bold call to action buttons. Well-spaced content makes it easier for users to digest information and focus on essential elements, leading to easier browsing and higher click rates and conversion.
The Results
- Olaplex’s new mobile-friendly experience has driven consistent growth in both sales and site engagement, resulting in improved conversion rates.
- Enhanced upselling opportunities across the site have contributed to a notable rise in online sales across all product categories.
- Olaplex’s integrated Reviews and Loyalty programs, featuring a points-based rewards system, have fostered a more engaging, interactive experience that builds long-term brand loyalty.
- Ongoing post-launch improvements have further boosted customer satisfaction and retention rates.
Accelerate your AOV with a dynamic
Cart Drawer and gifting
UX for Cart Drawers
Effortlessly view cart contents and explore personalized upsell options with a sleek, sliding cart drawer. Keep browsing without interruptions—stay on the page you’re viewing and seamlessly continue shopping without detouring to a separate cart page.
Free Shipping and Gifting Options
Displaying free shipping thresholds encourages users to add more items to qualify, leading to larger orders. This is particularly effective in the cart drawer, where users can monitor their progress towards free shipping in real-time.
Shopify Dynamic Payment Buttons
Offering multiple payment methods directly in the cart drawer, such as PayPal, Apple Pay, or Google Pay, lets customers choose their preferred payment option right away.This ease of access is especially crucial for mobile users, who benefit from quick, single-tap payment options.
Arctic Grey is the #1 Highest Ranked Platinum Partner on Shopify Worldwide
The Multi Award Winning Shopify Management Team at Arctic Grey
Brooke Sanderson
Merchant Success Director
Jake Amos
Co-Founder
Truc Peter
Senior Account Executive
Giana Moretti
Senior eCommerce Manager
Anthony Spallone
Co-Founder
Maddie Schwartz
Senior Account Executive
Aaron Roper
Director of Partner Strategy
Ahmad Mustafild
Senior Solutions Architect
Caroline Jay
eCommerce Manager
Engineering each solution
Arctic Grey employs an innovative approach to enhancing customer experience. Through targeted research, we’ve identified and addressed potential points of confusion in our product offerings. This allows us to refine the user journey, creating a more seamless and engaging shopping experience. Our insights will continue to guide future project developments.
Throughout this project, we have delivered and continue to provide the following services and benefits:
- Strategic Product Placement – Maximizes visibility and ease of discovery for customers.
- Email Marketing Optimization – Boosts engagement and drives repeat purchases.
- Custom Upsell Cart Drawer – Increases average order value with tailored recommendations.
- Fully Responsive Experience – Ensures smooth navigation across all devices.
- Site Speed Optimization – Reduces load times, improving customer satisfaction.
- CRO & AOV Optimizations – Drives conversion rates and revenue growth.
- Core Web Vitals Management – Enhances site health and performance metrics.
- 24/7 On-Demand Support – Provides continuous assistance for uninterrupted service.
- End-to-End (E2E) Shopping Experience – Delivers a cohesive and streamlined shopping journey.
The Conclusion
Through our partnership and the powerful capabilities of Shopify’s flexible platform, advanced customization features, and extensive app integrations, we’ve set the foundation for Olaplex’s continued success and a bright future.
More Case Studies
A sophisticated Shopify Store designed and built for a Harvard University.
View Case Study
The Future of eCommerce with AI
As AI reshapes eCommerce with advancements in personalization, automation, and analytics, Arctic Grey leads the charge. Our proactive adoption of AI ensures your store remains competitive, leveraging trends like hyper-personalization and predictive analytics to drive growth.
Complete Shopify Tasks Quickly
with
Bulk Hours
by Arctic Grey
We've built this AI chat box to help quote hours needed for projects, please provide as much details as possible in terms of what you'd like to build in this chat box, and we will give you an estimate of hours in real time.
