Foundra template

Foundra (tpl_foundra) is a Joomla 6 site template built for Solidshop. It ships its own layouts for every Solidshop storefront view — product pages, listings, cart, checkout, the customer account — for the storefront modules (mini-cart, product strips, slideshow, category tiles, brands, reviews, recently viewed), and for the Joomla views a shop leans on: articles, a category blog, the Contact page and the sign-in, registration and password-reset screens. Five presets, two colour options and a dark mode you can leave to the visitor’s system, force, or hand them as a toggle.

This page is the setup reference. See the Foundra extension page for the feature overview, and demo.solidshop.app for the template running on a full demo store — every block on that site is a module placed in one of the positions listed below.

Requirements

• Joomla 6.0 or later
• PHP 8.4 or later
• Solidshop 1.5.0 or later — install Solidshop first; the template’s installer refuses to run against an older core. 1.5.0 is the release that ships the slideshow, category, brand and recently-viewed modules Foundra styles, and the extension catalogue its account pages link to when an add-on is missing

Installation

Template options

Open the style under System → Site Template Styles → Foundra - Default. The Template Options tab holds the settings below; the Custom Code tab is covered in the next section.

Setting	Default	What it does
Store Preset	Default	The overall look: Default, Boutique, Electronics, Marketplace or Minimal. Only the active preset’s stylesheet is loaded. See Presets.
Primary Color	#2563eb	Buttons, links and interactive elements. Left at its default, the active preset’s own colour is used; once changed, your colour replaces it on every preset, and the lighter and darker tints Foundra derives from it follow.
Accent Color	#f59e0b	Badges, sale prices and callouts. Same rule as the primary colour.
Font Family	System Default	System Default uses the visitor’s platform font (San Francisco, Segoe UI, Roboto …) with nothing to download. Inter serves the bundled Inter font from your own site — no Google Fonts request, no third-party host.
Products Per Row	4	Product cards per row on listings at desktop width (2, 3 or 4); narrower screens drop columns on their own. Left at its default, the preset decides (Minimal uses 2, the others 4).
Product Card Style	Standard	Standard is a bordered card with the details under the picture. Overlay uses a portrait picture with the name and price laid over its lower edge on a dark gradient. Minimal drops the border and shadow so the pictures sit on the page.
Header Style	Standard	Standard is a sticky bar with the logo, menu and utilities in one row. Centered stacks the logo above a centred menu. Transparent lays the header over whatever comes first on the page — meant for a full-width hero — and turns solid once the visitor scrolls past it.
Dark Mode	Auto (follow system)	Auto follows the visitor’s system setting. Light only and Dark only force one scheme for everyone. User toggle follows the system until the visitor clicks the sun / moon button Foundra adds to the header; their choice is remembered in their browser.
Container Max Width	1320px	Maximum width of the content area: 1140, 1320 or 1536 px.
Logo Type	Image	Image shows the logo files below; Text shows a wordmark instead.
Logo (Light Mode)	—	The header logo. SVG recommended. With no logo set, the header shows the site name as text.
Logo (Dark Mode)	—	An alternative file shown whenever the page is in its dark scheme — from the visitor’s system, the store’s Dark only setting, or the toggle. Leave empty to use the main logo in both.
Logo Text	—	The wordmark for the Text logo type. Empty uses the site name.
Favicon	—	Browser tab icon (ICO, PNG or SVG). Empty uses the template’s own.
Container Layout	Static	Static keeps content within the container width; Fluid stretches it to the full viewport.
Show Back to Top	Yes	A floating button that appears once the visitor has scrolled down.

Custom code

The Custom Code tab has five slots. Everything you put there survives a template update, because it lives in the style’s settings, not in the template’s files.

Slot	Where it lands
Custom CSS	An inline stylesheet in the page head, after the template styles — the place to override a colour token or tweak a spacing (see Customising).
Custom JavaScript	An inline script in the page head, after the template script.
Custom Head Code	Raw HTML before </head> — verification meta tags, analytics snippets.
Custom Body Start Code	Raw HTML right after <body> — a tag manager’s noscript block.
Custom Body End Code	Raw HTML before </body> — chat widgets, deferred scripts.

