Skip to content

Skeleton Theme

A skeleton theme is a minimal, working theme that you can use as a starting point. Copy these files to bootstrap a new theme quickly.

Minimal File Set

resources/views/
├── layout/
│   ├── layout.blade.php      ← Required
│   ├── header.blade.php      ← Recommended
│   └── footer.blade.php      ← Recommended
├── template/
│   └── home.blade.php        ← Required (homepage)
└── partial/
    └── homepageproduct.blade.php  ← Recommended (product card)

layout/layout.blade.php — Minimal Master Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    @yield('headtitle', '<title>' . ($page->settings->siteTitle ?? 'Store') . '</title>')
    @yield('headmeta')

    <meta name="description" content="{{ $page->settings->metaDescription ?? '' }}">

    <link rel="stylesheet" href="{{ cdn_asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/style.css') }}">

    @yield('headlink')
    @yield('style')
</head>
<body>
    @php $notification = getSiteNotification(); @endphp
    @if($notification->status)
        <div style="background:{{ $notification->backgroundcolor }};color:{{ $notification->fontcolor }};padding:8px;text-align:center;">
            {!! $notification->Content !!}
        </div>
    @endif

    @include('layout.header')

    @php $flash = flashMessenger(); @endphp
    @foreach($flash->getSuccessMessages() as $msg)
        <div class="alert alert-success m-2">{{ $msg }}</div>
    @endforeach
    @foreach($flash->getErrorMessages() as $msg)
        <div class="alert alert-danger m-2">{{ $msg }}</div>
    @endforeach

    <main>
        @yield('content')
    </main>

    @include('layout.footer')

    <script src="{{ cdn_asset('js/jquery.min.js') }}"></script>
    <script src="{{ cdn_asset('js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ theme_asset('js/app.js') }}"></script>
    {!! googleAnalytics() !!}
    @yield('script')
</body>
</html>

layout/header.blade.php — Minimal Header

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="{{ customUrl('home') }}">
            @if(getPath($themes->header_image ?? null))
                <img src="{{ getPath($themes->header_image) }}" alt="{{ $page->settings->siteTitle ?? 'Store' }}" height="40">
            @else
                {{ $page->settings->siteTitle ?? 'My Store' }}
            @endif
        </a>
        <div class="ms-auto d-flex align-items-center gap-2">
            @if(auth('customer')->check())
                <span class="text-light">{{ lmcUserDisplayName() }}</span>
                <a href="{{ customUrl('myaccount') }}" class="btn btn-outline-light btn-sm">Account</a>
            @else
                <a href="{{ customUrl('login') }}" class="btn btn-outline-light btn-sm">Login</a>
                <a href="{{ customUrl('register') }}" class="btn btn-light btn-sm">Register</a>
            @endif
            @if(!($page->settings->catalogMode ?? 0))
                <a href="{{ customUrl('cart_list') }}" class="btn btn-warning btn-sm">
                    Cart <span class="badge bg-danger">{{ getCart('cartProductQuantity') }}</span>
                </a>
            @endif
        </div>
    </div>
</nav>

<footer class="bg-dark text-light py-4 mt-5">
    <div class="container text-center">
        <p class="mb-1">{{ $page->settings->siteTitle ?? 'My Store' }}</p>
        <div>
            @foreach(getMenu('bottom') as $menu)
                <a href="{{ $menu['menu_url'] ?? '#' }}" class="text-light me-3">{{ $menu['menuName'] }}</a>
            @endforeach
        </div>
    </div>
</footer>

template/home.blade.php — Minimal Homepage

@extends('layout.layout')

@section('headtitle')
    <title>{{ $page->settings->siteTitle ?? 'Home' }}</title>
@endsection

@section('content')
<div class="container mt-4">
    <h2>Featured Products</h2>
    <div class="row">
        @foreach(featureProducts(8) as $product)
            <div class="col-6 col-md-3 mb-4">
                @include('partial.homepageproduct', compact('product'))
            </div>
        @endforeach
    </div>
</div>
@endsection

partial/homepageproduct.blade.php — Minimal Product Card

<div class="card h-100">
    <a href="{{ $product['detailUrl'] ?? '#' }}">
        <img src="{{ $product['image'] ?: noproductimage() }}"
             alt="{{ getAlt($product['image'] ?? null, $product['name'] ?? '') }}"
             class="card-img-top"
             style="height:180px; object-fit:contain;">
    </a>
    <div class="card-body d-flex flex-column">
        <h6 class="card-title">{{ tagShortText($product['name'] ?? '', 50) }}</h6>
        <div class="mt-auto">
            <strong>${{ tagPrice($product['specialPrice'] ?? $product['normalPrice'] ?? 0) }}</strong>
            @if(!($page->settings->catalogMode ?? 0) && ($product['availability'] ?? 0) > 0)
                <a href="{{ $product['addToCartUrl'] ?? '#' }}" class="btn btn-primary btn-sm d-block mt-2">Add to Cart</a>
            @else
                <a href="{{ $product['detailUrl'] ?? '#' }}" class="btn btn-outline-secondary btn-sm d-block mt-2">Details</a>
            @endif
        </div>
    </div>
</div>