The default public theme for ShopClass: a modern, responsive, vanilla-JS (no jQuery) classifieds front end.
- Three selectable colour palettes (Teal / Indigo / Violet) on a warm-sand ground with deep-navy
ink; light, dark or auto (follows the OS). Every palette × mode combination meets WCAG 2.1 AA
contrast. Picked in the admin (see below), or retuned through the CSS design tokens in
css/storefront.css(--color-*,--font-*,--space-*,--radius-*,--shadow-*). - Card-grid listings, sticky search, accessible mobile nav, automatic RTL via logical CSS properties (switches on right-to-left locales, no setting to manage).
- Consumes only the public ShopClass theme API (
osc_*helpers and hooks), with no reach into core internals.
Storefront 2.0 needs ShopClass 6.4.0 or later; sites on an older core stay on Storefront 1.3.x.
ShopClass bundles Storefront in the release zip and activates it on a fresh install. To
install manually, drop this folder into oc-content/themes/storefront/ and activate it under
Settings → Appearance.
Storefront adds two admin pages under Appearance to rebrand and retune the front end without touching code. Everything is stored as theme preferences (so it survives theme updates) and read at render time.
- Site name: the wordmark shown when no logo image is set, and the accessible site name in every case.
- Logo: upload an SVG, PNG or JPG. An SVG is sanitized on upload (scripts, event handlers and
remote references are stripped) and inlined so it follows the current text colour. One file
then looks right in both light and dark mode. PNG/JPG logos are saved to
oc-content/uploads/. - Compact logo (optional): a square-ish mark shown on small screens; falls back to the main logo when left empty.
- Colour palette: Teal (default), Indigo or Violet. Swaps the primary and secondary accents site-wide; each is tuned to clear WCAG 2.1 AA in both light and dark.
- Colour scheme: Light, Dark, or Auto (matches each visitor's device setting).
- Home / Hero: override the headline and tagline; toggle the decorative graphic, the popular-category chips, and the featured (promoted) listings row.
- Search & location
- Post & edit form: location fields as type-ahead autocomplete or cascading dropdowns.
- Search page: Country + Region + City, Region + City (for single-country sites; hides the country choice and scopes to the default country), or Autocomplete.
- Search box placeholder text and the default results view (gallery or list).
- Footer & social: footer tagline; links for Facebook, X, Instagram, YouTube and LinkedIn (each icon is hidden when its field is blank); and the "Powered by ShopClass" credit toggle.
Leaving a text field blank restores its built-in default (e.g. the site title for the hero headline).
Clone next to your ShopClass checkout and symlink it in:
git clone git@github.com:mindstellar/theme-storefront.git
ln -s "$(pwd)/theme-storefront" /path/to/shopclass/oc-content/themes/storefrontoc-content/themes/* is gitignored in the core repo, so the symlink won't show up there.
Source css/*.css and js/*.js are committed and readable; the theme runs straight from them in
local dev, so no build step is required to develop. For production, a minify pass emits
*.min.css / *.min.js siblings that functions.php loads automatically when present (falling back
to source otherwise):
npm install # once: installs esbuild + gettext-parser (the dev dependencies)
npm run build # writes css/storefront.min.css, js/storefront-*.min.js, and languages/*/theme.moGenerated *.min.* and compiled languages/**/theme.mo files, plus node_modules/, are gitignored;
the release workflow builds them fresh. The toolchain is pure Node, with no system gettext required.
UI strings use the gettext domain storefront (__() / _e() / _n()), which core loads from
languages/<locale>/theme.mo for the active locale. The theme ships a default en_US catalogue
and a languages/storefront.pot template.
npm run i18n # re-extract strings -> languages/storefront.pot + languages/en_US/theme.po
npm run build # compile every languages/<locale>/theme.po -> theme.mo (also builds assets)Run npm run i18n after adding or changing UI strings, and commit the updated .pot / .po
(the compiled .mo is a build artifact). To add a language, copy languages/en_US/theme.po to
languages/<locale>/theme.po (e.g. es_ES), translate the msgstr entries, and run npm run build.
JS is split per surface and loaded only where it is used: storefront-core (site chrome, every
page), storefront-item (listing gallery/lightbox/map), storefront-search (filter drawer,
location autocomplete, search-alert on the search page, home hero and post/edit form), and
storefront-account (avatar editor). Each view enqueues its own bundle; all scripts are deferred.
Pushing a vX.Y.Z tag runs .github/workflows/release.yml, which builds the minified assets,
packages the theme as storefront_X.Y.Z.zip (source + *.min.*, without the build tooling), and
publishes a GitHub release. ShopClass's .build.sh fetches the latest release asset at build
time and bundles it into the core zip.
Storefront is meant to double as a reference for what the platform can do:
- Featured (premium) listings on the home page via
osc_get_premiums(). - Related listings on the item page (same category, live only). See
storefront_related_items(). - Custom fields rendered on the item page through the item-meta API (
osc_has_item_meta()). - Friendly-named resource downloads (
osc_resource_download_url()) in the gallery. - Cache-safe view counts: the theme is stateless and never counts a view at render time, so core's JS beacon does the counting and full-page caching keeps working.
- Widget zones (
header,footer,item_sidebar) for drop-in plugin components. - Vanilla JS only, light + dark mode, RTL via logical properties.
The account pages, sign-in and registration, the public profile, the contact page and the
credits pages are drawn by core, inside Storefront's header and footer. Storefront hangs its
own pieces on core's hooks (inc/core-pages.php): the account band and tabs on
account_page_before, the listing cards and the "My listings" table on listing_list_html,
and the contact panels on contact_page_aside. css/storefront.css styles core's .oe-*
markup. Plugins use core's hooks on these pages; see the account pages guide in the ShopClass
developer docs.
Storefront fires the hook names existing Osclass plugins already target, plus a few of its own so plugins can inject content into the new sections:
| Hook | Where |
|---|---|
header, footer |
<head> end / before </body> (asset + ad injection) |
before-main, after-main |
Around the main content region |
search_ads_listing_top |
Top of home and search results |
search_ads_listing_medium |
Interspersed every 6 search results |
home_before_featured, home_after_featured |
Around the home featured row |
home_before_listings, home_after_listings |
Around the home latest-listings row |
item_meta, item_detail |
Item page body |
item_before_related, item_after_related |
Around the item related-listings row |
item_sidebar |
Item page aside (alongside the item_sidebar widget zone) |
item_contact_form |
Inside the seller-contact form |
GPL-3.0-or-later. © Navjot Tomer (Mindstellar) and contributors.