Building a Clothing E-commerce with Laravel Filament

Laravel Filament has quickly become one of the most loved admin panel and TALL‑stack tools in the Laravel ecosystem. If you’re a developer who enjoys clean APIs, rapid CRUD generation, and full control over your UI, Filament is probably already on your radar.

In this article, we’ll:

1. Understand why Filament is a great fit for e‑commerce back offices
2. Design a simple clothing e‑commerce admin
3. Build Products, Categories, Sizes, Colors, and Orders
4. Share real sample code you can adapt to your own projects

This post assumes you already have basic Laravel and Eloquent knowledge.

Why Laravel Filament for E‑commerce?

Traditional e‑commerce admin panels are often bloated, slow, and hard to customize. Filament flips that model:

1. ⚡ Rapid CRUD with Resources
2. 🎨 Tailwind‑based UI with full customization
3. 🔒 Built‑in authorization & policies
4. 🧩 Easy relation managers (perfect for variants)
5. 📦 First‑class support for media, forms, and tables

For clothing e‑commerce — where products have sizes, colors, images, and stock — Filament is an excellent choice.

Sample Project: Clothing E‑commerce Admin

Features

1. Product management
2. Category management
3. Size & color variants
4. Product images
5. Stock tracking
6. Order listing

We’ll focus on the admin side, which is where Filament shines.

Step 1: Install Laravel & Filament

laravel new clothing-store

cd clothing-store

composer require filament/filament

php artisan filament:install

php artisan migrate

Create an admin user:

php artisan make:filament-user

Step 2: Database Structure

Products Table

Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->slug('slug')->unique();

$table->text('description')->nullable();

$table->decimal('price', 10, 2);

$table->boolean('is_active')->default(true);

$table->timestamps();

});

Categories Table

Schema::create('categories', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->slug('slug')->unique();

$table->timestamps();

});

Product Variants (Size & Color)

Schema::create('product_variants', function (Blueprint $table) {

$table->id();

$table->foreignId('product_id')->constrained()->cascadeOnDelete();

$table->string('size');

$table->string('color');

$table->integer('stock')->default(0);

$table->timestamps();

});

Step 3: Filament Product Resource

Generate the resource:

php artisan make:filament-resource Product

ProductResource.php (Form)

public static function form(Form $form): Form

{

return $form

->schema([

TextInput::make('name')

->required()

->live(onBlur: true)

->afterStateUpdated(fn ($state, callable $set) =>

$set('slug', Str::slug($state))

),

TextInput::make('slug')

->required()

->unique(ignoreRecord: true),

RichEditor::make('description'),

TextInput::make('price')

->numeric()

->required(),

Toggle::make('is_active')

->default(true),

]);

}

Step 4: Product Variants with Relation Manager

Create a relation manager:

php artisan make:filament-relation-manager ProductVariantRelationManager

ProductVariantRelationManager.php

public static function form(Form $form): Form

{

return $form

->schema([

Select::make('size')

->options([

'S' => 'Small',

'M' => 'Medium',

'L' => 'Large',

'XL' => 'Extra Large',

])

->required(),

TextInput::make('color')

->required(),

TextInput::make('stock')

->numeric()

->required(),

]);

}

This gives you inline variant management per product — a perfect fit for clothing.

Step 5: Product Images

Filament integrates beautifully with file uploads.

FileUpload::make('images')

->multiple()

->directory('products')

->image()

->imageEditor()

You can later enhance this with Spatie Media Library if needed.

Step 6: Orders (Read‑only Example)

Schema::create('orders', function (Blueprint $table) {

$table->id();

$table->string('order_number');

$table->decimal('total', 10, 2);

$table->string('status');

$table->timestamps();

});

Tables\Columns\BadgeColumn::make('status')

->colors([

'success' => 'completed',

'warning' => 'pending',

'danger' => 'cancelled',

])

Performance & UX Tips

1. Use table filters for sizes & categories
2. Add bulk actions for product activation
3. Cache category lists
4. Use widgets for daily sales & orders

Final Thoughts

Laravel Filament is not just an admin panel — it’s a developer productivity engine. For clothing e‑commerce projects, it provides:

1. Clean data modeling
2. Fast development cycles
3. Maintainable code
4. A modern admin UX

If you’re building an e‑commerce project and want full control without the overhead of traditional platforms, Filament is absolutely worth it.

Happy coding 👋