Help centre / For developers

Build a theme

Make a storefront theme with Handlebars and the Theme Dev Kit, test it on a sample store and submit it.

A BazaarSaaS theme decides how a store looks. The platform does everything else — prices, GST, stock, cart, checkout, payments, sign-in, SEO tags, analytics and consent — so a theme is only templates, styles and images. Merchants customise it without code: colours and fonts, theme settings, and which sections appear on each page.

What you need

  • Basic HTML, CSS and a little JavaScript. Templates use Handlebars ({{product.title}}, {{#each}}).
  • The Theme Dev Kit — ask us for it. It's one zip with:
    • THEME_SPEC.md — the complete contract: package layout, manifest, pages, sections, settings, the data every template receives, helpers, languages, rules and the acceptance checklist,
    • JSON schemas for every file, sample data captured from a real store,
    • a complete, commented starter theme,
    • the bazaar-theme command-line tool (a .NET tool — install the .NET 10 SDK first).

You don't need the BazaarSaaS source code or a server.

The workflow

Install the tool once from the kit's tool folder:

dotnet tool install --global BazaarSaaS.ThemeKit --add-source ./tool

Then:

bazaar-theme init my-theme        # copy the starter theme into ./my-theme
bazaar-theme serve my-theme       # preview on a sample store; reloads as you save
bazaar-theme validate my-theme    # every rule, every page in English, Hindi and Urdu
bazaar-theme package my-theme     # the .zip you submit

What's in a theme

my-theme/
├── theme.json        manifest: id, name, version, settings, design tokens
├── screenshot.png    1200×900 preview for the gallery
├── layout/theme.hbs  the page shell (header, footer, where the page goes)
├── templates/        one JSON file per page: which sections, in what order
├── sections/         each section = <type>.hbs (markup) + <type>.json (its settings)
├── partials/         shared pieces (product card, price…)
├── assets/           CSS, JS, images, fonts
└── locales/          your theme's own words in each language

The theme draws the home, product, collection / category / search, cart and content pages. Checkout, payment, sign-in, account and order tracking are drawn by the platform inside your layout, using the store's colours and fonts — so they always work, whatever the theme.

Rules that keep stores safe and fast

Templates can only read the data passed in and call the listed helpers — no network calls, no file access, no running code on the server. Packages are checked when installed (paths, size, text encoding), and every page must render in every language. The validator tells you exactly which rule failed and where.

Submit it

  1. Run bazaar-theme validate until it passes, then bazaar-theme package.
  2. Send us the zip with screenshots and the kind of shop it suits (contact).
  3. We check it against the acceptance checklist, test it on real stores and either approve it or send notes.
  4. Approved themes appear in every store's theme gallery and Marketplace — free, or paid (one-time) — and stores stay pinned to the version they chose until they update.

Building with AI? The Dev Kit includes a ready prompt — three of our sample themes were built by an AI using only the kit.

Still stuck? Talk to us — we'll help you set it up. Talk to us