A complete guide to independent website development

What is an independent website?

An independent website is a self-built e-commerce website with full control over merchants, which is different from the store model of third-party platforms. The domain name, server, data, and users of the independent website are all owned by the merchant, and the merchant can freely decide the website design, marketing strategy, pricing system and customer reach method.

The core characteristics of independent websites

Independent Sites vs Third-Party Platforms

Why choose an independent website?

DTC brand overseas trend

The global DTC (Direct-to-Consumer) market has exceeded 10 billion in 2024, with an annual growth rate of more than 25%. More and more brands are aware of the risks of relying on platforms - the wave of account bans, bidding involution, and profit compression - independent stations have become the only way for brands to develop in the long term.

Detailed explanation of the core advantages of independent websites

• CLV maximization: Continuously reach customers through email marketing, membership systems, and loyalty programs, and the customer lifetime value (CLV) is 3-5 times higher than that of the platform
• Data-driven growth: Gain complete user journey data for precise lookalike advertising, retargeting, and A/B testing optimization
• Optimize the profit structure: Eliminate 15-45% platform commissions and increase profit margins by 20-40 percentage points, freeing up more budget space for advertising
• Risk resistance: Do not rely on single platform rules to avoid revenue cliff caused by policy changes/algorithm adjustments/competitive spoofing
• Brand premium space: Independent websites carry brand stories, user reviews, and professional content to support higher pricing and brand recognition
• M&A exit value: Independent websites with their own traffic and customer data have a much higher valuation than seller accounts that rely on the platform

Comparison of website building plans

According to the team's technical capabilities, budget and business needs, there are various options for independent website construction:

Shopify ecosystem explained in detail

Headless Commerce architecture benefits

• Ultimate performance: Front-end SSG/ISR generates static pages, distributed globally via CDN, TTFB < 100ms
• Omni-channel unification: The same set of back-end APIs supports multi-terminal sales of Web, App, Mini Program, POS, and IoT
• Technical freedom: The front-end can use any framework such as Next.js/Nuxt/Remix, regardless of the website building platform template
• A/B testing friendly: The front-end is deployed independently, allowing for quick experiments on different page layouts/copywriting/processes
• Progressive migration: You can gradually replace the Shopify frontend with a custom Storefront without the backend unchanged

Technical architecture design

The technical architecture of a high-performance standalone server needs to balance development efficiency, user experience, and scalability:

Core module disassembly

Front-end development practices

The front-end of an independent website directly affects user experience and conversion rates – page speed, interaction fluency, and visual design are the core metrics.

Next.js E-commerce front-end architecture

// app/products/[slug]/page.tsx - 商品详情页（Next.js App Router）
import { getProduct, getRelatedProducts } from '@/lib/api';
import { ProductGallery } from '@/components/product/Gallery';
import { ProductInfo } from '@/components/product/Info';
import { AddToCart } from '@/components/cart/AddToCart';
import { ReviewSection } from '@/components/product/Reviews';

// ISR: 每 60 秒重新验证，兼顾性能与实时性
export const revalidate = 60;

// 生成静态路径（热门商品预构建）
export async function generateStaticParams() {
  const products = await getTopProducts(100);
  return products.map(p => ({ slug: p.slug }));
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.slug);
  const related = await getRelatedProducts(product.categoryId, 4);

  // 结构化数据 (JSON-LD) - 提升 SEO 富文本展示
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.title,
    image: product.images,
    description: product.description,
    offers: {
      '@type': 'Offer',
      price: product.price,
      priceCurrency: product.currency,
      availability: product.inStock
        ? 'https://schema.org/InStock'
        : 'https://schema.org/OutOfStock',
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: product.rating,
      reviewCount: product.reviewCount,
    },
  };

  return (
    <>
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <div className="product-layout">
        <ProductGallery images={product.images} />
        <div className="product-details">
          <ProductInfo product={product} />
          <AddToCart product={product} />
        </div>
      </div>
      <ReviewSection productId={product.id} />
      <RelatedProducts items={related} />
    </>
  );
}

Cart status management

// lib/cart-store.ts - Zustand 购物车状态管理
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartItem {
  productId: string;
  variantId: string;
  title: string;
  price: number;
  quantity: number;
  image: string;
}

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (variantId: string) => void;
  updateQuantity: (variantId: string, qty: number) => void;
  clearCart: () => void;
  totalItems: () => number;
  totalPrice: () => number;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) => set((state) => {
        const existing = state.items.find(i => i.variantId === item.variantId);
        if (existing) {
          return {
            items: state.items.map(i =>
              i.variantId === item.variantId
                ? { ...i, quantity: i.quantity + item.quantity }
                : i
            ),
          };
        }
        return { items: [...state.items, item] };
      }),
      removeItem: (variantId) => set((state) => ({
        items: state.items.filter(i => i.variantId !== variantId),
      })),
      updateQuantity: (variantId, qty) => set((state) => ({
        items: state.items.map(i =>
          i.variantId === variantId ? { ...i, quantity: Math.max(1, qty) } : i
        ),
      })),
      clearCart: () => set({ items: [] }),
      totalItems: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
      totalPrice: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
    }),
    { name: 'cart-storage' }
  )
);

