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).
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.
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 [blocked] / Google Analytics) with easy provider switch
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 [blocked] 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 URL 2. 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 line 2. Dynamic below the fold line
ISR variants above the fold and CSR below the fold or PPR
