Blazity Enterprise Ecommerce Starter
Next.js storefront using Blazity for high-performance ecommerce with AI features and one-click deployment.
Enterprise Commerce
Introduction
Enterprise Commerce by Blazity is a open source enterprise-grade template of a Next.js project using Shopify as the e-commerce platform (product data, categories) and Algolia as the middle layer (data fetching, searching, faceting and recommendations).
Installation
For detailed steps how to setup the whole application, please check docs.blazity.com "Setup & Configuration".
You can also deploy the project to Vercel with one click the button below
Philosophy & motivation
Building e-commerce platform is a tough topic. Creating one that has all the features that enterprise companies want is hard, way harder than implementing Headless CMS. There are bunch of templates out there that struggle with couple areas, while they may be a great choice for a small or medium-sized businesses, the huge needs for e.g. crawling budget optimization, SEO, excellent browsing journey, simplicity of the implementation are way more than can be expected from other projects.
The browsing journey
A monolithic commerce platform will never beat the speed of a fast-lookup system like Algolia, Constructor, or other enterprise search systems. What if you cache your platform's responses? Even still, the combinatorics of search terms, filters, and sort options create endless unique queries. A fast source-of-truth is table-stakes for speedy browsing UX.
Architecture diagram
Simple, winning e-commerce architecture. Take a closer look at the arrow colors as they represent the times between high-level user's browsing journey interactions and network latencies in the lower level.
Media preview
https://github.com/user-attachments/assets/ec3a3a7d-2118-4367-950c-dd31022768f1
Storefront features
- Shopify as e-commerce backend, Algolia as the data middle-layer
- Instant search, faceting and filtering experience through thousands (most likely will also work with millions) products with sophisticated filters, typo tolerance and word similarity
- Enterprise-grade redirects handling through tens of thousands redirects without latency overhead (implemented on Bloom Filters)
- Fast builds regardless of the e-commerce specific data volume
- Platform-agnostic hierarchical categories
- Analytics (Vercel Analytics / Google Analytics) with easy provider switch
- Uncomplicated A/B testing setup
- Perfect performance scores
- SEO optimized, with crawling budget concept in mind
- Crucial pages displaying critical contents and data without JavaScript execution needed
- Follows the best practices regarding building e-commerce storefronts with simplicity in mind
- Next.js App Router with implementation using all of the features (as we believe Next.js is the king for e-commerce)
- ISR MegaNav updates with seamless client-side hot-reload (SWR)
- Browsing journey setup with mind of high conversion rates & maximizing the user's experience
- Hosted on Vercel
- Designed using v0
Page specific features
HP (Home Page)
- Super optimized above-the-fold category carousel with CTA buttons forwarding to CLPs/PLPs
- SSG for best possible performance
- A/B testing out of the box with simple implementation
- Sales banner
CLP (Category Landing Page)
-
Optimized Headless CMS driven CLP cover images and descriptions
-
Showcase of products from the particular category
-
"Show all products" button navigating to the actual PLP
-
Tightly bound to the categories user in the e-commerce provider configured (default: Shopify)
-
Possibility to declare category to be viewable as PLP or CLP, depending on the hierarchical level after clicking it in the MegaNav
PLP (Product Listing Page)
- Sub-second search experience built on Algolia, with infinite scaling capabilities
- Intelligent values faceting through multiple filters, such as:
- Product's copywriting content
- Average rating and reviews
- Vendors
- Variants (e.g. Color)
- Minimum/maximum price
- Sorting of the PLP output display
- Efficient and battle-tested pagination without fancy infinite loading sections
- Query params driven, easily shareable links
- Browsing journey helpers, such as tiny vendors' list search
PDP (Product Details Page)
- Multiple variants configurations with robust variants' combinations handling
- Image variants carousel with auto-changing the preview based on the selected variant
- FAQ sections driven by headless CMS
- Product reviews panel with "View all reviews" subpage
- Recommended products at the bottom of the page
- Above the fold content visible with JavaScript disabled (SEO-optimized)
- Base product generated as SSG + variants SSR
Documentation
We also created a comprehensive documentation docs.blazity.com/enterprise-commerce serving purpose of explaining our architectural decisions, containing in-details features descriptions and read-worthy guidelines. Everything with focus on the business values and theirs impact on the implementations.
Frontend architecture
| Term | Full Name | Rendering Strategy | Caching Strategy | A/B Testing or Personalization |
|---|---|---|---|---|
| HP | Home Page | ISR/SSG/PPR | Static | ISR variants above the fold and CSR below the fold or PPR |
| CLP | Category Landing Page (products + CMS content) | ISR/SSG/PPR | Static | ISR variants above the fold and CSR below the fold or PPR |
| PLP | Product Listing Page (products only) | ISR for main categories with pagination PPR/CSR/SSR/ISR for filtering/faceting/sorting | 1. Static for all SEO indexable URL2. Dynamic for the faceting/filtering/sorting and long tail pagination | Ideally PPR/ISR variants for SEO indexable URLs. CSR/SSR for long tail |
| SRP | Search Results Page | SSR/ISR/CSR | Dynamic | PPR or CSR |
| PDP | Product Details Page | Pareto rule 80/20. SSG for the bestsellers. ISR for the long tail. | 1. Static for above the fold line2. Dynamic below the fold line | ISR variants above the fold and CSR below the fold or PPR |
License
This project is licensed under the MIT License. For more information, see the LICENSE file.
Blazity Enterprise Ecommerce Starter
Next.js storefront using Blazity for high-performance ecommerce with AI features and one-click deployment.
Enterprise Commerce
Introduction
Enterprise Commerce by Blazity is a open source enterprise-grade template of a Next.js project using Shopify as the e-commerce platform (product data, categories) and Algolia as the middle layer (data fetching, searching, faceting and recommendations).
Installation
For detailed steps how to setup the whole application, please check docs.blazity.com "Setup & Configuration".
You can also deploy the project to Vercel with one click the button below
Philosophy & motivation
Building e-commerce platform is a tough topic. Creating one that has all the features that enterprise companies want is hard, way harder than implementing Headless CMS. There are bunch of templates out there that struggle with couple areas, while they may be a great choice for a small or medium-sized businesses, the huge needs for e.g. crawling budget optimization, SEO, excellent browsing journey, simplicity of the implementation are way more than can be expected from other projects.
The browsing journey
A monolithic commerce platform will never beat the speed of a fast-lookup system like Algolia, Constructor, or other enterprise search systems. What if you cache your platform's responses? Even still, the combinatorics of search terms, filters, and sort options create endless unique queries. A fast source-of-truth is table-stakes for speedy browsing UX.
Architecture diagram
Simple, winning e-commerce architecture. Take a closer look at the arrow colors as they represent the times between high-level user's browsing journey interactions and network latencies in the lower level.
Media preview
https://github.com/user-attachments/assets/ec3a3a7d-2118-4367-950c-dd31022768f1
Storefront features
- Shopify as e-commerce backend, Algolia as the data middle-layer
- Instant search, faceting and filtering experience through thousands (most likely will also work with millions) products with sophisticated filters, typo tolerance and word similarity
- Enterprise-grade redirects handling through tens of thousands redirects without latency overhead (implemented on Bloom Filters)
- Fast builds regardless of the e-commerce specific data volume
- Platform-agnostic hierarchical categories
- Analytics (Vercel Analytics / Google Analytics) with easy provider switch
- Uncomplicated A/B testing setup
- Perfect performance scores
- SEO optimized, with crawling budget concept in mind
- Crucial pages displaying critical contents and data without JavaScript execution needed
- Follows the best practices regarding building e-commerce storefronts with simplicity in mind
- Next.js App Router with implementation using all of the features (as we believe Next.js is the king for e-commerce)
- ISR MegaNav updates with seamless client-side hot-reload (SWR)
- Browsing journey setup with mind of high conversion rates & maximizing the user's experience
- Hosted on Vercel
- Designed using v0
Page specific features
HP (Home Page)
- Super optimized above-the-fold category carousel with CTA buttons forwarding to CLPs/PLPs
- SSG for best possible performance
- A/B testing out of the box with simple implementation
- Sales banner
CLP (Category Landing Page)
-
Optimized Headless CMS driven CLP cover images and descriptions
-
Showcase of products from the particular category
-
"Show all products" button navigating to the actual PLP
-
Tightly bound to the categories user in the e-commerce provider configured (default: Shopify)
-
Possibility to declare category to be viewable as PLP or CLP, depending on the hierarchical level after clicking it in the MegaNav
PLP (Product Listing Page)
- Sub-second search experience built on Algolia, with infinite scaling capabilities
- Intelligent values faceting through multiple filters, such as:
- Product's copywriting content
- Average rating and reviews
- Vendors
- Variants (e.g. Color)
- Minimum/maximum price
- Sorting of the PLP output display
- Efficient and battle-tested pagination without fancy infinite loading sections
- Query params driven, easily shareable links
- Browsing journey helpers, such as tiny vendors' list search
PDP (Product Details Page)
- Multiple variants configurations with robust variants' combinations handling
- Image variants carousel with auto-changing the preview based on the selected variant
- FAQ sections driven by headless CMS
- Product reviews panel with "View all reviews" subpage
- Recommended products at the bottom of the page
- Above the fold content visible with JavaScript disabled (SEO-optimized)
- Base product generated as SSG + variants SSR
Documentation
We also created a comprehensive documentation docs.blazity.com/enterprise-commerce serving purpose of explaining our architectural decisions, containing in-details features descriptions and read-worthy guidelines. Everything with focus on the business values and theirs impact on the implementations.
Frontend architecture
| Term | Full Name | Rendering Strategy | Caching Strategy | A/B Testing or Personalization |
|---|---|---|---|---|
| HP | Home Page | ISR/SSG/PPR | Static | ISR variants above the fold and CSR below the fold or PPR |
| CLP | Category Landing Page (products + CMS content) | ISR/SSG/PPR | Static | ISR variants above the fold and CSR below the fold or PPR |
| PLP | Product Listing Page (products only) | ISR for main categories with pagination PPR/CSR/SSR/ISR for filtering/faceting/sorting | 1. Static for all SEO indexable URL2. Dynamic for the faceting/filtering/sorting and long tail pagination | Ideally PPR/ISR variants for SEO indexable URLs. CSR/SSR for long tail |
| SRP | Search Results Page | SSR/ISR/CSR | Dynamic | PPR or CSR |
| PDP | Product Details Page | Pareto rule 80/20. SSG for the bestsellers. ISR for the long tail. | 1. Static for above the fold line2. Dynamic below the fold line | ISR variants above the fold and CSR below the fold or PPR |
License
This project is licensed under the MIT License. For more information, see the LICENSE file.
