Depot Theme¶
Depot is a dense, catalogue-first storefront theme for shops whose customers know what they are after: trade suppliers, parts and hardware, consumables, anything sold by SKU. It is built on top of Nova (Depot → Nova → Bootstrap template fallback), so every page works from the moment a site switches to it; Depot replaces the pages where a catalogue-first design matters most.
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 Depot). A site's Design Brief (brand colour, font, corner radius, image shape) applies to Depot as it does to Nova; the brand colour replaces Depot's signal amber.
Design principles¶
| Principle | What it means on the page |
|---|---|
| One signal colour marks the action | Signal amber (--color-primary) is used for Add, Add to basket, the search button, the basket button and the current category. Everything else is graphite, paper and hairlines. |
| Facts before decoration | Every card carries brand, name, rating (when rated), stock, price and SKU in the same place, so a page of results can be scanned like a table. |
| The filter rail never leaves | On desktop the filter rail (or, on a category page, the category tree) is always on screen beside the results and scrolls on its own. On phones it is a bottom sheet. |
| Numbers are monospaced | Prices, SKUs, quantities and counts use tabular figures so columns line up. |
| Nothing is invented | Depot only shows what the catalogue holds. See Left out on purpose below. |
What Depot redesigns¶
| Area | Highlights |
|---|---|
| Header / footer | Slim utility strip (announcement and promises), one sticky slate header with an always-visible search field with as-you-type suggestions, account and a basket button showing item count and subtotal, a category row with mega menu (collection menu and admin-built menu), slide-in mobile menu, reassurance row, payment marks. |
| Listings | Collection, search and merchandising pages: toolbar with product count, grid / list toggle and sort; applied-filter tags with Clear all; persistent rail (filters on search and merchandising pages, category tree on collections); pagination with "Showing 1–24 of 312". |
| Product cards | Brand, name, rating, a stock dot ("In stock", "Only 3 left", "Out of stock"), price with was-price, SKU, and for a plain product a quantity stepper with Add. Products with options link to the product page instead. |
| List view | The same cards become a quick-buy SKU table: image, name, SKU, availability, price, quantity + Add on one row (two compact lines on narrow screens). The choice is remembered per browser. |
| Product page | Gallery, a summary column (brand, name, SKU, rating, short description, promises) and a buy box that stays in view beside them: price, options, stock, quantity, Add to basket. Description and Delivery & returns follow full width with an anchor bar; a docked buy bar on phones. |
| "Added to basket" | A compact panel under the header showing the item and the new subtotal (a bottom sheet on phones). |
| Rails | Trending, featured and recently-viewed products use the listing card. |
Basket, checkout, order confirmation, account pages and the blog render Nova's templates inside Depot's header and footer, restyled by Depot's colour, type and shape tokens (Nova's primary buttons become dark-on-amber). They are not redesigned in Depot.
Left out on purpose¶
The design concept included a few things the catalogue has no data for. Depot leaves them out rather than inventing content; each returns when the data exists.
| Concept | Why it is not there |
|---|---|
| Spec chips on cards, certification badges | No structured specification on the product. A spec table appears on the product page when the product attributes extension is placed there. |
| Price-break / trade-price table | The product has one price (plus was-price). |
| Compare tray | No compare feature. |
| Ex / inc VAT switch, trade account and credit strip | No VAT display mode or trade account data on the storefront. Use depot.pdp.priceNote (for example "Prices exclude VAT"). |
| Per-delivery-option stock, "Order by 3pm" | Stock is one figure per SKU (from the stock service); cut-off times are not modelled. |
| Free-delivery progress bar in the basket panel | No delivery threshold is exposed to the theme. The delivery promise text is shown instead. |
| Search scope selector (search within a category) | The search endpoint takes a query only. |
| Downloads, compatible products, review breakdown | Not part of the product model. |
Configuring the copy¶
The "Shop all {0}" link at the foot of each admin-built menu dropdown (depot.nav.shopAll) can
also be reworded or hidden per site with the nav-mega-menu-view-all-label and
nav-mega-menu-view-all-enabled site config keys; see
Brock: the "Shop all" link.
All Depot wording is in messages.properties under depot.* 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 |
|---|---|---|
depot.promise.delivery |
(empty) | Utility strip, product page, footer. e.g. "Free next-day delivery over £75" |
depot.promise.returns |
(empty) | As above. e.g. "30-day returns" |
depot.promise.secure |
Secure checkout | Utility strip, product page, footer |
depot.promise.help |
(empty) | Footer reassurance row. e.g. "Trade counter: 0113 496 0142" |
depot.pdp.deliveryInfo |
(empty) | "Delivery & returns" section on every product page (HTML allowed) |
depot.pdp.priceNote |
(empty) | Line under the product price, e.g. "Prices exclude VAT" |
nav.banner.message |
(empty) | Dark announcement bar above everything |
The utility strip only appears once delivery, returns or an announcement is set, so a new site never shows a promise it hasn't made.
For developers¶
- Templates:
web-mvc/src/main/resources/templates/depot/. Styles and behaviour:resources/settBuilder/themes/depot/css/depot.cssandjs/depot.js, linked from Depot'sfragment/head.htmlafter Nova'sbdgr.css(and before the Design Brief'stheme.css). - Depot's
ThemeContextpointscssPath/jsPath/imagePathat Nova's folders so Nova templates and extension scripts keep working; see Theme Resolution. - Depot's icons are in
fragment/depot-icons.html(noticons.html) so Nova's payment-mark icons keep resolving. The fragments Depot shadows (head,nav,footer,mini-basket,account-status,facet-rail,sort-dropdown,pagination,auth-head) keep Nova's fragment names and signatures because Nova's pages call them too. - Depot reuses Nova's scripts (variant picker, sticky buy bar, search suggestions, basket
repricing) unchanged; each Depot template documents the ids and classes it keeps for them at the
top of the file.
depot.jsadds the mega menu, drawer, filter sheet, quantity steppers, the grid/list toggle and the "added to basket" panel; everything degrades to plain links and forms without JavaScript. - Stock on a card is
product.quantityInStock(the stock-service figure when the listing supplies it); the low-stock threshold is 5. Products with options show no stock line on the card. - Fonts (Barlow, Barlow Condensed, IBM Plex Mono) are self-hosted from
@fontsourcepackages: the Latin and Latin-ext subsets are vendored (seescripts/copy-versioned-deps.js) and declared inline infragment/head.html. No request goes to a third-party font host. - The theme record is added by system update
85.json(idempotent) andinitialisation/templates.json.