Brock Theme¶
Brock is a conversion-focused storefront theme. It is built on top of Nova (Brock → Nova → Bootstrap template fallback), so every page works from the moment a site switches to it; Brock replaces the pages where the design most affects whether a shopper buys.
Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Brock). A site's Design Brief (brand colour, font, corner radius, image shape) applies to Brock exactly as it does to Nova.
Design principles¶
| Principle | What it means on the page |
|---|---|
| One colour means "buy" | The brand colour (--color-primary) is used only on the purchase path: Add to basket, Checkout securely, Pay. Navigation, secondary buttons, selected size/colour, badges and links are ink on white, so the next step is always the one thing that stands out. |
| Search is a field, not an icon | A full-width search box is in the header on every screen size (with as-you-type suggestions). On phones it tucks away while scrolling down and returns on scroll up. |
| Promises stated plainly | Delivery, returns and "secure checkout" appear in the header strip, beside Add to basket, in the basket summary and above the footer — the same words everywhere. Nothing is claimed until the site sets it. |
| Even product grids | Product images sit on a neutral tile (packshots and lifestyle photos line up), with the saving shown as a percentage and the was-price. |
| Enclosed checkout | Checkout pages drop the menu, search and promo strip: logo, a way back to the basket, and "Secure checkout". |
What Brock redesigns¶
| Area | Highlights |
|---|---|
| Header / footer | Announcement bar, promise strip, search-first header, mega menu (collection menu and admin-built menu), slide-in mobile menu, basket button showing item count and running subtotal, reassurance row, payment marks. A long site name wraps to two lines (then ends in an ellipsis) beside the logo, so it never runs into the search box or the account and basket buttons. No per-site CSS is needed. |
| Listings | Collection, search and merchandising pages: sticky count + sort bar, sub-category chips, filter rail (desktop) / slide-in filter panel with "Show N products" (mobile), applied-filter chips with Clear all, 2/3/4-column grid, pagination with "Showing 1–24 of 312". |
| Product page | Gallery beside a buy box that stays in view on desktop; brand, title, rating, price with saving, size/colour buttons, honest stock line ("Only 3 left" at ≤5), quantity + Add to basket, promises, collapsible Description and Delivery & returns; a docked buy bar on phones. |
| Basket | Line items with stepper, save for later and remove; order summary with "Delivery: calculated at checkout" until chosen; one Checkout securely button. |
| Checkout | Both modes: the stepped checkout (numbered step cards — details, address, delivery, payment — each collapsing to a recap with Change) and the single-page checkout (unifiedCheckout extension, restyled in place). Email is asked first; address fields have plain labels and specific errors; the order summary folds to one line on phones. |
| Order confirmation | Tick, thanks, order number and the email the confirmation went to, then the order, totals, contact, addresses and payment. |
| Rails | Trending, featured and recently-viewed products use the same card as listings, swipeable on phones. |
Everything else (account pages, blog, content extensions) renders Nova's template inside Brock's header and footer, using Brock's colour tokens.
Configuring the copy¶
All Brock wording is in messages.properties under brock.* and can be overridden per site in
Admin → Shop Settings → Site Text (/admin/shopSettings/text). The ones a merchant should set:
| Key | Default | Where it shows |
|---|---|---|
brock.promise.delivery |
(empty) | Header strip, product page, basket, footer. e.g. "Free delivery on orders over £50" |
brock.promise.returns |
(empty) | As above. e.g. "Free 30-day returns" |
brock.promise.secure |
Secure checkout | Header strip, product page, footer |
brock.promise.help |
(empty) | Footer reassurance row. e.g. "Questions? We reply within one working day" |
brock.pdp.deliveryInfo |
(empty) | "Delivery & returns" section on every product page (HTML allowed) |
brock.pdp.priceNote |
(empty) | Line under the product price, e.g. "Including VAT" |
brock.confirm.next |
(empty) | Under the order number on the confirmation page |
nav.banner.message |
(empty) | Dark announcement bar above everything |
The header strip only appears once delivery or returns is set, so a new site never shows a promise it hasn't made.
Sites that sell nothing¶
For a corporate or brochure site, turn off the site config key
storefront-commerce-chrome-enabled (category storefront-config, in the admin's site
configuration or through the MCP manageSiteConfig tool). The header then drops the Sign in / account and Basket buttons (and
the mobile menu's account and basket links), and the footer drops the payment marks. It defaults to
on and applies to Nova as well. StorefrontChromeInterceptor reads the key and puts the
commerceChromeEnabled boolean on every page model; the templates only consume it. Hiding the site
name beside a logo is a separate option (hideSiteNameInNav).
The same switch changes the search box's accessible (screen-reader) label from "Search products" to
"Search this site", so a consultancy using content search isn't described as a shop. The wording
comes from the search.label.products / search.label.site message keys (English and Dutch in the
bundles, so Site Text can override them). The Java side picks the key: SearchBarExtension puts
searchLabelKey on its model and StorefrontChromeInterceptor puts the same attribute on the page
for the header's fallback search form; templates only render it. The placeholder is unchanged, so
the searchBar extension's configurable placeholder still wins.
The "Shop all" link in menu dropdowns¶
Each dropdown of the admin-built main menu ends with a link to the menu item's own page, "Shop all
Services" by default. On a site that isn't a shop (say a consultancy whose menu items are pages),
change or hide it in Admin → Site Configuration, category menu-config, or with the MCP
manageSiteConfig tool:
| Key | Default | Effect |
|---|---|---|
nav-mega-menu-view-all-label |
(empty) | The link text. {0} is replaced with the menu item's name: View all {0} gives "View all Services". Text without {0} is used as-is (View all). Empty uses the theme's wording, the brock.nav.shopAll message ("Shop all {0}"), which Site Text can also change. Plain text, so apostrophes need no escaping. |
nav-mega-menu-view-all-enabled |
true |
false hides the link. The item's own page is still reached by clicking its name in the menu bar. |
On a site that sells nothing (storefront-commerce-chrome-enabled off, see above) an empty label
gives "View all {0}" rather than "Shop all {0}". A label you set still wins, and
nav-mega-menu-view-all-enabled = false still hides the link.
The same keys drive Pop, Depot, Spec and Atelier (each with its own <theme>.nav.shopAll default)
and Nova and bootstrap (default "View All {0}" and "All {0}", the nav.megaMenu.* messages). On
Nova and bootstrap, turning the link off hides the mega-panel "View All" links but keeps a plain
dropdown's "All {0}" link, as that dropdown's parent opens the menu rather than its page.
The collection menu (collectionChooser) still says "Shop all": it only ever lists product
collections.
A change takes effect on the next page view: the setting is part of the menu hash, so browsers
holding a cached copy of the menu fetch it again. (Site Text changes are not, so a changed
brock.nav.shopAll message reaches returning visitors once the menu is edited or the platform is
upgraded.)
Breadcrumbs on content pages¶
Content pages get a breadcrumb under the header (and above any hero), built from the main menu,
for example Home / Services / Legacy modernisation. It uses the same markup and styling as the
collection and product breadcrumb, a little tighter. It is hidden on the home page, basket,
checkout, account and error pages, and per site with cms-page-breadcrumbs-enabled. The same
applies to Pop, Depot, Spec and Atelier. See
Content Management for how the trail is built.
For developers¶
- Templates:
web-mvc/src/main/resources/templates/brock/. Styles and behaviour:resources/settBuilder/themes/brock/css/brock.cssandjs/brock.js, linked from Brock'sfragment/head.htmlafter Nova'sbdgr.css(and before the Design Brief'stheme.css). - Brock's
ThemeContextpointscssPath/jsPath/imagePathat Nova's folders so Nova templates and extension scripts keep working; see Theme Resolution. - Brock reuses Nova's scripts (variant picker, sticky buy bar, search suggestions, basket repricing, checkout) unchanged; each Brock template documents the ids and classes it keeps for them at the top of the file.
- The theme record is added by system update
83.json(idempotent) andinitialisation/templates.json.