Develop a theme

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

1. Download the theme #

paysum init my-theme
cd my-theme

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

my-theme/
├── paysum.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 #

paysum 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 paysum preview any time for a fresh one.

3. Publish #

$ paysum publish

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

  Storefront  https://acme.paysum.io

Publish pushes anything you have not uploaded yet, builds the theme on Paysum 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; paysum versions lists what has shipped.