Theme manifest, CSS and JavaScript assets

Each theme has a theme.json file in its root directory.

Field	Purpose
key	Lowercase letters, digits, underscores or hyphens; match the theme directory name.
name	Display name in the backoffice theme selection.
version	Your theme’s release identifier.
description, author	Descriptive package metadata.
parentTheme	Optional installed parent whose templates and assets your theme inherits.
assets.stylesheets, assets.scripts	Arrays of CSS or JavaScript URLs loaded across pages.
assets.pageStylesheets, assets.pageScripts	URL arrays keyed by logical page path, such as pages/product.cfm.

Add CSS to a child theme

For the homepage from Getting started, save this as assets/css/theme.css:

.example-home { padding: 3rem; background: #f6f3ec; color: #243c34; }
.example-home h1 { font-family: Georgia, serif; }

Register the stylesheet in your manifest:

{
  "key": "example",
  "name": "Example Theme",
  "version": "1.0.0",
  "parentTheme": "default",
  "assets": {
    "stylesheets": ["/theme/{themeKey}/theme-css?v=1.0.0"]
  }
}

{themeKey} resolves to the key of the theme declaring the asset. Parent assets load before child assets; identical resolved URLs appear once. Empty arrays do not remove inherited assets. The inherited layout renders the prepared asset lists automatically.

Supported asset routes

These routes serve files from the named theme without requiring direct browser access to its template directory:

URL suffix after /theme/{themeKey}/	File inside your theme
theme-css	assets/css/theme.css
theme-js	assets/js/theme.js
category-js	assets/js/category.js
product-detail-js	assets/js/product-detail.js
checkout-js	assets/js/checkout.js
settings-css	Generated CSS for the current shop’s theme settings; not a package file.

The file routes read the named theme’s file directly. They do not search parent themes for missing asset files. Use these routes for bundled CSS and JavaScript; do not assume that arbitrary files under /themes/ are publicly served by your installation.

For a product-only script, add this to assets:

"pageScripts": {
  "pages/product.cfm": ["/theme/{themeKey}/product-detail-js?v=1.0.0"]
}

Only register scripts you provide. If your child theme inherits product behaviour, avoid loading a second copy of the same interaction code.

Custom layouts

A custom layout renders viewModel.theme.stylesheets in the document head and viewModel.theme.scripts once in their supplied order. Encode each URL as an HTML attribute. Use the layout reference and the example layout for the complete document structure, including request.pageContent.

Asset updates

Build assets before deploying. NetSeller serves the resulting files; it does not run your bundler. Change a URL suffix such as ?v=1.0.0 to ?v=1.0.1 when publishing changed content, then reinitialize the application to refresh the manifest. Changing only the manifest’s version does not rewrite asset URLs.