How to increase your ecommerce conversion rate in 2024
2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...
Senior Digital Marketing Manager, SEO
2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...
Senior Digital Marketing Manager, SEO
What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...
Search and Discovery writer
How do you measure the success of a new feature? How do you test the impact? There are different ways ...
Senior Software Engineer
Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...
Sr. Developer Relations Engineer
In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...
Chief Executive Officer and Board Member at Algolia
When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...
Senior Digital Marketing Manager, SEO
Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...
Senior Digital Marketing Manager, SEO
“Hello, how can I help you today?” This has to be the most tired, but nevertheless tried-and-true ...
Search and Discovery writer
We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...
VP Corporate Marketing
Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...
Director, Sales Enablement & B2B Practice Leader
Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...
Search and Discovery writer
ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...
Search and Discovery writer
Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...
Technical Writer
Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...
Sr. SEO Web Digital Marketing Manager
What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...
Search and Discovery writer
In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...
Staff User Researcher
You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...
Sr. SEO Web Digital Marketing Manager
It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...
Search and Discovery writer
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