Static Component/
Dynamic Data Design Architecture

Build scalable commerce experiences with Webflow exports, vanilla CSS/HTML/JS, and dynamic data through Workers, Xano, n8n, and Universal Commerce Protocol

Core Principles

Static Components

Webflow exports pure HTML/CSS components with no build step. Components are static files that load instantly and work offline.

  • Zero JavaScript frameworks
  • Vanilla CSS styling
  • File-based architecture

Dynamic Data

Alpine.js connects static components to live data through Cloudflare Workers, Xano middleware, and Shopify Meta Objects.

  • Real-time API binding
  • AI-powered enrichment
  • Background sync queues

UCP Integration

Universal Commerce Protocol exposes standardized capabilities for AI agent discovery and autonomous commerce operations.

  • Product Discovery
  • Cart & Checkout
  • Identity linking

Data Flow Overview

1

Webflow Export

Static HTML/CSS components with Alpine.js data binding attributes

2

Cloudflare Workers

Edge-based routing, caching, and API proxying with sub-50ms latency

3

Xano Middleware + AI

API orchestration with OpenAI GPT-4o for real-time enrichment (200-500ms)

4

Shopify Meta Objects

Persistent data storage for customer preferences, consent, and AI segments

5

n8n Automation

Background workflows, scheduled tasks, and BigQuery data streaming

6

GTM/GA4 Events

Client-side tracking for analytics, remarketing, and conversion optimization

7

UCP Endpoint

/.well-known/ucp exposes commerce capabilities for AI agent discovery

Technology Stack

Layer Technology Purpose Key Features
Frontend Webflow Export + Alpine.js Static components with reactive data binding No build step, instant load, offline-first
Edge Cloudflare Workers API proxy and edge compute 300+ PoPs, sub-50ms latency, DDoS protection
Middleware Xano + OpenAI API orchestration and AI enrichment Database triggers, webhooks, GPT-4o integration
Commerce Shopify Meta Objects Customer data and consent storage GraphQL API, UCP compliance, JWE tokens
Automation n8n Workflows and background tasks Visual workflows, cron scheduling, BigQuery sync
Analytics GTM/GA4 + BigQuery Event tracking and data warehouse Client-side events, SQL interface, Looker Studio
Deployment Netlify Static hosting with edge functions Instant rollbacks, custom domains, form handling