Download and install the reference theme

The reference theme contains its own 41 CFM files, styles and scripts. It has no parentTheme. Version 1.1 demonstrates NetSeller Branded using the fictional NORDLYN identity. It reuses the storefront structure and gives its components a distinct visual treatment.

Download reference-theme.zip · SHA-256

Use this package as a starting point for your own presentation. See Compatibility and limitations for fallback behaviour and the example’s reservation-notice and file-input differences.

Install

Upload the ZIP through Settings → Theme packages, then follow Install and activate. Select NORDLYN Branded Reference for the target shop. The package key and directory name are reference.

Package structure

reference/
  theme.json
  layouts/storefront.cfm
  pages/
  partials/
  assets/css/
  assets/js/
  assets/vendor/bootstrap-5.3.3/
  README.md
  THIRD-PARTY-NOTICES.md

All library files are local. Bootstrap 5.3.3 and its bundled Popper code retain their license notices. No CDN, remote font or default-theme asset is required.

The package uses the prepared theme asset URLs. Its styles and scripts are served through /theme/reference/... routes, which work with the standard storefront web root. The manifest selects category, product and checkout scripts where needed.

Branded presentation

• Forest-colour navigation and warm paper surfaces.
• System serif headings paired with sans-serif controls.
• Split homepage hero, with stacked image and copy on mobile.
• Inset product photography, bordered cards and rounded actions.
• Matching product details, account forms, cart and checkout surfaces.

The design rules live in assets/css/reference.css. The build combines them with the bundled component styles into assets/css/theme.css. Edit the source stylesheet and rebuild as shown below; do not edit the generated bundle. Product content, forms and commerce behaviour still use the prepared storefront model.

Examples to read

Task	Example
Complete document and shared navigation	layouts/storefront.cfm
Render configured homepage sections	pages/index.cfm
Reuse one product card	partials/product_card.cfm
Replace listing content after filters change	pages/category_items.cfm, assets/js/category.js
Preserve prepared variant data	pages/product.cfm, assets/js/product-detail.js
Submit account and checkout forms	pages/account.cfm, pages/checkout.cfm

CSS classes and JavaScript selectors are owned by this package. Other themes can use different markup, provided they preserve the prepared data, URLs and form behaviour.

Media custom fields use a native file input. The browser supplies its file-picker text; the server validates uploaded files. The package does not duplicate upload business rules.

Make it your own

1. Copy the extracted reference folder to a new folder, for example alpine.
2. Set key to alpine in theme.json; set your own name, author and version.
3. In the CFM templates, change the fallback theme-key literals "reference" to "alpine" and fallback paths /themes/reference/ to /themes/alpine/. Keep resolver calls and prepared URLs intact.
4. Keep {themeKey} placeholders in manifest asset URLs. They resolve to your new key.
5. Change assets/css/reference.css for colours, typography, spacing and component styling. The filename can stay unchanged.
6. Rebuild the bundles, then install and activate your new package.

Shop names, product images and homepage content come from the shop configuration. NORDLYN’s demo catalog is not part of the download.

Rebuild the bundles

The ZIP includes both source files and ready-to-use bundles. To rebuild after editing the CSS or JavaScript sources, save the following as build-assets.mjs in your theme folder. It uses Node.js and needs no additional packages.

import { readFile, writeFile } from 'node:fs/promises';

const root = new URL('./assets/', import.meta.url);
const bundles = {
  'css/theme.css': [
    'vendor/bootstrap-5.3.3/bootstrap.min.css',
    'css/storefront.css',
    'css/reference.css',
  ],
  'js/theme.js': [
    'vendor/bootstrap-5.3.3/bootstrap.bundle.min.js',
    'js/storefront.js',
  ],
};

for (const [output, inputs] of Object.entries(bundles)) {
  const parts = await Promise.all(
    inputs.map(file => readFile(new URL(file, root), 'utf8'))
  );
  await writeFile(new URL(output, root), parts.map(part => part.trimEnd()).join('\n') + '\n');
}

Run node build-assets.mjs. The page-specific scripts, such as category.js and product-detail.js, are served separately and are not part of theme.js. Keep the bundled third-party license notices when distributing your theme.