What is B2B ecommerce? Everything you need to know
When you think of “customer experience,” what comes to mind? People, right? Specifically, consumers. Retail customers. That’s easy; the ...
Sr. SEO Web Digital Marketing Manager
When you think of “customer experience,” what comes to mind? People, right? Specifically, consumers. Retail customers. That’s easy; the ...
Sr. SEO Web Digital Marketing Manager
A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...
Search and Discovery writer
By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...
Director, Product Marketing
Search has been around for a while, to the point that it is now considered a standard requirement in many ...
Senior Machine Learning Engineer
With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...
VP Corporate Marketing
It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...
Sr. SEO Web Digital Marketing Manager
Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...
Director of Product Marketing & Strategy
This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...
Benoit Reulier &
Reshma Iyer
Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...
Director, User Experience & UI Platform
Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...
Search and Discovery writer
If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...
Sr. SEO Web Digital Marketing Manager
Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...
Search and Discovery writer
Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...
Search and Discovery writer
Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...
CTO @Algolia
Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...
Director, Digital Marketing
Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...
VP of Product
We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...
Chief Executive Officer and Board Member at Algolia
The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...
CTO @Algolia
Dec 14th 2021 ecommerce
Get inspiration and speed up your Storefront implementation with this React / Next.js Starter kit.
Anyone who has built an end-to-end Search and Discovery experience knows how demanding it can be to create a robust front-end interface that not only meets software development standards, but also the expectations of end-users in terms of speed and UI/UX best practices. Especially when those experiences serve multiple devices at a time, in particular mobile devices, which represent over 60% of web traffic on B2C ecommerce in 2021.
For several years now, our team has been investing time and resources in the InstantSearch and Autocomplete libraries to provide UI components that developers can use, customize, and extend to compose their interfaces. We’re proud to have empowered thousands of our customers, and look forward to enabling many more in the future.
Despite these libraries, a non-negligible amount of time and expertise is still required to craft a great experience. Customers still need to figure out how to plug our components into their unique UI/UX design and technology.
We’re thrilled to introduce our first UI template, focused primarily on ecommerce. The UI Template is a storefront implementation using React / Next.js, which you can use either as a starter kit to build your Algolia-powered solution, or an educational and inspirational resource from which you can cherry pick bits of code.
Before we dive into how we built the UI Template, and the elements and components included in the package, let’s take a step back and consider the end-user point of view. Click on the live preview below to test the experience on your own devices.
Or scan it from you phone
We built the PWA Ecom UI Template with the end-user experience as a core focus, paying particular attention to making it as production ready as possible. The UI Template’s implementation benefits from the following technology:
From a functional standpoint, the current version of this UI Template focuses on the Search & Discovery experience in the following areas:
Additionally, integrating Algolia Autocomplete.js and React InstantSearch into the template has allowed us to unlock not only the Search & Browse capabilities offered by Algolia, but its more advanced features such as Query Suggestion, Merchandising via Rules, AI Re-Ranking, and AI Personalisation.
In future iterations, the UI template will add more pages, such as a Product Detail page with recommendations, product search review, store locator, and help center.
Finally, in terms of design, the PWA Ecom UI Template is based on the UI and the best practices available in our Ecom UI Design Kit released last summer, which we developed to be as neutral as possible, providing you with the flexibility to make this template fit your brand with minimal efforts and short delivery times.
PWA Ecom UI Template’s essential elements can be adopted for any other use-case and industry, benefiting both the company and the end-users by incorporating best UI practices. Its interaction patterns and best practices, as well as its front-end development logics (e.g., server-side rendering, URL rooting, state management), are relevant for web applications beyond ecommerce.
We’ve experienced this ourselves when we cherry-picked parts of the UI template (at that time in Beta) to accelerate the development of the Algolia CodeExchange. The main objective of our CodeExchange is to enhance the discoverability of resources available to builders using Algolia.
Preview of the Algolia CodeExchange – In yellow the components re-used from the UI Template
Leveraging the UI Template allowed us to meet our tight deadline, and even deliver an experience better than the planned design. The template saved us development and design time by not having to rebuild a mobile-friendly filtering sidebar. This time-saver allowed us to move more quickly to enhance the tool.
Remember, you can use the template in two ways: as a foundation of your future implementation, whether you are re-platforming or upgrading your tech stack architecture to embrace the Headless approach; and as an educational resource from which you can get inspiration and/or cherry pick bits of code based on your needs.
Our development team is constantly improving and optimizing our product. We would love to hear from you:
Please share your thoughts in our Community.
Powered by Algolia Recommend