Front-end performance optimization checklist

• Image optimization: WebP/AVIF format + responsive srcset + lazy loading + CDN intelligent cropping, image size reduction by 60-80%
• Code splitting: routing-level dynamic import + component-level React.lazy, and the above-the-fold JS is controlled within 150KB
• Skeleton Screen/Streaming:Next.js Suspense + Streaming Rendering, FCP < 1s, LCP < 2.5s
• Preload policies:hover, preload the next page data (prefetch), and open it in seconds after clicking
• Service Worker: Cache static resources + product lists offline, and can still be browsed in weak network environments
• Web Vitals monitoring: Real-time tracking of CLS/LCP/FID/INP, automatic alarm for abnormalities

Backend and database design

The backend of the independent website needs to handle high concurrent orders, complex promotion rules, and multi-channel inventory synchronization.

Order status machine design

// order/order-state-machine.ts - 订单状态流转
enum OrderStatus {
  PENDING_PAYMENT = 'pending_payment',   // 待支付
  PAID = 'paid',                         // 已支付
  PROCESSING = 'processing',             // 处理中
  SHIPPED = 'shipped',                   // 已发货
  DELIVERED = 'delivered',               // 已签收
  COMPLETED = 'completed',              // 已完成
  CANCELLED = 'cancelled',              // 已取消
  REFUND_REQUESTED = 'refund_requested', // 退款申请
  REFUNDED = 'refunded',                // 已退款
}

const ORDER_TRANSITIONS: Record<OrderStatus, OrderStatus[]> = {
  [OrderStatus.PENDING_PAYMENT]: [OrderStatus.PAID, OrderStatus.CANCELLED],
  [OrderStatus.PAID]: [OrderStatus.PROCESSING, OrderStatus.REFUND_REQUESTED],
  [OrderStatus.PROCESSING]: [OrderStatus.SHIPPED, OrderStatus.REFUND_REQUESTED],
  [OrderStatus.SHIPPED]: [OrderStatus.DELIVERED],
  [OrderStatus.DELIVERED]: [OrderStatus.COMPLETED, OrderStatus.REFUND_REQUESTED],
  [OrderStatus.COMPLETED]: [OrderStatus.REFUND_REQUESTED],
  [OrderStatus.CANCELLED]: [],
  [OrderStatus.REFUND_REQUESTED]: [OrderStatus.REFUNDED, OrderStatus.PROCESSING],
  [OrderStatus.REFUNDED]: [],
};

class OrderService {
  async transitionOrder(orderId: string, newStatus: OrderStatus) {
    const order = await this.orderRepo.findById(orderId);
    const allowedTransitions = ORDER_TRANSITIONS[order.status];

    if (!allowedTransitions.includes(newStatus)) {
      throw new Error(`Cannot transition from ${order.status} to ${newStatus}`);
    }

    // 状态变更副作用
    switch (newStatus) {
      case OrderStatus.PAID:
        await this.inventoryService.lockStock(order.items);
        await this.notificationService.sendOrderConfirmation(order);
        break;
      case OrderStatus.SHIPPED:
        await this.notificationService.sendShippingNotification(order);
        await this.trackingService.createTracking(order);
        break;
      case OrderStatus.CANCELLED:
        await this.inventoryService.releaseStock(order.items);
        await this.paymentService.refund(order.paymentId);
        break;
    }

    await this.orderRepo.updateStatus(orderId, newStatus);
    await this.eventBus.publish('order.status_changed', { orderId, newStatus });
  }
}

Database table structure (core table)