For larger customisations, Foundra also loads two files automatically when they exist: templates/foundra/css/custom.css and templates/foundra/js/custom.js (a non-empty .min variant beside either is preferred). Nothing in the template references these files otherwise, so an update never overwrites them — but they sit inside the template folder, so back them up before uninstalling.

Presets

A preset is a stylesheet that restyles the template’s design tokens — palette, corner radius, shadows, spacing, the product card’s picture ratio. Switching presets changes no content and moves no modules.

Preset	Character
Default	Blue and amber, comfortable radius, soft shadows, square product pictures that lift on hover. The safe choice for a general catalogue.
Boutique	Serif headings, a purple and gold palette, portrait 3 : 4 product pictures, generous whitespace. Apparel, jewellery, homeware.
Electronics	A dense four-column grid of square, bordered cards; sky blue and orange; tight radius. Built for comparing specifications at a glance.
Marketplace	Green and amber, rounded cards and pill buttons, a filter sidebar with more presence. Broad catalogues with many brands.
Minimal	Monochrome, no radius, no shadows, two large product pictures per row and the most whitespace of the five. Few products, big photography.

Module positions

Foundra defines nineteen positions. Each renders only when it has a published module, so an unused position costs nothing and leaves no gap.

Position	Where	Typical use
banner	Above the header, full width	A site-wide notice
nav	Header, and the mobile menu drawer	Your main menu — one module serves both
header	Header, end side	Product search, an account link, the mini-cart; the dark-mode toggle joins them when enabled
top	A bar under the header	An announcement bar (free shipping threshold, a sale)
breadcrumb	Under the top bar	Joomla’s Breadcrumbs module — Foundra overrides its layout
fullwidth	Top of the main area, edge to edge	The slideshow / hero, so the picture meets the header
main-top	Main area, above the content and sidebars	Landing-page blocks: a USP strip, category tiles, a featured strip
sidebar-left, sidebar-right	Beside the content	The filters module on listing pages. Either sidebar switches the page to a sidebar layout; both give three columns
content-top, content-bottom	Inside the content column, around the component	Blocks that belong to the page’s own content
main-bottom	Main area, below the content and sidebars	More strips: new arrivals, deals, best sellers, brands, reviews, the blog teaser, a newsletter form; “You may also like” and “Recently viewed” under product pages
footer-fullwidth	Between the main area and the footer, edge to edge	A call-to-action band
footer-1 … footer-4	The footer, up to four equal columns	About the store, a shop menu, a customer-service menu, contact details and the currency switcher. Only the columns with a module render
footer-bottom	Under the footer	Copyright line, payment-method logos, legal links
debug	End of the page	Joomla’s debug output

A landing page needs no article and no page builder: create a Storefront home menu item (the component prints nothing on it), then stack modules in fullwidth, main-top and main-bottom in the order above. Every block on the demo site is one of the storefront modules or a Joomla Custom module carrying a short piece of HTML. When the slideshow is the first thing on the front page, set its Heading level to H1 and leave the menu item’s page heading off, so the page keeps a single H1.

Slideshow layouts

The Slideshow module’s Layout option (on its Advanced tab) lists three layouts of Foundra’s own beside the default full-bleed hero. All three keep the module’s controls, keyboard operation and reduced-motion behaviour; they change only how a slide is drawn.

• Split — the picture on one half and the text on a plain surface on the other, with no scrim; the picture keeps a 4:3 box, so nothing moves as it loads, and the two stack picture-first on a phone.
• Centered — the full-bleed photo with the text centred in a narrower measure, the dots under it and the arrows on either side.
• Banner — a slim strip with the eyebrow, heading and button on one line, for a promotion above a listing or on a category page; one slide is a static band, several a small slideshow. With a picture it is a scrimmed photo, without one a plain surface.

Categories layouts

The Categories module’s Layout option lists three layouts of Foundra’s own beside the default picture tiles. All three keep the module’s display options — picture, name, product count, heading level, columns — and the whole tile stays one link; they change only how a tile is drawn.

