About the client
Le Panier Francais is a French grocery store that sells a wide variety of French products online, including food, beauty, books, gifts, and much more. The food category is the most extensive, with over 1,000 products to choose from.
This includes everything from staples like bread, pasta, and cheese to more specialty items like foie gras, escargots, and macarons. Le Panier Francais also has a wide selection of French wines, as well as non-alcoholic beverages like juices, sodas, and coffee.
The problems
Le Panier Francais initially launched their online store on the Bigcommerce platform. While this allowed them to establish an online presence, they quickly encountered a series of challenges that impeded their growth and customer satisfaction.
The most pressing issues included a slow-running website, which frustrated users and increased bounce rates. The sluggish performance made it difficult for customers to browse products, leading to a drop in potential sales.
In addition to performance issues, the website's user interface and user experience (UI/UX) design were suboptimal. The outdated and clunky design made navigation cumbersome and failed to engage customers effectively.
Poor UI/UX not only detracted from the aesthetic appeal of the site but also made it difficult for users to find what they were looking for, resulting in a negative overall experience. This significantly impacted customer retention and conversion rates, as frustrated visitors often left the site before completing a purchase.
Recognizing the need for a more robust solution, Le Panier Francais sought the expertise of True Storefront. Their objective was twofold: first, to address the technical shortcomings of their existing platform, and second, to overhaul the website's design to create a more professional, visually appealing, and user-friendly online store.
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: to create a more customer-centric, efficient, and scalable e-commerce platform that would enable Le Panier Francais to achieve their business goals:
- Migrate from Big Commerce to Hydrogen
- Make the site lighter and faster
- Keep important features from the Bigcommerce site
- Change the UI/UX to look more professional and customer-friendly
- Optimize search functionality
- Increase shopping experience on mobile
- Smoother navigation
Technical stacks
- 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
Within the top-notch technical stacks, let's explore how TrueStorefront brings their expectations to reality.
Block-based Content Management
We designed the website as a collection of blocks, each developed and structured to represent a specific section. This means that content managers can easily create and update new pages and content, without having to know any code or rely on the development team. This can save a lot of time and money, and it also gives content managers more control over the look and feel of the website.
Instant Search & Filter with Algolia
Algolia's Instant Search provides a seamless, blazing-fast search experience for your users. As they type, results are displayed immediately, with no need to wait for a page reload. This makes it easy for users to find what they're looking for quickly and efficiently, regardless of the size or complexity of your data set.
Moreover, Algolia's Filter feature allows users to refine their search results by applying filters to different attributes. For example, a user searching for products on an e-commerce site could filter the results by price, category, brand, or other factors. This makes it easy for users to narrow down their results and find the exact products they're looking for.
Shop by Brand
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.
Add to cart from everywhere
One of the most frustrating things for online shoppers is having to navigate back to the product page in order to add an item to their cart. This can be especially time-consuming if the customer is browsing products from different pages on the website.
With the ability to add to cart from anywhere, customers can simply click the "add to cart" button next to any product they want to purchase, regardless of which page they're on. This makes it much easier and faster for customers to complete their purchase, which can lead to increased sales and customer satisfaction.
Stock notifications
In our continuous effort to refine the shopping experience, we're excited to introduce the Stock Notification feature. This enhancement is designed to keep customers informed and engaged, even when their desired items are out of stock.
Customers can now subscribe to instant alerts for products that are temporarily unavailable. The moment an item is restocked, a notification is promptly sent out, ensuring that our customers never miss out on their favorite products.
Subscription product
Yotpo Subscription is a powerful tool that allows businesses to create and manage subscription programs for their products. So, we integrated Yotpo's subscription service to build subscription options, so customers can buy subscription products, pay monthly or yearly, and more.
Gift card product
Shopify Gift Cards are a great way to increase sales and boost customer loyalty. By implementing the Shopify Gift Card function into this project, we ensured that customers could easily purchase and redeem gift cards directly from the Lepanier Francais online store.
This seamless integration not only expanded the range of options available to customers but also provided a convenient and user-friendly way to send thoughtful gifts to their loved ones.
Wishlist functionality
We also implemented a wishlist functionality to make it possible for users to bookmark their favorite items. This allows users to easily return to products they are interested in at a later time, or to share their wishlist with others.
The outstanding resutl
After 2 months of research and development, we are thrilled to have delivered a new website interface that exceeds our customer's expectations. We have successfully created a Shopify theme that is both visually appealing and highly functional
Successfull Shopify Headless store migration
Migrating from Bigcommerce to Hydrogen can be a daunting task, but it's worth it. Hydrogen is a next-generation headless commerce platform that offers some advantages like faster and more performant than Big Commerce.
The site now looks professional and customer-friendly. Hydrogen also gives you complete control over the look and feel of your website. This means that you can create a website that is both professional and customer-friendly. We used Tailwind CSS to create custom designs without writing any custom CSS and Sanity as a headless CMS to easily manage your content.
New look for Le Panier Francais online store
We optimized the site's performance for mobile and desktop devices to meet Google's pagespeed benchmarks and ensure a seamless browsing experience. In additional, by shifting the page rendering process to the server rather than relying on the browser for loading, we significantly reduced the site's overall weight.
To improve the overall user experience and streamline the search process, we optimized the search function using advanced search algorithms and intuitive search filters. This enhanced the site's search capabilities, enabling users to find products quickly and effortlessly.
Site speed enhancement
A faster and more efficient website can also lead to an improved customer shopping experience. Customers are more likely to return to a website that is fast and easy to use. After this project, the website page speed increased to 99 performance score on computer devices, and the largest contentful paint takes only 1.9s to deliver.
All the importanct features from old Big Commerce store have been transferred and integrated seamlessly with the Hydrogen technologo on the new one. Within Hydrogen, Le Panier Francais switch to Shopify without sacrificing any of the must-have functions.
Wrapped it up
In conclusion, we teamed up with Le Panier Francais to create a new Shopify Headless store that is faster, lighter, more efficient, and more user-friendly than their previous Bigcommerce store. The new store features a professional and customer-friendly interface, powered by Hydrogen and Tailwind CSS. The site also uses Algolia for search and Sanity for headless content management.
We are proud to have helped Le Panier Francais achieve their business goals and create a new Shopify Headless store that will help them continue to grow and succeed.
Inspired by Le Panier Francais's success? Now it's your turn!