-- 商品表 (SPU)
CREATE TABLE products (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title VARCHAR(500) NOT NULL,
  slug VARCHAR(500) UNIQUE NOT NULL,
  description TEXT,
  category_id UUID REFERENCES categories(id),
  brand VARCHAR(200),
  status VARCHAR(20) DEFAULT 'draft', -- draft/active/archived
  seo_title VARCHAR(200),
  seo_description VARCHAR(500),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- 商品变体表 (SKU)
CREATE TABLE product_variants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  product_id UUID REFERENCES products(id) ON DELETE CASCADE,
  sku VARCHAR(100) UNIQUE NOT NULL,
  title VARCHAR(300),
  price DECIMAL(10,2) NOT NULL,
  compare_at_price DECIMAL(10,2),  -- 划线价
  cost_price DECIMAL(10,2),        -- 成本价
  weight DECIMAL(8,2),
  inventory_quantity INT DEFAULT 0,
  options JSONB,  -- {"color": "Black", "size": "M"}
  images TEXT[],
  is_active BOOLEAN DEFAULT true
);

-- 订单表
CREATE TABLE orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  order_number VARCHAR(50) UNIQUE NOT NULL,
  customer_id UUID REFERENCES customers(id),
  status VARCHAR(30) DEFAULT 'pending_payment',
  subtotal DECIMAL(12,2) NOT NULL,
  discount_total DECIMAL(12,2) DEFAULT 0,
  shipping_total DECIMAL(12,2) DEFAULT 0,
  tax_total DECIMAL(12,2) DEFAULT 0,
  grand_total DECIMAL(12,2) NOT NULL,
  currency VARCHAR(3) DEFAULT 'USD',
  shipping_address JSONB,
  billing_address JSONB,
  payment_method VARCHAR(50),
  payment_id VARCHAR(200),
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 订单行项表
CREATE TABLE order_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
  variant_id UUID REFERENCES product_variants(id),
  title VARCHAR(500),
  sku VARCHAR(100),
  quantity INT NOT NULL,
  unit_price DECIMAL(10,2) NOT NULL,
  total_price DECIMAL(12,2) NOT NULL,
  options JSONB
);

Payment system integration

Payment is the core functional module of an independent website - it directly affects conversion rates and customer trust. Multi-country/multi-payment methods are required.

Comparison of global payment gateways

Example of Stripe payment integration

// api/checkout/route.ts - Stripe Checkout Session
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function POST(req: Request) {
  const { items, customerEmail, shippingAddress } = await req.json();

  // 创建 Checkout Session
  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    customer_email: customerEmail,
    line_items: items.map(item => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.title,
          images: [item.image],
          metadata: { sku: item.sku },
        },
        unit_amount: Math.round(item.price * 100), // 分为单位
      },
      quantity: item.quantity,
    })),
    shipping_options: [
      { shipping_rate: 'shr_standard' },   // 标准运费
      { shipping_rate: 'shr_express' },    // 加急运费
    ],
    payment_method_types: ['card', 'alipay', 'klarna'],
    success_url: `${process.env.SITE_URL}/order/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.SITE_URL}/cart`,
    metadata: {
      order_source: 'web',
      shipping_address: JSON.stringify(shippingAddress),
    },
  });

  return Response.json({ url: session.url });
}

// Webhook 处理支付成功回调
// api/webhooks/stripe/route.ts
export async function POST(req: Request) {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature');
  const event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET);

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      await orderService.confirmPayment(session.metadata.orderId, session.payment_intent);
      await emailService.sendOrderConfirmation(session.customer_email);
      break;
    case 'charge.refunded':
      await orderService.processRefund(event.data.object.metadata.orderId);
      break;
  }

  return new Response('OK', { status: 200 });
}

Logistics & Warehousing Systems

The logistics system of cross-border independent stations directly affects customer experience and return rate - it is necessary to establish an intelligent scheduling system with multiple warehouses and carriers.

Logistics solution selection

Logistics API integration

• EasyPost / Shippo: Multi-carrier rate comparison + unified face order printing + logistics tracking aggregation
• ShipBob / Deliverr: 3PL service for overseas warehouses, automatic warehouse subdivision and 2-day delivery commitment
• 17Track / AfterShip: Global logistics tracking, automatic tracking email/SMS notifications
• Tariff calculation: Zonos / Avalara automatically calculates the tariff of the destination country, and DDP is transparently displayed at checkout

SEO optimization strategies

SEO is the core channel for low-cost customer acquisition for independent websites - organic search traffic accounts for 40-60% of the total traffic of high-quality independent websites.

E-commerce SEO core elements

Ecommerce Schema structured data

<!-- Product Schema - 商品富文本搜索结果 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ultra-Slim Wireless Earbuds Pro",
  "image": ["https://example.com/photos/earbuds-1.jpg"],
  "description": "Premium wireless earbuds with ANC...",
  "brand": { "@type": "Brand", "name": "TechBrand" },
  "sku": "TB-EARBUDS-PRO-BLK",
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/earbuds-pro",
    "priceCurrency": "USD",
    "price": "129.99",
    "priceValidUntil": "2025-12-31",
    "availability": "https://schema.org/InStock",
    "seller": { "@type": "Organization", "name": "TechBrand Official" }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "1284"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Alex M." },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Best earbuds I've ever owned..."
  }]
}
</script>

