AvatarPortfolio

Headless EC with Shopify

Shopify Storefront API, Next.js ISR, member pricing - fast and flexible headless EC site design

Shopify Headless Commerce

Custom frontend with Next.js powered by Shopify Storefront API backend

ShopifyStorefront APIHeadlessNext.js
1

What is Headless Commerce?

A beginner-friendly guide to separating your e-commerce frontend from backend

2

Benefits of Headless Commerce

Speed, design freedom, and scalability with Shopify × Next.js

3

Headless Commerce Architecture Explained

Understanding Shopify APIs, system design, and data flow

Automatic Size Chart Display for Products

Auto-selecting appropriate size charts based on category, item type, and gender

Size ChartShopifyMetafieldsE-commerce
1

Size Chart Selection Logic

Priority-based mapping rules and exception handling mechanisms

2

Size Chart Data Structure

JSON file management, normalization processing, and dynamic mapping with KV store

3

Size Guide Checker Mechanism

Calculating recommended sizes from height and chest measurements to support purchases

B2B Auto-Discount & Invoice Payment System

Code-change-free B2B pricing using customer tags and coupon integration

B2BMember PricingAuto DiscountInvoice Payment
1

B2B Auto-Discount System Overview

Implementing automatic B2B discounts and invoice payment in headless e-commerce

2

Shopify B2B Discount Configuration

Step-by-step guide for customer tags, segments, collections, and coupons

3

Headless Implementation & Invoice Payment

Tag reading, price calculation, auto-coupon application, and draft orders

Shopify Cart API Integration

Page-transition-free cart operations via Shopify Storefront API

ShopifyCart APIAjaxUX Improvement
1

What is an Ajax Cart?

Understanding stress-free shopping experiences without page reloads

2

Cart UX Improvement Points

Ajax cart benefits by the numbers and thoughtful details that delight customers

3

Implementing Shopify Cart API

Practical guide to Storefront API mutations and state management

Cloudinary Image Delivery Optimization

Solving headless EC image load problems with Cloudinary

CloudinaryCDNImage OptimizationCost Reduction
1

The Image Delivery Problem in Headless EC

Why hosting server load and costs increase, and how it impacts your business

2

Image Optimization with Cloudinary

Offload image transformation and delivery to a specialized service

3

Building the Shopify → Cloudinary Flow

From image sync to Next.js display—the complete implementation guide

Fast Page Loading with Next.js ISR

Improve EC site performance with static generation and automatic updates

ISRNext.jsStatic GenerationPerformance
1

What is ISR?

A Next.js feature combining static generation with dynamic updates

2

Fast Loading with ISR

Improve Core Web Vitals and reduce API calls with cache delivery

3

How ISR Works

Cache control with revalidate settings and On-Demand ISR

EC Site Product Filter Design

Flexible product filtering combining custom fields and price ranges

FilterMetafieldShopifyUX
1

Filtering with Custom Fields

Use Shopify Metafields to manage product attributes and enable flexible filtering

2

How Price Range Filters Work

Centralized price range definitions for easy management and user-friendly filters

Product Recommendation Design

Improve customer shopping experience with coordination suggestions and related products

RecommendationCoordinationRelated ProductsUX
1

How Coordination Suggestions Work

The "Complete the Fit" feature that matches products from different categories

2

Related Product Display Logic

Select and display products from the same category that help with comparison

Running Multiple Sites with One Shopify

Efficient multi-site architecture using sales channels and inventory management

Multi-siteSales ChannelInventoryShopify
1

Sales Channel Control

Using Shopify sales channels to display different products per site

2

Multi-Warehouse Inventory Management

Multi-location inventory management using domestic and overseas warehouses

Other Categories

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

AI-Powered Site Development & DeploymentHubSpot CRM/CMS Setup & External Integration