# Theme Development Overview (/docs/themes/introduction/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? [#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 [#core-capabilities] ### Content Management [#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 [#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 * **Gift Cards**: Sell, redeem and deliver gift cards with Liquid-customizable retrieval pages, PDFs and emails ### Dynamic Features [#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 [#rendering-pipeline] Understanding how Nimbu renders pages helps you build efficient themes: ``` Request → Route Matching → Template Selection → Liquid Rendering → HTML Response ``` ### 1. Request Processing [#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 [#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 [#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 [#4-output-generation] Nimbu delivers: * Rendered HTML * Cached fragments where configured * CDN-optimized assets ## Theme File Structure [#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] Layouts provide the HTML structure (` `, ``, ``) and include navigation, footer, and global assets. Templates render inside layouts using `{{ content_for_body }}`. ### Templates [#templates] Templates define page-specific content and structure. Nimbu automatically routes requests to the appropriate template based on the URL pattern. ### Snippets [#snippets] Snippets are reusable partials included via `{% include 'snippet-name' %}`. They're perfect for navigation, product cards, forms, and repeatable page sections. ### Assets [#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 [#global-variables] Every template has access to these key variables: | Variable | Description | | ---------- | -------------------------------------------------------------- | | `site` | Current site configuration, channels, products, settings | | `template` | Current template identifier (`index`, `product`, `page`, etc.) | | `locale` | Current language code (`en`, `nl`, `fr`, etc.) | | `customer` | Logged-in customer (if authenticated) | | `cart` | Shopping cart contents (if session exists) | | `params` | URL query parameters | | `page` | Current page object (on page templates) | | `product` | Current product (on product templates) | | `article` | Current blog post (on article templates) | See the [Global Variables Reference](/docs/themes/other/global-variables) for the complete list. ## Development Workflow [#development-workflow] ### 1. Set Up Your Environment [#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 [#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 [#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 [#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 [#key-design-principles] ### Progressive Enhancement [#progressive-enhancement] Start with semantic HTML, enhance with CSS, add JavaScript for interactivity. Your themes should work without JavaScript when possible. ### Performance First [#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 [#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 [#accessibility] * Use semantic HTML elements * Provide alt text for images through editable fields * Ensure keyboard navigation works * Test with screen readers ## Next Steps [#next-steps] Ready to start building? Continue with: * **[Getting Started](/docs/themes/introduction/getting-started)** - Build your first Nimbu theme * **[Key Concepts](/docs/themes/concepts/layouts)** - Understand layouts, templates, and snippets * **[Using Content](/docs/themes/content/pages)** - Learn about pages, navigation, and channels * **[Using Filters](/docs/themes/filters/text-formatting)** - Master Liquid filters for data transformation Or explore real-world examples in the documentation to see how production themes use these features.