URL structure best practices

• Product page:/products/[slug] — Flat structure with target keywords
• Category page:/collections/[category] — Landing pages for long-tail keywords
• blog page:/blog/[post-slug] — Informational keyword undertaking page
• avoid:?id=123 dynamic parameters, /p/12345 no semantic short chains, too deep nested hierarchies
• Canonical: Variant products are set to canonical to point to the main URL to avoid duplicate content

Multilingual and multi-currency

Global independent sites must be multilingual and multi-currency – 85% of consumers prefer to browse in their native language and pay in their local currency.

Multilingual implementation solution

Multi-currency and exchange rate processing

// lib/currency.ts - 多币种价格转换
interface CurrencyConfig {
  code: string;
  symbol: string;
  decimalPlaces: number;
  rate: number; // 相对 USD 的汇率
}

const CURRENCIES: Record<string, CurrencyConfig> = {
  USD: { code: 'USD', symbol: '

, decimalPlaces: 2, rate: 1 },
  EUR: { code: 'EUR', symbol: '€', decimalPlaces: 2, rate: 0.92 },
  GBP: { code: 'GBP', symbol: '£', decimalPlaces: 2, rate: 0.79 },
  JPY: { code: 'JPY', symbol: '¥', decimalPlaces: 0, rate: 155.2 },
  CNY: { code: 'CNY', symbol: '¥', decimalPlaces: 2, rate: 7.24 },
  KRW: { code: 'KRW', symbol: '₩', decimalPlaces: 0, rate: 1365 },
};

export function convertPrice(priceUSD: number, targetCurrency: string): string {
  const config = CURRENCIES[targetCurrency] || CURRENCIES.USD;
  const converted = priceUSD * config.rate;

  // 心理定价：末尾取整到 .99 或 .95
  const rounded = Math.ceil(converted) - 0.01;

  return new Intl.NumberFormat(undefined, {
    style: 'currency',
    currency: config.code,
    minimumFractionDigits: config.decimalPlaces,
    maximumFractionDigits: config.decimalPlaces,
  }).format(rounded);
}

// 自动检测用户地区并设置默认货币
export function detectCurrency(headers: Headers): string {
  const country = headers.get('cf-ipcountry') || 'US';
  const countryToCurrency: Record<string, string> = {
    US: 'USD', GB: 'GBP', DE: 'EUR', FR: 'EUR',
    JP: 'JPY', CN: 'CNY', KR: 'KRW',
  };
  return countryToCurrency[country] || 'USD';
}

Security and compliance

E-commerce sites handle sensitive payments and personal data – security breaches can lead to hefty fines and a collapse of brand trust.

Safety protection layer

List of common security measures

• HTTPS is site-wide: TLS encryption for all pages, HSTS header enabled, and auto-renewal of certificates
• CSP content security policies: Strictly restrict loadable script/style sources to prevent XSS injection
• Input verification double validation: Front-end + back-end verify all user inputs at the same time to prevent bypass
• SQL injection protection: All use parametric queries/ORMs, and prohibit string splicing SQL
• Rate limiting: Login API 5 times/minute, API 100 times/minute, checkout 10 times/minute
• Sensitive data encryption:P II field AES-256 encrypted storage, database encrypted at-rest
• Minimize access rights:RBAC role permission control, enforced 2FA in the management backend

Optimize

For every 1 second increase in page load speed, the conversion rate drops by 7%. Independent performance optimization is directly related to GMV.

Performance metric targets

Core optimization methods

• SSG + ISR: Static generation of product pages + incremental regeneration, CDN edge cache hit rate > 95%
• Image responsive loading:Next/Image Auto Crop + WebP/AVIF + sizes attribute adaptation
• Third-party scripting is asynchronous: Google Analytics/Facebook Pixel loaded using partytown or web worker
• Key CSS inline: Above-the-fold style inline to HTML, non-critical CSS asynchronous loading
• Database query optimization: Product listing index override, N+1 query elimination, Redis hotspot caching
• Edge computingCloudflare Workers / Vercel Edge Functions handle logic such as geolocation, AB testing, etc

Data Analytics & Marketing

Data-driven is the engine of continuous growth of independent websites - from traffic acquisition to repurchase promotion, every link needs data to guide decision-making.

Core Data Indicators (KPIs)

Marketing automation system

Recommended technology stack

Development process

Based on the NovaLinkR team's experience in delivering independent website projects, the following development processes are recommended: