Theme Development Complete Guide

Nazmart Theme Developer Guide

Everything you need to build a fully independent, zero-core-change theme for the Nazmart multi-tenant ecommerce platform.

Introduction

Nazmart is a multi-tenant Laravel SaaS platform. Each tenant (shop owner) can activate a theme that controls the entire look and feel of their storefront. Themes live in a dedicated themes/ directory at the project root and are completely self-contained — no modifications to the core application are needed.

Key design principles:

Auto-override — place a file in the right path and it automatically overrides the default, no registration needed.
Fallback chain — if a theme doesn't provide a view, the system falls back to the default theme, then to core views. Themes only need to ship files that differ from the default.
Stable API — theme templates never import core classes or call raw routes. The Theme Helper API and Context API act as a stable contract layer.
WordPress-style template tags — typed wrapper objects with clean methods replace raw Eloquent models in templates.

Quick Start

1. Create your theme directory

mkdir -p themes/mytheme/views
mkdir -p themes/mytheme/assets/css
mkdir -p themes/mytheme/assets/js
mkdir -p themes/mytheme/assets/img
mkdir -p themes/mytheme/screenshot
mkdir -p themes/mytheme/demo

2. Create theme.json

themes/mytheme/theme.json

{
  "name": "My Theme",
  "slug": "mytheme",
  "version": "1.0.0",
  "description": "A beautiful food & restaurant theme",
  "niche": "restaurant",
  "status": true,
  "price": 0,
  "license": "free",
  "author": "Your Name",
  "headerHook": [
    {
      "style": ["style"],
      "rtl_style": [],
      "script": [],
      "blade": [],
      "navbarArea": "navbar",
      "breadcrumbArea": "breadcrumb",
      "loadCoreStyle": {}
    }
  ],
  "footerHook": [
    {
      "style": [],
      "script": ["main"],
      "blade": [],
      "widgetArea": "widget-area",
      "loadCoreScript": {}
    }
  ],
  "screenshot": [{ "primary": "screenshot.jpg" }]
}

3. Publish your assets

# Creates a symlink: public/themes/mytheme → ../../themes/mytheme/assets
php artisan theme:publish mytheme

4. Activate for a tenant

In the landlord admin panel → Themes, assign mytheme to a tenant. The system will automatically load your views and assets.

Directory Structure

themes/
├── _stubs/                    ← scaffold templates (copied by theme:create)
├── default/                   ← canonical fallback theme
│   ├── theme.json
│   ├── views/
│   │   ├── frontend/
│   │   │   ├── shop/
│   │   │   ├── pages/
│   │   │   └── partials/
│   │   ├── header/
│   │   └── footer/
│   └── assets/
│       ├── css/
│       └── js/
└── mytheme/               ← your theme
    ├── theme.json             ← required
    ├── views/
    │   ├── frontend/             ← overrides theme:: namespace
    │   │   ├── shop/
    │   │   │   ├── all-products.blade.php    ← shop listing
    │   │   │   ├── product_details/
    │   │   │   │   └── product-details.blade.php ← product detail
    │   │   │   ├── checkout/
    │   │   │   │   └── checkout.blade.php        ← checkout
    │   │   │   └── cart/
    │   │   │       └── cart.blade.php            ← cart
    │   │   └── pages/
    │   │       └── contact.blade.php         ← any static page
    │   ├── header/                   ← navbar, breadcrumb etc
    │   │   ├── navbar.blade.php
    │   │   └── breadcrumb.blade.php
    │   ├── footer/
    │   │   └── widget-area.blade.php
    │   └── modules/               ← module view overrides
    │       └── blog/               ← overrides blog:: namespace
    │           └── tenant/frontend/blog/
    │               ├── blog-all.blade.php    ← blog listing
    │               └── blog-single.blade.php ← blog detail
    ├── assets/
    │   ├── css/
    │   │   ├── style.css              ← main stylesheet
    │   │   └── rtl.css               ← RTL support (optional)
    │   └── js/
    │       └── main.js
    ├── Widgets/                  ← page builder widgets
    │   └── HeroSection.php
    ├── screenshot/
    │   └── screenshot.jpg
    └── demo/
        └── data.json             ← demo content import

theme.json Configuration

Key	Type	Required	Description
`name`	string	✅	Display name shown in admin panel
`slug`	string	✅	Unique identifier, matches directory name
`version`	string	✅	Semantic version e.g. `"1.0.0"`
`description`	string	—	Short description for marketplace
`niche`	string	—	Category: `restaurant`, `fashion`, `electronics`…
`status`	boolean	✅	Must be `true` for tenant use
`price`	number	—	Marketplace price (0 = free)
`author`	string	—	Your name / company
`headerHook`	array	✅	CSS/JS files and blade areas for the header
`footerHook`	array	✅	CSS/JS files and blade areas for the footer
`screenshot`	array	—	Primary screenshot filename in `screenshot/`

headerHook properties

Property	Description	Example
`style`	CSS files to load from `assets/css/` (no extension)	`["style", "pages"]`
`rtl_style`	RTL CSS files (loaded when RTL is active)	`["rtl"]`
`script`	JS files to load in `<head>` from `assets/js/`	`[]`
`blade`	Blade partials to include in header hook slot	`["analytics"]`
`navbarArea`	Blade file for the navbar (inside `views/header/`)	`"navbar"`
`breadcrumbArea`	Blade file for breadcrumbs	`"breadcrumb"`
`loadCoreStyle`	Object to exclude specific core CSS files. Set key to `false` to skip.	`{"odometer": false}`

footerHook properties

Property	Description	Example
`style`	CSS files to load before	`[]`
`script`	JS files to load before from `assets/js/`	`["main"]`
`blade`	Blade partials to include in footer hook slot	`[]`
`widgetArea`	Blade file for the footer widget columns	`"widget-area"`
`loadCoreScript`	Exclude specific core JS. Set key to `false` to skip.	`{"odometer": false}`

In this guide

Still stuck?

Our support team is ready to help you get set up.

Get support