Appearance

Theme Development Overview ​

Nimbu themes power custom storefronts, corporate websites, intranets, and web applications using the Liquid templating language. Whether you're building an e-commerce site, a content management system, or a custom web application, Nimbu's theme system provides the flexibility and power you need.

What is a Nimbu Theme? ​

A Nimbu theme is a collection of Liquid templates, assets (CSS, JavaScript, images), and configuration files that define how your site looks and behaves. Themes are:

  • Liquid-based: Use Shopify's Liquid templating language with Nimbu-specific extensions
  • Dynamic: Connect to your content, products, customers, and custom data through Liquid drops
  • Flexible: Build anything from simple landing pages to complex e-commerce applications
  • Editable: Content editors can manage content through the Nimbu admin without touching code

Core Capabilities ​

Content Management ​

  • Canvas System: Drag-and-drop page building with repeatable components
  • Editable Regions: Inline editing for text, images, files, and references
  • Channels: Custom content types (blogs, portfolios, team members, etc.)
  • Multilingual: Built-in support for multiple languages with translation management

E-commerce ​

  • Product Catalog: Full product management with variants, collections, and custom attributes
  • Shopping Cart: Session-based cart with flexible checkout workflows
  • Payment Integration: Stripe, PayPal, and other payment providers
  • Order Management: Complete order lifecycle from cart to fulfillment

Dynamic Features ​

  • Navigation: Flexible menu system with unlimited nesting and locale support
  • Forms: Generate forms from channels with validation and file uploads
  • Search: Built-in search across products, pages, and custom content
  • API Integration: Connect to external services and APIs

Rendering Pipeline ​

Understanding how Nimbu renders pages helps you build efficient themes:

Request → Route Matching → Template Selection → Liquid Rendering → HTML Response

1. Request Processing ​

When a request comes in, Nimbu:

  • Sanitizes and parses URL parameters
  • Identifies the requested locale
  • Determines which template to render

2. Context Building ​

Nimbu injects global variables into every template:

  • Site data: Configuration, channels, products, menus
  • Request data: Current path, params, locale
  • Session data: Logged-in customer, shopping cart
  • Page data: SEO metadata, translations, custom fields

3. Template Rendering ​

The selected template renders with access to:

  • Global drops (products, channels, menus, etc.)
  • Template-specific variables (product, article, page, etc.)
  • Layout wrappers and snippet partials
  • Editable content from the admin

4. Output Generation ​

Nimbu delivers:

  • Rendered HTML
  • Cached fragments where configured
  • CDN-optimized assets

Theme File Structure ​

A typical Nimbu theme is organized as follows:

theme/
├── layouts/          # Base HTML wrappers
│   ├── default.liquid
│   └── minimal.liquid
├── templates/        # Page-specific templates
│   ├── index.liquid
│   ├── page.liquid
│   ├── product.liquid
│   ├── collection.liquid
│   └── customers/
│       ├── login.liquid
│       └── account.liquid
├── snippets/         # Reusable components
│   ├── navigation.liquid
│   ├── product-card.liquid
│   └── repeatables/
│       ├── hero.liquid
│       ├── text-image.liquid
│       └── gallery.liquid
└── assets/           # CSS, JS, images
    ├── style.css
    ├── app.js
    └── images/

Layouts ​

Layouts provide the HTML structure ( <html>, <head>, <body>) and include navigation, footer, and global assets. Templates render inside layouts using {{ content_for_body }}.

Templates ​

Templates define page-specific content and structure. Nimbu automatically routes requests to the appropriate template based on the URL pattern.

Snippets ​

Snippets are reusable partials included via {% include 'snippet-name' %}. They're perfect for navigation, product cards, forms, and repeatable page sections.

Assets ​

Static files served through Nimbu's CDN. Reference them using filters like {{ 'style.css' | stylesheet_tag }} or {{ 'logo.png' | theme_image_url }}.

Global Variables ​

Every template has access to these key variables:

VariableDescription
siteCurrent site configuration, channels, products, settings
templateCurrent template identifier (index, product, page, etc.)
localeCurrent language code (en, nl, fr, etc.)
customerLogged-in customer (if authenticated)
cartShopping cart contents (if session exists)
paramsURL query parameters
pageCurrent page object (on page templates)
productCurrent product (on product templates)
articleCurrent blog post (on article templates)

See the Global Variables Reference for the complete list.

Development Workflow ​

1. Set Up Your Environment ​

  • Install the Nimbu CLI or use the web-based code editor
  • Clone an existing theme or start from scratch
  • Configure your local development environment

2. Build Your Theme ​

  • Create layouts for different page types
  • Build templates for your content
  • Design reusable snippets and components
  • Style with CSS (optionally using Tailwind CSS)
  • Add interactivity with JavaScript

3. Add Editable Content ​

  • Use {% editable_canvas %} for page builders
  • Add {% repeatable %} blocks for flexible sections
  • Create editable fields for text, images, and references
  • Configure forms for user input

4. Test and Deploy ​

  • Test across different locales and devices
  • Validate forms and checkout flows
  • Deploy to staging for client review
  • Push to production when ready

Key Design Principles ​

Progressive Enhancement ​

Start with semantic HTML, enhance with CSS, add JavaScript for interactivity. Your themes should work without JavaScript when possible.

Performance First ​

  • Use {% cache %} blocks for expensive operations
  • Optimize images with built-in image filters
  • Minimize HTTP requests through asset bundling
  • Leverage CDN delivery for all static assets

Content Editor Friendly ​

Design themes so non-technical users can:

  • Edit content inline through editable regions
  • Build pages with drag-and-drop canvas system
  • Manage navigation and menus visually
  • Translate content without touching code

Accessibility ​

  • Use semantic HTML elements
  • Provide alt text for images through editable fields
  • Ensure keyboard navigation works
  • Test with screen readers

Next Steps ​

Ready to start building? Continue with:

Or explore real-world examples in the documentation to see how production themes use these features.