Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.shoppex.io/llms.txt

Use this file to discover all available pages before exploring further.

Shoppex themes are designed to be edited through an AI assistant — Claude Code, Codex, Cursor, or any other MCP-capable client — over the same set of operations: inspect → apply → preview → publish. This page covers the concept and the boundaries: what works well, what to avoid, and how the workflow is structured. For the concrete step-by-step (install MCP, create API key, first prompt, first publish), follow the tutorial:

Tutorial: Customize your theme with AI

End-to-end walkthrough from a fresh shop to a live theme change.
Easiest start: open your dashboard → Store → Themes, click the ⋯ menu on any theme card, then Edit with AI. The dialog generates a scoped API key, picks your client (Cursor / Claude Code / Claude Desktop / Codex / Windsurf), and gives you the exact terminal commands to wire up the MCP server in seconds — no manual key creation or mcp install step required.

​
What AI is good at on a Shoppex theme

  • Targeted copy changes — homepage headline, CTAs, button labels.
  • Visual tweaks — colors, spacing, button radius, typography.
  • Adding a new static page (e.g. /about).
  • Scaffolding a new section that matches the existing style — testimonials, FAQ, pricing table.
  • Creating a fresh theme from a base theme and adapting it to a brand.

​
What AI is bad at (or risky)

  • “Redesign everything” prompts. AI plans by inferring intent; with a broad prompt it will invent things you didn’t ask for. Keep prompts focused on one section / one attribute.
  • Editing many unrelated files in one shot. Easier to debug and roll back when changes are scoped.
  • Publishing without a preview. The preview step is the safety net — it’s free and fast.

​
The workflow

Every AI session on a theme follows the same shape:
  1. Inspect first. Let the AI read the theme structure before it edits. A blind patch produces worse results than a targeted one.
  2. Apply one focused change. “Change the hero headline” beats “make it look modern”.
  3. Validate + preview. Validate confirms the theme still builds. Preview is a sandboxed render at preview.shoppex.io — your live shop is untouched until you publish.
  4. Iterate on the preview. Looks wrong? Tell the AI what to adjust, re-apply, refresh the preview.
  5. Publish only after review. Publish queues a deploy job; your live shop updates in under a minute.
Backups are created at theme version upgrades and official-theme restores — so for day-to-day publishes, your safety net is the preview step, not rollback after.

​
Base themes you can fork from

  • default — clean, neutral starting point. Best for most.
  • classic — traditional storefront layout with a generous hero.
  • nebula — dark-mode-first.
  • pulse — bold, marketing-style.
Start from default if you’re not sure — most customizations work cleanly on top of it.

​
Sample prompts that work

Inspect my theme and tell me which file controls the homepage hero.
Don't change anything yet.

Change only the hero headline and CTA button color.
Keep the rest of the page identical.

Create a new /about page in the same visual style as the current theme.
Then validate and open a preview.

Add a testimonials section to the homepage, three cards on desktop,
stacked on mobile. Match the existing feature-section style.
Don't publish yet.

Tutorial: AI theme walkthrough

Concrete end-to-end walkthrough with Claude Code.

Quickstart

Run a reference theme locally before you start customizing it.

AI Theme Workflows

More advanced CLI and MCP patterns.

Editing Themes

The unified workflow reference across dashboard, CLI, Dev API, and MCP.