Theme System

Theme Directory Structure

themes/cartxis-default/
├── theme.json              # Manifest — name, slug, version, supports, settings
├── hooks.php               # Theme lifecycle hooks
├── config/                 # Theme configuration
├── screenshot.png          # Theme preview image
└── resources/views/
    ├── layouts/            # ThemeLayout.vue
    ├── components/         # Theme-specific components (7)
    │   ├── CartIcon.vue
    │   ├── CartItemSkeleton.vue
    │   ├── ProductCard.vue
    │   ├── ProductSkeleton.vue
    │   ├── QuickViewModal.vue
    │   ├── ThemeFooter.vue
    │   └── ThemeHeader.vue
    └── pages/              # Theme page overrides (10 sections)
        ├── Account/        # Dashboard, Orders, Addresses, Profile, Wishlist
        ├── Auth/           # Login, Register
        ├── CMS/            # Dynamic CMS pages
        ├── Cart/           # Shopping cart
        ├── Category/       # Category listing
        ├── Checkout/       # Checkout flow
        ├── Home/           # Homepage
        ├── Products/       # Product detail
        ├── Search/         # Search results
        └── Stripe/         # Stripe payment pages

theme.json Manifest

{
    "name": "Cartxis Default",
    "slug": "cartxis-default",
    "version": "1.0.0",
    "supports": ["widgets", "menus", "custom-logo", "custom-colors", "responsive", "dark-mode"],
    "settings": {
        "colors": { "primary": "#3b82f6", "secondary": "#8b5cf6" },
        "typography": { "font_family": "Inter, sans-serif" },
        "layout": { "container_width": "1280px" },
        "features": { "sticky_header": true, "wishlist": true, "quick_view": true }
    }
}

How Theme Resolution Works

1. Backend — Controller returns Inertia::render('themes/cartxis-default/pages/Home').
2. Vite — app.ts detects the themes/ prefix and resolves from ../../themes/{slug}/resources/views/{path}.vue via glob import.
3. Fallback — Pages without themes/ prefix resolve from resources/js/pages/.

Creating a Theme

1. Create themes/{slug}/ directory.
2. Add theme.json manifest.
3. Add resources/views/ with layouts, components, and pages.
4. Register theme in admin (Settings → Themes).