Theme Development

Build custom storefronts for Qumra e-commerce stores.

Quick Start

# 1. Install CLI
npm install -g @qumra/cli

# 2. Login (required first)
qumra user login

# 3. Create theme
qumra theme init

# 4. Start development
cd my-theme
qumra theme dev

Login Required

You must run qumra user login before using any other commands.

VS Code Extension

Install Qalab Extension for autocomplete and syntax highlighting.

Theme Structure

my-theme/
├── .qumra/              # Theme config
├── assets/              # CSS, JS, images
├── layouts/             # HTML templates
├── locales/             # Translations
├── pages/               # Page definitions
├── settings/            # Theme settings
├── templates/           # Header, footer
├── ui/                  # Reusable components
└── widgets/             # Page sections

View full structure →

Key Concepts

Concept	Description
Widgets	Page sections with settings and blocks
Settings	Customizable theme options
Layouts	Page HTML structure
Qalab	Template language

CLI Commands

Command	Description
qumra theme init	Create new theme
qumra theme dev	Start dev server
qumra theme publish	Publish to store
qumra gen widget <name>	Generate widget

Full CLI reference →

Creating Widgets

qumra gen widget hero-slider

This creates:

• widgets/hero-slider/schema.json - Widget settings
• widgets/hero-slider/widget.njk - Widget template

Learn more about widgets →

Publishing

# Publish and activate
qumra theme publish

# Version updates
qumra theme patch   # 1.0.0 → 1.0.1
qumra theme minor   # 1.0.0 → 1.1.0
qumra theme major   # 1.0.0 → 2.0.0

Resources

• Theme Structure - File organization
• Widgets - Building widgets
• Qalab Language - Template syntax
• Settings - Theme customization