Storefront inventory¶

What the Nova-family storefront themes share, and what each one has copied. Measured on 2026-10-28 at development commit 3a72258d7. Use it to decide which components are worth sharing; it records facts, not decisions.

Themes covered: nova, brock, atelier, depot, pop, spec, ridge, diorama, bistro. Every theme except Bistro is layered directly on Nova; Bistro is layered on Brock (Bistro, Brock, Nova), so it inherits Brock's fragments. The legacy Bootstrap theme is out of scope. How a template is found is in Theme resolution.

How the numbers were taken¶

• Changed lines is diff a b | grep -c '^[<>]': lines removed plus lines added, so a one-line edit counts 2.
• vs Nova compares a theme's copy with nova/<same path>. vs Brock compares with brock/<same path>. Brock is the baseline for the copies because the other layered themes were built from it.
• Residual (written n→r) is the Brock diff after normalising each theme's class prefix to THEME in both files (brock-, at-, depot-, pop-, spec-, rg-, dio- and the matching message-key prefix, plus the short b-, d-, p-, sp- forms). A residual of 0 to 4 is the same markup with a rename. The short-prefix rule also rewrites Bootstrap's d-flex, so residuals on pages that use it (merchandisingNode, product, searchResults) are inflated by 2 to 4 lines of rename noise, not real differences.
• CSS counts include every .css file under the theme's css/ folder. Nova's folder includes its extensions/ styles.

1. Fragment fork matrix¶

Each cell is changed lines vs Nova / changed lines vs Brock→residual. A dash means the theme ships no copy. Brock's cell shows only the Nova diff. Template length is Brock's line count.

Chrome fragments (fragment/)¶

Notes on the rows:

• Pagination is five copies of the same file. The residual of 2 is one comment line that names the theme. Nothing else differs.
• Category nav, account status: Depot, Pop and Spec are the same file as Brock after a rename (residual 0). Atelier's copy is a different design.
• Sort dropdown: the only non-rename difference is Atelier's no-JS Apply button, which uses at-btn--ghost where the others use --outline.
• Mini basket: Depot, Pop and Spec match Brock apart from the quantity stepper's class names (THEME-mini__stepper against THEME-stepper) and a clear-basket block Brock has and they lack (see "Behaviour that has drifted").
• Facet rail: Depot and Spec match Brock (residual 2, comments). Pop renders each value as a pill and drops the checkbox glyph, which is a real design difference (residual 5). Atelier's rail differs in structure.
• Footer: Depot, Pop and Spec match Brock except for Brock's footerNotice hook (for Bistro) and its commerceChromeEnabled guard on the payments row.
• Auth head: a copy of Nova's with the theme's own stylesheet and tokens. Brock and Depot are the same file after the rename (residual 2); Atelier and Spec each add about 25 lines.
• Head: Brock's differs from Nova's by only 19 lines (it keeps Nova's structure); every other theme differs from Nova by 58 to 106. The copies agree on the shared parts (viewport, bdgr.css, view transitions, canonical, shop-currency, pageTitles, theme colour) and differ in fonts, stylesheets and theme-specific scripts.
• Nav is the one chrome fragment that is genuinely a per-theme design. Depot and Spec are the closest to Brock (residual 90 and 82 of about 210 lines).

Listing and page templates (top level and blog/)¶

• page.html, product.html, searchResults.html and merchandisingNode.html are thin shells (30 to 60 lines) that pick a layout and include the theme's listing or rail fragment. Four to six copies each are the same file after a rename.
• collection.html is the one top-level template that differs a lot per theme (Spec carries the showcase layout, Depot a list view).
• Ridge's and Diorama's blog templates differ from each other by 16 (list) and 30 (post) lines out of 37 and 46, so they are close to each other as well as to Nova's.
• Nova's own page-3-9.html / page-9-3.html / page-empty.html are forked only by Ridge (page-3-9, page-9-3) and Brock (page-9-3).

Nova fragments no theme forks¶

breadcrumb, checkoutStyles, commerceTokens, content-results, facet-limit, facet-search, flags, gallery-labels, handoverItems, icons, landing-links, quick-filters, responsive-image, search-banner, search-form, search-scope, themeSelect, and all of nova/fragments/ (donationOptions, eventCardLine, fundraiserProgress, lineItemAttributes, quantitySelector).

Forks outside the requested scope¶

The same pattern repeats under productFragment/ and extensions/. Columns are vs Brock→residual.

2. Theme-only fragments¶

Fragments that exist in a theme and have no Nova counterpart.

The -listing, -rail and -icons fragments are forks of Brock's under another name. Changed lines against Brock's after normalising the prefix:

The icon files differ mainly in the stroke path data. Ridge and Diorama have no listing, rail or pager fragments.

3. Component families by class¶

Counts are distinct class names in the theme's own CSS folder and occurrences in its own template folder (the prefix is in brackets).

Buttons¶

Every layered theme's stylesheet also restyles .nova-btn (6 to 18 rules each, Diorama 18), because Nova's checkout, account and extension templates use nova-btn whatever the theme.

Brock, Depot, Pop and Spec share a modifier vocabulary (--buy, --ink, --outline, --quiet, --lg, --sm, --block); Depot and Spec also share --pri and --dark.

Cards, chips, badges, inputs, pagers, drawers¶

Distinct classes whose name contains the word (any BEM part), then template occurrences in the theme's own folder.

Total distinct own-prefix classes in CSS: Nova 491, Brock 409, Depot 288, Atelier 275, Pop 294, Spec 309, Ridge 149, Diorama 68, Bistro 55. CSS lines: Nova 7,272, Brock 2,373, Atelier 1,732, Depot 2,241, Pop 2,624, Spec 2,933, Ridge 860, Diorama 1,722, Bistro 254.

Reading the table: Brock, Atelier, Depot, Pop and Spec carry the same block set (pager, drawer, select, card, badge, chip) with the same counts, which is what a rename of one design looks like. Ridge and Diorama are content-site themes: no shop widgets, but each has its own drawer and buttons.

4. Tokens per theme¶

"Semantic" means the 79 tokens Nova defines on :root (--color-* 37, --font-* 18, --space-* 13, --radius-* 6, --shadow-* 5). "Re-pointed" means set again on :root, html or body in the theme's stylesheet. The --nb-* basket tokens are the public component tokens declared in nova/fragment/commerceTokens.html (35) plus seven read directly by the full basket and unified checkout templates (--nb-bar-bg, --nb-item-title-size, --nb-item-title-size-lg, --nb-item-title-weight, --nb-legend-size, --nb-sticky-top, --nb-total-weight).

• No theme re-points any --space-* token, and none re-points --font-size-*, --font-weight-bold/medium/normal/semibold or --radius-full. These are the tokens Nova's own templates use most (549 --space-* and 190 --font-* uses in Nova's CSS).
• Every theme re-points the colour ramp (--color-primary*, --color-gray-*, status colours), the --shadow-* set and five of six radii. The font family tokens are set by Atelier, Depot, Pop, Spec, Ridge and Diorama.
• Own-prefix styling dominates: the theme's own listing, chrome and card CSS reads its private tokens (222 to 800 uses), not Nova's semantic ones. Ridge's own CSS uses semantic tokens twice.
• Bistro re-points nothing, so it takes Brock's values, and its --nb-ink, --nb-line and --nb-muted are read by no template or stylesheet.
• Public basket tokens (the --nb-* column counts every --nb-* a theme sets, of the 42 above): Atelier 34, Depot 26, Spec 22, Pop and Diorama 18, Brock 12. Ridge sets none (it has no basket). Of the 35 declared in commerceTokens.html, three are set by no theme: --nb-cta-shadow, --nb-image-ratio and --nb-title-font.