• Editorial — the first category as a large feature tile, two columns wide and two rows tall, with the rest beside and below it; on a phone every tile is the same size again. Put the category you most want seen first.
• Compact — a row of small round-cornered thumbnails with the name beneath and no scrim, sized for a sidebar or a thin band; Columns is the count across, and with the picture off the tiles become a row of chips.
• Cards — the picture on top in a fixed box and the name and count on a bordered panel below, like the product card; for light or busy category pictures, where a label laid over the picture reads badly.

What Foundra overrides

Foundra does not restyle Solidshop’s default markup from the outside; it replaces the templates. That is what lets it drop the Bootstrap grid on its own pages and use one card, one spacing scale and one set of colour tokens throughout.

• Solidshop views — product page (including the layouts the Downloadable and Service add-ons register), product listing, cart, checkout and its confirmation, order tracking, wishlist, and every customer account page: overview, orders, order detail, addresses, profile, wishlist, invoices, downloads, bookings, reviews and subscriptions. Where an add-on is not installed, its account page shows a short notice with a link to the add-on instead of an empty table.
• Solidshop layouts — the product card, media gallery, name, price, options, variants, quantity and share / wishlist controls; the mini-cart drawer; checkout and account address forms; the account sidebar; the coupon form; promotion notices; the invoice view.
• Storefront modules — mini-cart, products, slideshow, categories, brands, recently viewed, reviews and the language switcher.
• Joomla views — a single article and the category blog (com_content), the Contact page (com_contact), sign-in, registration, password reset and reminder, and the profile (com_users), the Articles module, Breadcrumbs, pagination, and the shared article layouts for images, read-more, tags and the info line. The blog page and the “From the blog” module render the same card, so the two never look like different sites.
• Error and offline pages — the error page keeps the template’s header and logo; the offline page is a single card with your logo, the offline message and the sign-in form, on the same colour tokens.

Foundra still loads Joomla’s Bootstrap stylesheet, because the storefront add-ons and some third-party extensions render Bootstrap classes, and re-skins that chrome onto its own tokens. Foundra’s own templates do not use the Bootstrap grid or its physical spacing classes, which is what keeps the pages mirroring correctly in a right-to-left language.

Dark mode, RTL and accessibility

• Dark mode is a second set of colour tokens, so every override and every module follows it. Brand artwork in the brand strip deliberately stays on a light plate, since most logos are dark ink on transparency.
• Right-to-left layouts mirror through logical CSS properties — margins, padding, borders and positioning flip with the text direction, and the arrow controls of the slideshow and product gallery mirror with them. Persian, Arabic and Hebrew are among the bundled locales.
• Accessibility: skip links to the content and the search, labelled landmarks, a mobile menu that traps focus while open and closes on Escape, visible focus states, and animation that stands down for visitors who ask for reduced motion.

Customising

Foundra is inheritable. Under System → Site Templates, open Foundra and click Create Child Template; then make the child the default style. A child carries only the files you add to it — a copied html/ override, a replacement index.php — and reads everything else from Foundra, so a template update leaves your files untouched. Override a Solidshop view by copying it from templates/foundra/html/com_solidshop/ into the same path inside the child.

For colours and spacing, no file is needed. The compiled stylesheet reads its values from --foundra-* custom properties, so Custom CSS with a handful of token overrides restyles the whole site at once. Dark-mode values are applied on the root element under the dark-mode class, so a dark override names that.

:root {
    --foundra-radius-md: 0.25rem;
    --foundra-space-10: 5rem;
}
:root.dark-mode {
    --foundra-primary: #2dd4bf;
}

Updates

Foundra registers with Joomla’s update system. When a new version is published, it appears under System → Update → Extensions like any other extension; updating replaces the template’s own files and media and keeps your style settings, custom code slots, custom.css / custom.js and any child template.

Uninstalling

Joomla will not uninstall the default site template, so first star another style (Cassiopeia, say) under System → Site Template Styles, and remove any child template of Foundra. Then uninstall Foundra from System → Manage → Extensions. The template folder goes with it, including custom.css and custom.js if you created them — copy them out first. Solidshop, its modules and your store data are not affected; the storefront simply renders through the other template.