Overview
Last updated

Themes System

Welcome to the Fluid Themes documentation. The Themes System provides a flexible, multi-layered architecture for customizing the appearance and behavior of pages across the platform.

Overview

The Themes System separates theme management from template content, enabling companies to customize their user-facing pages through a combination of theme selection, template customization, and variable configuration. The system supports both traditional Liquid templating and modern JSON-based section components.

Core Concepts

Application Themes

Application Themes represent complete theme packages that define the visual appearance and layout structure for a company's pages.

Key characteristics:

  • Themes contain collections of templates for different page types
  • Support CSS variable injection for dynamic styling
  • Include versioning and publishing workflows
  • Can be cloned and customized per company
  • Maintain audit trails for change tracking

Theme Hierarchy:

  • Root Themes: Platform-provided base themes (fluid, vox, base) that serve as templates
  • Company Themes: Company-specific themes that clone and customize root themes
  • Template Inheritance: Company themes can override specific templates while inheriting others

Application Theme Templates

Application Theme Templates are individual page templates within a theme that define the layout and content structure for specific page types.

Template Types:

  • Content Templates: product, medium, enrollment_pack, library, collection
  • Page Templates: home_page, shop_page, cart_page, category_page, collection_page, join_page
  • Layout Components: navbar, footer, layouts
  • Structural Components: sections, components, config
  • Localization Templates: locales

Template Processing

Templates can be created using either Liquid or JSON format:

Liquid Templates:

  • Traditional server-side templating using Liquid syntax
  • Variables injected as {{ variable_name }} expressions
  • Control flow through {% tag %} blocks
  • Support for layouts, includes, and custom filters

JSON Templates:

  • Modern, component-based approach
  • Schema-driven configuration with settings, blocks, and presets
  • Visual page builder integration
  • Drag-and-drop section management

Theme Architecture

A theme is distributed as a zip file containing template files organized in a specific folder structure:

theme/
├── layout/
│   └── theme.liquid
├── assets/
│   ├── custom.js
│   ├── custom.css
│   └── logo.png
├── components/
│   └── header/
│       └── index.liquid
├── sections/
│   └── hero/
│       └── index.liquid
├── product/
│   └── default/
│       ├── index.liquid
│       └── styles.css
├── navbar/
│   └── default/
│       └── index.liquid
├── footer/
│   └── default/
│       └── index.liquid
└── locales/
    └── en.json

Layout Files

The layout file (theme.liquid) contains common elements shared across pages:

<!DOCTYPE html>
<html>
  <head>
    {{ content_for_header }}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

Asset Management

Assets are stored in the assets folder and referenced using the asset_url filter:

<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
<script src="{{ 'custom.js' | asset_url }}"></script>
<img src="{{ 'banner.jpg' | asset_url }}" alt="Banner">

Theme Customization Levels

The system provides multiple levels of customization:

LevelDescriptionAuto-Upgrade Compatible
Level 1Theme Selection & Cloning✅ Yes
Level 2CSS Variable Customization✅ Yes
Level 3Custom Stylesheet Overrides✅ Yes
Level 4Template Customization❌ Manual Review
Level 5Content-Specific Assignment✅ Yes

CSS Variables

Customize themes by modifying CSS variables:

{
  "primary_color": "#007bff",
  "secondary_color": "#6c757d",
  "font_family": "Helvetica, Arial, sans-serif",
  "heading_font": "'Playfair Display', serif",
  "border_radius": "4px",
  "container_width": "1200px"
}

Variables are substituted in stylesheets:

:root {
  --primary-color: $primary_color;
  --secondary-color: $secondary_color;
  --font-family: $font_family;
}

Available Root Themes

Fluid provides three professionally designed root themes:

  • Base Theme - Clean and minimal design perfect for any business
  • Vox Theme - Modern and bold styling ideal for creative businesses
  • Fluid Theme - Versatile design that adapts well to your brand

Next Steps

Ready to build? Start with the Developer Guide for a comprehensive walkthrough of theme development.

Need to customize pages visually? Check out the Page Editor Guide.

Looking for available template data? See the Template Variables reference.

 
Next page