Develop a theme

Download a theme, edit locally with a live preview and publish when it is ready.

1. Download the theme#

openstock init my-theme
cd my-theme

The folder gets every theme file plus an openstock.json that remembers which store it belongs to. Commit both to Git; the .openstock/ folder holds local sync state and is ignored for you.

my-theme/
├── openstock.json        which store this folder belongs to
├── package.json
└── src/
    ├── StorePage.tsx     the storefront entry
    ├── ProductPage.tsx
    ├── styles.css
    └── components/

2. Edit with a live preview#

openstock watch --open

Watch uploads changed files as drafts the moment you save, and the preview reloads itself once the new build is ready. Creating and deleting files works too. Shoppers keep seeing the published version until you publish.

Themes are React with Tailwind CSS. Use the same components and data you see in the dashboard code editor; Themes covers the project layout.

Preview links

Preview links last four hours and work for anyone you send them to, which makes them handy for review. Run openstock preview any time for a fresh one.

3. Publish#

$ openstock publish

  ✓ Pushed 2 files 640ms
  Publish the drafts to Acme Keys? (y/N) › y
  ✓ Version 1793640398740 is live built in 951ms

  Storefront  https://acme.openstock.dev

Publish pushes anything you have not uploaded yet, builds the theme on OpenStock and swaps it in. If the build fails nothing changes and the errors are printed. Undo a release from Store editor → History in the dashboard; openstock versions lists what has shipped.