--- url: /themes/introduction/overview.md description: >- Introduction to building custom storefronts and websites with Nimbu's Liquid-based theme system --- # 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 * **Gift Cards**: Sell, redeem and deliver gift cards with Liquid-customizable retrieval pages, PDFs and emails ### 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 (` `, ``, ``) 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: | 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](/themes/other/global-variables) 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: * **[Getting Started](/themes/introduction/getting-started)** - Build your first Nimbu theme * **[Key Concepts](/themes/concepts/layouts)** - Understand layouts, templates, and snippets * **[Using Content](/themes/content/pages)** - Learn about pages, navigation, and channels * **[Using Filters](/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.