Everything you need to build and distribute a custom CSS theme for any Torvali storefront.
Themes are a single .css file uploaded by merchants from their dashboard.
Merchants select from 20 Google Fonts in the dashboard. The chosen font is applied via --font. Themes should use var(--font) rather than hardcoding a typeface.
Merchants can hide the hero section entirely. When hidden, #sfHero has display:none. Themes must not assume the hero is always visible.
Footer grid is now flexbox. Up to 3 page columns are appended dynamically. Merchants label each column. On mobile all columns stack vertically.
The category bar (.sf-cats) now appears on product pages too. Clicking a category navigates back to the storefront filtered by that category.
Custom pages (page.html) now render the same full footer as the storefront — About Us, contact, policies, and all page columns.
Pages marked "Show in nav" now correctly appear in #sfNavPages on the main storefront. Style them via #sfNavPages a.
Override CSS variables and component selectors. Your file is additive — it loads after the base storefront.css.
Merchants go to Dashboard → Storefront → Theme Studio and upload your .css file. Max 500 KB.
The storefront loads your CSS on every page. The merchant's accent color and chosen font still apply on top — your theme must respect both var(--accent) and var(--font).
Copy this minimal template and start customizing:
All variables live on :root. Override only what you need — every variable has a sensible default.
--accent#4F46E5--font'Inter', system-uibody { font-family: var(--font) }--text#111827--text-muted#6B7280--border#E5E7EB--surface#F9FAFB--white#FFFFFF--radius10px--shadow0 1px 3px…These settings are configured by the merchant in their dashboard and affect the storefront at runtime. Your theme must coexist gracefully with all combinations.
| Setting | Where set | Effect on storefront |
|---|---|---|
| --accent | Branding → Accent color | Applied as CSS variable on :root |
| --font | Theme Studio → Font | Google Font loaded + applied as CSS variable. Body uses var(--font) |
| hide_hero | Hero Content → Hide | #sfHero set to display:none. Do not rely on hero always being present. |
| announcement | Branding → Announcement bar | .sf-announcement shown above nav when filled |
| footer columns | Footer → Column labels | Up to 3 .sf-footer-col divs appended to .sf-footer-grid. Grid is flexbox; columns stack on mobile. |
| layout | Layout Studio | body gets class: layout-sidebar, layout-magazine, layout-nordic, etc. |
.sf-announcement — top banner bar.sf-nav — sticky top nav bar.sf-logo — store name / logo link.sf-search-input — search bar#sfNavPages a — nav page links.sf-account-btn — account icon button.sf-cart-btn — cart icon button.sf-hero — full hero wrapper (may be hidden).sf-hero-bg — gradient/color background.sf-hero-img — banner image (if uploaded).sf-hero-eyebrow — tagline above heading.sf-hero h1 — hero heading.sf-hero-desc — description paragraph.sf-hero-btn — "Shop now" CTA button.sf-cats — category filter bar (storefront + product page).sf-cat-btn — category button.sf-cat-btn.active — selected category.sf-products — product grid container.sf-product-card — individual product card.sf-product-img — image container.sf-product-name — product title.sf-product-brand — brand label.sf-price — current price.sf-compare-price — crossed-out was-price.sf-discount-badge — % off badge.sf-footer — footer wrapper.sf-footer-grid — flex row of columns.sf-footer-brand — first column (name + about).sf-footer-col — dynamic page columns (up to 3).sf-footer-col h4 — column heading.sf-footer-col ul li a — page links#sfContactCol — contact column (hidden if empty).sf-footer-bottom — copyright + policy links.cart-sidebar — sliding cart panel.checkout-modal-inner — checkout dialog.auth-overlay — sign-in / register overlay.auth-card — auth modal card#legalModal — policy modal (terms, returns, etc.)body — default grid layoutbody.layout-sidebar — sidebar + product gridbody.layout-magazine — editorial magazine layoutbody.layout-minimal — minimal list layoutbody.layout-boutique — large image boutiquebody.layout-compact — compact dense gridbody.layout-nordic — wide nordic stylebody.theme-bold — bold dark theme classbody.theme-warm — warm cream theme classbody.theme-minimal — minimal light theme classbody.theme-vivid — vivid gradient theme classbody.theme-dark — dark immersive theme class--accent — it's set by the merchant's brand color--font or set font-family on body — the merchant's font choice takes precedence!important except as a last resort for specificity conflicts.css is acceptedposition:fixed in a way that obscures cart, checkout, or auth UIvar(--accent) for interactive elements — buttons, hover states, linksvar(--font) only for heading overrides (e.g. serif headings with sans body)A complete theme demonstrating v2 best practices: respects merchant font, warm palette, elegant product cards, multi-column footer.
Built something beautiful? Share it with the Torvali community. We feature the best themes in our marketplace for merchants to install with one click.