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

browsing-journey-captions.mp4

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
- Instant navigation between pages with carefully picked rendering strategies (HP, PDP, CLP, PLP, SRP)
- Breadcrumbs on every crucial e-commerce page
- Filtering helpers such as tiny vendor facet values search
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 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

Reference: post 'Enterprise e-commerce migration cheat-sheet: essential terms and definitions' by Dom Sipowicz on Vercel Community ↩

License

This project is licensed under the MIT License. For more information, see the LICENSE file.