Headless EC with Shopify
Shopify Storefront API, Next.js ISR, member pricing - fast and flexible headless EC site design
Headless EC Site Built on Shopify
Shopify Storefront API as the backend, with a fully customized Next.js frontend
What is Headless Commerce?
The basics of separating your EC site's "storefront" from its "back office," explained for non-engineers
Benefits of Headless Commerce
Page speed, design freedom, and multi-channel expansion with Shopify × Next.js
Headless Commerce Architecture Explained
The full technical picture — how Shopify's APIs divide the work, how data flows, and what to weigh before adopting
Automatic Size Chart Display for Products
Auto-selecting appropriate size charts based on category, item type, and gender
Size Chart Selection Logic
Priority-based mapping rules and exception handling mechanisms
Size Chart Data Structure and File Management
How chart data is stored, normalized against spelling variations, and dynamically mapped with a KV store
How the Size Guide Checker Works
Calculating a recommended size from height and chest measurements so shoppers stop guessing
B2B Auto-Discount & Invoice Payment System
Code-change-free B2B pricing using customer tags and coupon integration
B2B Auto-Discount System Overview
Implementing automatic B2B discounts and invoice payment in headless e-commerce
Shopify B2B Discount Configuration
Step-by-step guide for customer tags, segments, collections, and coupons
The Headless Side and Invoice Payment
Reading customer tags, calculating member prices, auto-applying coupons, and taking orders on invoice with draft orders
Ajax Cart with Shopify Cart API
A friction-free shopping experience where cart actions complete without page reloads
What is an Ajax Cart?
The basics of a cart experience that lets users keep shopping without page reloads
Cart UX Improvement Points
What an Ajax cart improves, and the small touches users appreciate
How the Shopify Cart API Works
What actually happens behind an Ajax cart — API requests, the cart ID, and keeping one source of truth on screen
Designing Reliable GA4 Conversion Tracking for Headless Commerce
An end-to-end design that stops purchase data from disappearing at the checkout handoff
Why Conversion Tracking Breaks in Headless Setups
The three boundaries where purchase data disappears — checkout handoff, order intake, and resends
Bridging Cookies Before the Checkout Handoff
How to park browser identifiers in order data, and the rules that keep checkout from breaking
Sending purchase from the orders/paid Webhook via GA4 Measurement Protocol
Recording purchases server-side after payment, with deduplication and monitoring built in
Cloudinary Image Delivery Optimization
Handing off image transformation and delivery to Cloudinary to fix the server load and runaway costs of a headless EC site
The Image Delivery Problem in Headless EC — Why Server Load and Costs Grow
How the image delivery path changes in a headless setup, and how that increases hosting load and costs
Image Optimization with Cloudinary — Why It Gets Chosen, and How It Compares
Entrust image conversion and delivery to a specialist service to keep server load and costs down
Building the Shopify → Cloudinary Delivery Flow, Step by Step
From choosing a sync method to displaying images in Next.js — the full build explained
Fast Page Loading with Next.js ISR
Improve EC site performance with static generation and automatic updates
EC Site Product Filter Design
Flexible product filtering combining custom fields and price ranges
Designing Product Recommendations
Helping users find their next item with outfit suggestions and related products
Back in Stock Notification Design and Admin UI
Designing restock detection, notification delivery, and the admin screen as one connected flow
Reliable Back in Stock Detection Design (0 to 1)
Spotting only the moment stock returns from zero, and the rules that keep the same alert from going out twice
Notification Delivery Pipeline Design (Queue, Throttling, Retry)
Building delivery around a pending send list so large alert volumes don't clog, and deciding retry rules up front
Back in Stock Admin UI Implementation Guide
Designing a console for checking alerts, retrying sends, and changing settings that an operations team can use safely every day
Running Multiple Sites with One Shopify
A multi-site architecture using sales channels and centralized inventory, without extra Shopify contracts
Single Sign-On Across Multiple EC Sites
Unifying members across separate brand EC sites: log in once, move freely between all of them
How Signed Handoff Tokens Work
Passing login state safely with a single-use token that is valid only at the moment of crossing sites
SSO Callback and Session Establishment Flow
How the receiving site verifies the token, builds a login state, and returns the user to the page they wanted
SSO Configuration That Scales with New Sites
Adding or removing participating sites through a configuration change alone, with extensibility built in
SEO Design for Headless EC — SSR Visibility, Structured Data, Sitemaps
The SEO features that stop working when you build your own frontend, and how SSR, JSON-LD, and dynamic sitemaps bring them back
Supplementing Crawler-Visible Content with SSR
Server-rendering the headings, descriptions, and internal links that client-side rendering alone never conveys
Implementing JSON-LD Structured Data (Products & Breadcrumbs)
How to declare the data that puts price, stock, and hierarchy into search results on a headless EC site
Generating and Caching Dynamic Sitemaps and robots.txt
Generating a sitemap.xml that follows products as they come and go, with caching and monitoring to keep the cost down
Google Shopping Readiness — Automated Product Feeds
Building our own product feed for Merchant Center: how thousands of SKUs stay current every day
Mapping Product Data to the Feed Specification
How to decide the rules that turn product names, GTINs, categories, and stock status into a format Google can read
Feed Caching and Health-Check Operations
Designing a cache that keeps thousand-SKU feed generation light, and the monitoring that tells you when delivery has stopped
Managing Feed Quality — Exclusions and Validation
How to decide which products stay out of the feed, and what to check before handing it over so disapprovals don't pile up
Cross-Sell Operations for Cart and Product Pages — Curated Recommendations with an Admin UI
Human-curated cross-sell instead of algorithm-only: suggestions managed through an admin screen and CSV
Designing "One More Item" Cart Cross-Sell
Lifting average order value with a cart-page suggestion slot — varying suggestions by cart contents without disrupting checkout
People Pick the Suggestions — Admin UI and CSV Bulk Operations
Editing per-product cross-sell settings in an admin screen and updating thousands of links at once through CSV export and import
Variant-Aware Cross-Sell UX
A one-step add-to-cart flow where users pick a size inside the suggestion slot, plus filtering so only in-stock sizes appear
Auto-Expiring Content — Designing Away "Forgot to Take It Down"
Giving campaign pages and event galleries an expiration date so they go private on their own when the time comes
Managing Temporary Content with KV Storage — Skipping the Database
How the body text and expiration date of a limited-time page can live in a key-value store alone, and why that call makes sense
Cron-Based Expiration and Access Control — Watching the Deadline
How a scheduled job finds expired pages and unpublishes them, and what to return when someone opens one after the fact
Use Cases for Disposable URLs — Where Expiring Pages Fit
Campaign pages, private event photo sharing, temporary document sharing with partners — the patterns where expiring URLs actually earn their keep
Building an In-House FAQ System — Search, Admin UI, Cross-Site
An FAQ built into the site itself instead of a SaaS: search index, admin editing, and multi-site rollout, all handled in-house
FAQ Data Management and Search Index with JSON + KV
A lightweight data design that keeps FAQs in per-category files and distributes them to a fast store and a cross-category search index
Admin-UI Editing with Git-Based Sync
Staff edit in the admin screen, developers manage files — two entry points connected by sync so both work together
Connecting FAQ to the Contact Flow to Reduce CS Load
Placing FAQ search ahead of the contact form to sort people who can self-serve from people who need a human
Other Categories
AI Agent Solutions & Business Automation
Practical LLM-powered solutions — AI-OCR order intake, reply drafting for support tickets, a daily research agent, and AI-driven product concierge
Direct Booking Site for Vacation Rentals
A full-scratch official booking site for a private villa — Beds24 channel manager sync, Stripe deferred auto-charge, a guest-only portal, and an AI assistant. A direct-booking platform that doesn't rely on OTAs
HubSpot CRM/CMS Setup & External Integration
From HubSpot implementation to custom API integrations beyond standard connectors and external tool integrations
POS & Omnichannel Integration
Unifying online and offline customer data for seamless customer experience
Accounting & Invoice Automation
Auto-generate invoices from spreadsheets with idempotency control and retry mechanisms
Order Management Integration
Bidirectional sync with order management systems and secure OAuth-based API integration
AI-Powered Site Development & Deployment
Non-engineer-friendly workflow for publishing and managing sites using Claude Code × GitHub × Vercel
Other Solutions & Ideas
Business improvement and problem-solving ideas and project examples that don't fit specific categories