Fluid Base Theme

The starter template for building a Fluid storefront theme. Clone this repo, customize it for your brand, and push it back to Fluid using the fluid-cli — you get a working storefront with the standard page types, sections, and styling baseline already wired up.

What's in here

.
├── global_styles.css         Shared CSS variables + base styles
├── layouts/                  Layout wrappers (default, checkout, minimal)
├── home_page/                Home page templates
├── product/                  Product detail templates + variants
├── collection/               Collection / category listing templates
├── cart_page/                Cart page templates
├── post_page/                Blog post templates
├── page/                     Generic CMS-style pages
├── shop_page/                Storefront landing variants
├── sections/                 Reusable section types (hero, grid, cta, etc.)
├── components/               Smaller building blocks used inside sections
├── navbar/                   Header / nav variants
├── footer/                   Footer variants
├── join_page/                Enrollment / sign-up flows
├── enrollment_pack/          Enrollment pack templates
├── error_page/               404 / 500 / generic error templates
├── category/                 Category index templates
├── category_page/            Category detail templates
├── post/                     Blog post fragments
├── medium/                   Long-form content templates
├── library/                  Library / resource grid templates
├── config/                   Theme-level config (settings schema, presets)
├── locales/                  Translation files (`en.json`, `es.json`, etc.)
└── assets/                   Compiled CSS + theme assets

Each page-type directory contains one or more <variant>/index.liquid files (e.g. home_page/default/index.liquid) that compose sections/ to build the page. Sections own their own schema (the {% schema %} block) so the Fluid admin's visual editor + the Mist Desktop section editor can render an inline form for them.

Using this as your template

Option 1 — Mist Desktop (recommended)

1. Open Mist Desktop and sign in.
2. Settings → "Scaffold from template" → point at this repo URL.
3. Mist clones the theme into ~/Fluid/<your-company>/themes/<your-theme>/ and creates a matching draft theme on Fluid for you.
4. Edit, preview, and push — all from inside Mist's three-pane workspace (sidebar / chat / preview).

Option 2 — Fluid CLI directly

# Clone the template
git clone https://github.com/Fluid-WeCommerce/base-theme.git my-theme
cd my-theme
rm -rf .git

# Push to Fluid as a new draft theme (creates the record + pulls metadata)
fluid theme push --create --name "My Theme"

# Iterate locally with hot reload
fluid theme dev

fluid theme dev serves the theme at http://localhost:9292 against your live company data so you can preview real products / collections / customers as you build.

Customization checklist

A typical first pass for a new brand:

• Brand colors — config/settings_schema.json or the visual editor.
• Logo + favicon — replace assets, update navbar/default/index.liquid.
• Typography — swap font stack in global_styles.css.
• Home page — open home_page/default/index.liquid, swap sections.
• Locales — translate strings under locales/ if you ship more than one language.
• Product page layout — adjust product/default/index.liquid (image gallery, variant picker, related products, etc.).
• Footer links — footer/default/index.liquid plus the linked menu in the Fluid admin.

Conventions

• Liquid for templates, CSS variables for theming. No build step required — Fluid's runtime renders .liquid directly.
• Sections are composable — each lives at sections/<type>/index.liquid with its own {% schema %} defining the settings the admin / Mist section editor renders.
• One section type per directory. Don't fork at the file level; create a new section directory and update the schema.
• i18n via the t filter. {{ 'home.hero.title' | t }} looks up the active locale's translation in locales/<iso>.json.
• Assets cached aggressively. Bump filenames (or use ?v=...) when you need to bust the CDN; the runtime fingerprints by content hash but the browser cache is generous.

Translating the theme

The translating-theme-languages community skill (run via Optimize → Translate Theme in Mist) reads every enabled language on your company and fills locales/<iso>.json for any that's missing. Source of truth is locales/en.json and the {{ 'key' | t }} filter.

Publishing

fluid theme push           # Push current state as a new version
fluid theme publish        # Promote the current version to active

Mist Desktop has both behind a single Publish button on the theme project's toolbar.

License

MIT — fork freely, ship with your own branding.

Issues / questions

• Theme bugs / improvements: open an issue on this repo.
• Mist Desktop feedback: fluid-wecommerce/mist-desktop.
• Fluid CLI: npm @fluid-app/fluid-cli.