📦 Theme documentation

From zip to live store
in ten minutes.

Every njX theme follows the same layout, the same commerce layer and the same two-variable Shopify hookup — learn it once, use it for any theme.

Guide
Unzip, install, run the demo on mock data
Install & run

Demo running in 3 steps

1
Unzip & install
Your purchase email contains the theme archive. Node.js 18+ is the only prerequisite. 
unzip astro-njx-<theme>-v1.0.zip
cd astro-njx-<theme>
npm install
2
Run the demo
No keys, no accounts — the theme ships with a full mock catalog, so everything works out of the box: filters, cart, checkout flow, the customer account. 
npm run dev
# → http://localhost:4321 — full demo catalog, cart,
#   filters and account run on bundled mock data
3
Build for production
The output is a fully static site — fast, cheap to host and easy to cache. 
npm run build
# → static site in dist/ — ready for any hosting
Go live

Connect your Shopify store
with two variables

1
Create a Storefront API token
In Shopify admin: Settings → Apps and sales channels → Develop apps → Create an app. Under API credentials enable the Storefront API scopes (unauthenticated_read_product_listings, unauthenticated_read_checkouts), install the app and copy the Storefront access token.
2
Set the env vars
Copy .env.example to .env and fill in your store domain and token — that is the entire integration. 
# .env  (copy from .env.example)
COMMERCE_PROVIDER=shopify
PUBLIC_SHOPIFY_DOMAIN=your-store.myshopify.com
PUBLIC_SHOPIFY_STOREFRONT_TOKEN=shpat_xxxxxxxxxxxx
3
Rebuild — your catalog is live
npm run build now pulls products, collections, prices and stock from your store. Product pages are generated per item, and checkout hands off to Shopify's hosted checkout — payments, taxes and shipping stay on Shopify.
Remove the variables (or set COMMERCE_PROVIDER=mock) to switch back to demo data at any time.
Under the hood

One commerce API —
mock and Shopify speak it

Provider-agnostic contract
Every page talks to a single typed interface. Swapping the demo catalog for your live store is a config change, not a refactor — the same code renders both. 
// src/lib/commerce — one contract, two providers
export interface CommerceProvider {
  listProducts(opts?: { collection?: string }): Promise<Product[]>;
  getProduct(handle: string): Promise<Product | null>;
  listCollections(): Promise<Collection[]>;
  checkoutUrl(lines: CartLine[]): Promise<string>;
}

// pages never import a provider directly:
const products = await commerce.listProducts();
// COMMERCE_PROVIDER=mock    → bundled JSON catalog
// COMMERCE_PROVIDER=shopify → Storefront GraphQL API
Client state & the account
Cart, wishlist and compare live in persisted nanostores; components communicate over CustomEvents. The customer account works two ways: instant mock sign-in for demos, or real Shopify customer accounts via the Storefront API — login, order history, one-click reorder. 
// client state — nanostores, persisted to localStorage
import { cartLines, addLine } from '../lib/cart';
import { favorites, toggleFavorite } from '../lib/favorites';

// UI talks through events, never window globals:
document.dispatchEvent(
  new CustomEvent('theme:add', { detail: cartLine })
);
Deploy

Host it anywhere static files live

Cloudflare Pages (recommended)
Free tier, global CDN, one command. All our demos run on it. 
npm run build
npx wrangler pages deploy dist --project-name my-store
# → https://my-store.pages.dev (attach your domain in the dashboard)
Netlify · Vercel · anything
The build is plain HTML/CSS/JS in dist/ — no server, no functions required. 
# Netlify:  build command "npm run build", publish directory "dist"
# Vercel:   framework preset "Astro" — zero config
# Any host: dist/ is plain static files — upload anywhere
Customize

Rebrand in two files

Design tokens
Colors, fonts and radii live in one @theme block — change a few variables and the whole theme follows, including hovers, gradients and glows. 
/* src/styles/global.css — one @theme block drives the whole look */
@theme {
  --color-base: #100c09;   /* page background   */
  --color-a1:   #ff9a1f;   /* primary accent    */
  --color-a2:   #ff4d1f;   /* gradient partner  */
  --font-display: 'Cormorant Garamond', serif;
}
Everything else
Texts & brand — src/constants/ (header, footer, page copy)
Demo catalog — src/data/mock-catalog.json
Product photos — public/products/
Analytics — set PUBLIC_GA4_ID, events fire automatically
Demo-only bits — blocks marked demo-only in Layout.astro are safe to delete for production 
# .env — optional analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
# GA4 ecommerce events (view_item, add_to_cart, begin_checkout)
# fire automatically once the id is set
Support

Stuck? We answer within a day

Every license includes 12 months of updates and email support for defects and setup questions per this documentation. Write to our contact page or reply to your purchase email — include your theme name and what you tried, and we'll get you unstuck.