5. Inline styles and raw colours¶

Template counts cover the theme's own template folder (comments excluded). Raw hex is #rgb, #rgba, #rrggbb or #rrggbbaa. CSS hex is split into custom-property definitions (the palette; expected) and everything else (colours written straight into rules).

Nova holds nearly all inline styling (1,206 of 1,334 attributes, 90 percent). Depot is the cleanest theme (two hex values outside its palette); Ridge writes the most colour directly into rules.

6. Duplicated theme message keys¶

messages.properties holds 625 theme-prefixed keys: Brock 155, Depot 129, Spec 116, Atelier 109, Pop 108, Bistro 8. Ridge and Diorama have none. Of 191 distinct suffixes, 115 appear under more than one theme, covering 549 keys; in 90 of those suffixes the English text is identical in every theme that has it.

Largest groups (suffix prefix, number of suffixes in 2+ themes, themes, how many are identical text):

The pager, sort and account keys in full (every theme with the key; text identical unless noted):

Merchants can override any of these in Site Text, so the prefixed names are part of the data a shared component has to keep working. Depot's merchandisingNode.html also reads depot.plp.searchScope, depot.plp.searchAll and depot.plp.searchIn where Brock, Pop and Spec read the shared search.inCategory.* keys.

7. Behaviour that has drifted¶

These are differences in what the page does, not in how it looks.

8. Candidates to share¶

Ranked by near-identical copies times lines. "Near-identical" means a residual of at most about 10 percent of the file against Brock's copy. Lines are Brock's.

Next in line:

Not worth sharing yet: nav (a different design in every theme), head (stylesheets and fonts per theme), collection.html and productFragment/productDetail (layouts differ), and Ridge's and Diorama's blog templates (they differ from Nova's by 68 to 80 lines and from each other by 16 to 30).