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
  • 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

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.