- Client: PurAuto
- Location: US
- Platform: Shopify Plus
- Service: Website development, theme customization, ongoing support
PurAuto's background
PurAuto is an US-based aftermarket performance parts and accessories distributor. Founded in 2020, they are a trusted name in the aftermarket automotive industry. Offering a diverse range of performance parts and accessories, PurAuto caters to the needs of from newbie to automotive professionals.
With a vast inventory of over 400,000 unique items, the company faced several critical challenges within their existing ecommerce infrastructure. Slow loading times, outdated design, and a cumbersome user experience were just a few of the issues that needed immediate attention to remain competitive in the online automotive market.
The problems
With a vast inventory of over 400,000 unique items, the company faced several critical challenges within their existing ecommerce infrastructure. Slow loading times, outdated design, and a cumbersome user experience were just a few of the issues that needed immediate attention to remain competitive in the online automotive market.
Recognizing the need to adapt to increasing customer expectations and industry trends, PurAuto made a strategic decision to overhaul its digital presence. The aim was to not only address existing challenges but to exceed customer expectations by providing a faster, more engaging, and user-friendly online shopping experience. This led to the collaboration between PurAnto and TrueStorefront.
The objectives
As per their expectations, the primary objectives of this project were clear and ambitious, aimed at achieving a profound transformation of the existing online store:
- Migrate from Shopify Liquid to Hydrogen: To leverage the capabilities of Remix (Hydrogen) and enhance the overall performance of the website.
- Handling a vast product inventory: Managing a huge inventory of over 400,000 items while ensuring seamless user experiences.
- Improve website speed: Targeting Google PageSpeed scores of mobile > 80 and desktop > 95, making the website significantly faster to engage shopping experience.
- Eliminate unnecessary Shopify Apps: Removing redundant applications to streamline the website and reduce complexity.
- Server-side rendering: Adopting server-side rendering to create a lighter website that loads efficiently and provides instant access to content.
- Optimize search functionality: Enhancing the search feature for an improved user experience.
- Smoother navigation: Providing customers with instant page loading, eliminating the wait time associated with page loading spinners.
Technical stacks
Technical stacks we used for this project:
- Commerce Platform: Shopify Plus
Shopify Plus served as the backbone of Lepanier Francais ecommerce operations. Its scalability and flexibility made it the ideal choice for managing a large product catalog and accommodating the significant traffic expected.
- Framework: Remix (Hydrogen)
Remix (Hydrogen), a modern web framework, was the best fit for Lepanier Francais new website. Its performance-centric architecture, server-side rendering capabilities, and JavaScript-driven approach were pivotal in delivering a faster, more responsive site.
- Languages & Libraries: JavaScript, TypeScript, React
The project relied on JavaScript and TypeScript for front-end development, ensuring robust and maintainable code. Besides, the React library facilitated the creation of dynamic and interactive user interfaces.
- Styling Library: Tailwind
Tailwind CSS played an essential role in shaping the website's aesthetics. Its utility-first approach and flexibility enabled the development of a highly responsive and visually appealing design.
- Headless CMS: Sanity
Sanity was selected as the headless CMS of this project because its flexibility and ease of use allowed content managers to work independently and efficiently.
- Search Engine: Algolia
Algolia is the leader in globally scalable, secure, digital search and discovery experiences. This search engine allows Lepanier Francais to power the search and discovery experiences on the new website. It also ensured a seamless user experience thanks to the ultrafast and scalable search capabilities.
- Deployment Platform: Oxygen
Choosing Oxygen as the deployment platform ensured the efficient delivery of the website to users. The robust infrastructure and automation capabilities of Oxygen contributed to the site's overall performance.
The solutions
To fix all problems and align the primary objectives, let's go through and explore how we brought a new look with full updates for PurAuto's online store.
Block-based content management
We designed the website as a collection of blocks, each developed and structured to represent a specific section. Once this foundation is in place, PurAuto Team can manage the whole web's content without requiring the continuous involvement of design or development. This transformation allows the PurAuto Team to enable rapid updates and flexible present new products, offers, and information.
Enterprise-grade Search & Filter with Algolia Search
Algolia was integrated into the website to ensure users can instantly find out the products they desired swiftly and with precisio. This solution takes the product search experience to the new level, allowing users to effortlessly explore the extensive inventory.
Structured Brand pages
We created a structured brand, from which customers can easily locate the brand they trust and explore products to shop. By simplifying the brand-based product discovery process, users could find products with greater ease and convenience.
Personalize Vehicle selector
With this feature, customers can save their vehicle information on the site. As a result, the platform would curate product recommendations based on their specific vehicle model. This personalized enhanced the user experience by helping customers find products compatible with their vehicles, then, improve the chances of successful purchases.
Wishlist functionality
We also implemented a wishlist feature, which allows users to bookmark their favorite items. This feature encouraged user engagement and made it easier for customers to keep track of items they intended to purchase in the future, enhancing the overall shopping experience.
The outstanding results
Project PurAuto took 2 months from initiation to completion. This timeline showcased the commitment of the team and the efficiency of the chosen technical stacks and solutions. Throughout the 2-month duration, every aspect of the project, from the migration to Hydrogen to the integration of Algolia, was executed with precision and careful coordination.
A brand-new homepage
PurAuto unveiled a new Shopify Headless store which is quicker, lighter, and more efficient. The migration from Shopify Liquid to Hydrogen played a pivotal role in this transformation. The new website was not just an aesthetic overhaul but a complete reimagining of the user experience, backed by cutting-edge technologies.
Increase speed and conversion rate by 60%
The objectives set for improving website speed and enhancing user experience were targeted. The website's performance was optimized to an extent where it achieved a 60% increase in speed compared to the previous setup. The Google PageSpeed scores surpassed the set benchmarks, with the mobile score >80 and the desktop score >95.
This boost in website speed had a direct and substantial impact on conversion rates. Customers experienced a more responsive and seamless shopping experience, leading to a significant uptick in successful conversions.
Enhance customer shopping experience
The top priority is delivering an enhanced shopping experience to PurAuto's customers. With the implementation of features such as instant search and filter, structured brand pages, the vehicle selector, and wishlist functionality, the shopping experience is smoother as well as personalized and user-centric.
Customers now had the ability to quickly find products, shop by brand, and receive personalized recommendations based on their vehicle. The wishlist functionality further enhanced customer engagement and convenience.
Smooth conversion of a huge number of products
Managing a product catalog of over 400,000 items was no small feat. However, with the combination of a block-based content management system, server-side rendering, and Algolia's powerful search capabilities, PurAuto managed the transition seamlessly. From now, users can explore the extensive product inventory without slowdowns or lag.
Wrapped things up
It can be said that the PurAuto project is not just a case study; it is an inspiration for businesses looking to redefine their digital presence to survive in this competitive marketplace. The transition to a new Shopify Headless store, powered by Hydrogen and supported by a carefully chosen set of technical stacks, marked a significant shift in website performance and user experience.
Inspired by PurAuto's success? Now it's your turn!