Docs / Developer guide

Theme presets and rebuilding CSS

How presets are defined in config/themes.php, how store overrides work, and how to rebuild the stylesheets.

What a preset is#

A preset is an array that describes the whole storefront look as data. There are two places presets come from:

The marketplace-style and studio presets (fashion, electronics, plants ...) are entries in config/themes.php under presets.
The classic presets (tech3, tech4, fashion5 ...) are one file each in resources/themes/classic/{key}.php. config/themes.php loads every file in that folder and appends it to presets under the file name, so you never edit config/themes.php for a classic preset.

The default preset, tech3 (Tech Store, "Treva"), is the reference implementation of the classic family. Open resources/themes/classic/tech3.php next to this table:

Key	Purpose	In `tech3`
`name`, `description`, `thumbnail`	Shown in Appearance > Demos.	`Treva — Tech Store (classic)`
`family`, `template`, `html_classes`, `html_attrs`	Which CSS/JS family and body classes the layout uses.	`classic`, `index-tech-3`, `mk-page cl-page cl-tech3`
`demo_data_from`	Classic presets only: the demo catalogue they import (products, categories, brands, reviews, posts).	`electronics`
`assets.css`, `assets.js`	Stylesheets and scripts loaded for the preset (for example `css/index-fashion-7.css`, `css/themes/...`, `js/sellora/presets/...`).	`css/themes/classic.css`
`tokens`, `accent_token`	CSS custom properties (`--mk-`) such as colours; `accent_token` is the template variable that mirrors the accent you pick in Appearance > Colours*.	`--mk-accent: #117df8`, `--color-blue-1`
`fonts`	`display` and `body` fonts and preloads.	Clash Display and ES Build TRIAL
`logo`, `topbar`, `header`, `card`, `footer`, `bottom_nav`	Variants and options for each part.	header and footer variant `tech3`, no top bar
`shop`, `pdp`, `pages`	Filters, product-page options and the default product/blog layouts.	`pdp.layout = kit`, blog `classic`
`variant_labels`, `section_variants`	Add this preset's header/footer layouts and home-section variants to the admin lists.	`hero.tech3`, `flash_deals.tech3` ...
`home_sections`	The ordered list of home-page sections with their type, variant and settings.	10 sections from slider to newsletter

Top-level keys of config/themes.php: default (the preset used when none is chosen, env SELLORA_THEME, tech3 out of the box), preview (the ?theme_preview=key rule), section_cache, section_classes (add your own section classes), variants (the lists the admin offers) and defaults (merged under every preset).

A classic preset also has Blade views named after its key: resources/views/front/partials/header/{key}.blade.php, .../footer/{key}.blade.php, one view per home section in resources/views/front/home/sections/{type}/{key}*.blade.php, an optional card partial in resources/views/front/classic/cards/, and an optional demo-data overlay (slides, banners, menus, store texts) in database/data/demo/{key}/.

Store overrides#

What a store owner changes in Admin > Appearance is stored in settings and merged on top of the preset when pages render: theme.preset, theme.header|footer|topbar|bottom_nav|card, theme.options, theme.colors, theme.primary_color, theme.fonts.display|body, theme.logo_mode, theme.logo_text and theme.custom_css|custom_js|custom_head. Switching presets keeps these only if you choose to.

Content references inside presets use slugs (category_slug, banner_name, slider_key, flash_sale_slug ...). Link references accept route:name?query, category:slug, brand:slug, page:slug, blog:slug, anchor:id, a path or a URL. Texts go through __(); {store_name} and {year} are replaced, and *word* marks emphasis.

Adding your own preset#

Based on a classic design (recommended when you start from the Tech Store):

Copy resources/themes/classic/tech3.php to resources/themes/classic/yourpreset.php and change name, description, tokens and fonts.
Copy the tech3 header and footer views to yourpreset.blade.php in the same folders and set header.variant / footer.variant to yourpreset (or keep tech3 to reuse them as they are).
Keep the section variants as tech3 to reuse its home sections, or copy the section views you want to change under a new variant name and register it in section_variants.
Set demo_data_from to the catalogue to import, and optionally add a database/data/demo/yourpreset/ overlay for slides, banners and menus, then run php artisan sellora:install-demo yourpreset --fresh.
Run php artisan config:clear and preview it from Appearance > Demos.

Based on a marketplace-style or studio design:

Copy an existing preset array in config/themes.php and give it a new key.
Create public/assets/css/themes/yourpreset.css for any extra styles (scoped to your classes).
Adjust tokens, fonts, header, footer and the home_sections list.
Add the header, top bar or footer variant to the variants lists if you created new partials under resources/views/front/partials/.
Optionally add demo data under database/data/demo/yourpreset/ and a seeder in database/seeders/Demo/, then run php artisan sellora:install-demo yourpreset --fresh.
Run php artisan config:clear and preview it from Appearance > Demos.

Note

These steps were written from the code layout; they were not run end to end for a brand-new preset key. Check the result at phone and desktop widths, and run npm run build if you add Tailwind classes to new Blade files.

Rebuilding the CSS#

The shipped package contains compiled CSS and does not include node_modules. If you change Tailwind classes or the source stylesheets:

cd sellora            # the folder with package.json
npm install
npm run build         # CSS, RTL, per-preset stylesheets, JS, images, manifest, compression

Script	Does
`npm run dev`	Tailwind in watch mode: `public/assets/css/tailwind.css` to `main.css`.
`npm run build:css`	Minified `main.css`.
`npm run build:rtl`	`scripts/build-rtl.mjs` generates the `*.rtl.css` mirror of each stylesheet with rtlcss.
`npm run build`	Every asset step: see Front-end assets build. The storefront uses per-preset stylesheets from `public/assets/build`, so run the full build (not only `build:css`) before you ship.

Always run npm run build after editing a stylesheet that has an .rtl.css counterpart, or right-to-left languages will use stale styles.

Fonts#

Local fonts are declared in public/assets/css/fonts.css; the list shown in Appearance > Colours comes from the fonts array in config/sellora.php. To add a font, put the files in public/assets/fonts/, add @font-face rules, then add an entry with 'type' => 'local'. Check the licence of every font you add.