From d79817f069e7add6c8331e6407e935e3a99b2dfa Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sun, 26 Oct 2025 19:59:27 +0100
Subject: [PATCH] Adding jinja shop templates

---
 app/templates/shop/account/addresses.html |  11 +
 app/templates/shop/account/login.html     | 249 +++++++
 app/templates/shop/account/orders.html    |  11 +
 app/templates/shop/account/profile.html   |  11 +
 app/templates/shop/account/register.html  | 341 ++++++++++
 app/templates/shop/cart.html              | 489 ++++++++++++++
 app/templates/shop/checkout.html          |  11 +
 app/templates/shop/home.html              |  11 +
 app/templates/shop/product.html           | 771 ++++++++++++++++++++++
 app/templates/shop/products.html          | 459 +++++++++++++
 app/templates/shop/search.html            |  11 +
 11 files changed, 2375 insertions(+)
 create mode 100644 app/templates/shop/account/addresses.html
 create mode 100644 app/templates/shop/account/login.html
 create mode 100644 app/templates/shop/account/orders.html
 create mode 100644 app/templates/shop/account/profile.html
 create mode 100644 app/templates/shop/account/register.html
 create mode 100644 app/templates/shop/cart.html
 create mode 100644 app/templates/shop/checkout.html
 create mode 100644 app/templates/shop/home.html
 create mode 100644 app/templates/shop/product.html
 create mode 100644 app/templates/shop/products.html
 create mode 100644 app/templates/shop/search.html
diff --git a/app/templates/shop/account/addresses.html b/app/templates/shop/account/addresses.html
new file mode 100644
index 00000000..0ca25b1b
--- /dev/null
+++ b/app/templates/shop/account/addresses.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Address management</title>
+</head>
+<body>
+    <-- Address management -->
+</body>
+</html>
diff --git a/app/templates/shop/account/login.html b/app/templates/shop/account/login.html
new file mode 100644
index 00000000..150e8934
--- /dev/null
+++ b/app/templates/shop/account/login.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title><!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - {{ vendor.name }}</title>
+    <link rel="stylesheet" href="/static/css/shared/base.css">
+    <link rel="stylesheet" href="/static/css/shared/auth.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body class="auth-page">
+    <div class="login-container" 
+         x-data="customerLogin()"
+         x-init="checkRegistrationSuccess()"
+         data-vendor-id="{{ vendor.id }}"
+         data-vendor-name="{{ vendor.name }}"
+    >
+        <!-- Header -->
+        <div class="login-header">
+            {% if vendor.logo_url %}
+            <img src="{{ vendor.logo_url }}" alt="{{ vendor.name }}" class="auth-logo">
+            {% else %}
+            <div class="auth-logo">🛒</div>
+            {% endif %}
+            <h1>Welcome Back</h1>
+            <p>Sign in to {{ vendor.name }}</p>
+        </div>
+
+        <!-- Alert Box -->
+        <div x-show="alert.show" 
+             x-transition
+             :class="'alert alert-' + alert.type"
+             x-text="alert.message"
+        ></div>
+
+        <!-- Login Form -->
+        <form @submit.prevent="handleLogin">
+            <!-- Email -->
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input
+                    type="email"
+                    id="email"
+                    x-model="credentials.email"
+                    required
+                    placeholder="your@email.com"
+                    :class="{ 'error': errors.email }"
+                    @input="clearAllErrors()"
+                >
+                <div x-show="errors.email" 
+                     x-text="errors.email" 
+                     class="error-message show"
+                ></div>
+            </div>
+
+            <!-- Password -->
+            <div class="form-group">
+                <label for="password">Password</label>
+                <div class="password-group">
+                    <input
+                        :type="showPassword ? 'text' : 'password'"
+                        id="password"
+                        x-model="credentials.password"
+                        required
+                        placeholder="Enter your password"
+                        :class="{ 'error': errors.password }"
+                        @input="clearAllErrors()"
+                    >
+                    <button 
+                        type="button"
+                        class="password-toggle"
+                        @click="showPassword = !showPassword"
+                    >
+                        <span x-text="showPassword ? '👁️' : '👁️‍🗨️'"></span>
+                    </button>
+                </div>
+                <div x-show="errors.password" 
+                     x-text="errors.password" 
+                     class="error-message show"
+                ></div>
+            </div>
+
+            <!-- Remember Me & Forgot Password -->
+            <div class="form-options">
+                <div class="remember-me">
+                    <input
+                        type="checkbox"
+                        id="rememberMe"
+                        x-model="rememberMe"
+                    >
+                    <label for="rememberMe">Remember me</label>
+                </div>
+                <a href="/shop/account/forgot-password" class="forgot-password">
+                    Forgot password?
+                </a>
+            </div>
+
+            <!-- Submit Button -->
+            <button 
+                type="submit" 
+                class="btn-login"
+                :disabled="loading"
+            >
+                <span x-show="loading" class="loading-spinner"></span>
+                <span x-text="loading ? 'Signing in...' : 'Sign In'"></span>
+            </button>
+        </form>
+
+        <!-- Register Link -->
+        <div class="login-footer">
+            <div class="auth-footer-text">Don't have an account?</div>
+            <a href="/shop/account/register">Create an account</a>
+        </div>
+
+        <!-- Back to Shop -->
+        <div class="login-footer" style="border-top: none; padding-top: 0;">
+            <a href="/shop">← Continue shopping</a>
+        </div>
+    </div>
+
+    <script>
+        function customerLogin() {
+            return {
+                // Data
+                credentials: {
+                    email: '',
+                    password: ''
+                },
+                rememberMe: false,
+                showPassword: false,
+                loading: false,
+                errors: {},
+                alert: {
+                    show: false,
+                    type: 'error',
+                    message: ''
+                },
+                
+                // Get vendor data
+                get vendorId() {
+                    return this.$el.dataset.vendorId;
+                },
+                
+                get vendorName() {
+                    return this.$el.dataset.vendorName;
+                },
+                
+                // Check if redirected after registration
+                checkRegistrationSuccess() {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    if (urlParams.get('registered') === 'true') {
+                        this.showAlert(
+                            'Account created successfully! Please sign in.',
+                            'success'
+                        );
+                    }
+                },
+                
+                // Clear errors
+                clearAllErrors() {
+                    this.errors = {};
+                    this.alert.show = false;
+                },
+                
+                // Show alert
+                showAlert(message, type = 'error') {
+                    this.alert = {
+                        show: true,
+                        type: type,
+                        message: message
+                    };
+                    
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                },
+                
+                // Handle login
+                async handleLogin() {
+                    this.clearAllErrors();
+                    
+                    // Basic validation
+                    if (!this.credentials.email) {
+                        this.errors.email = 'Email is required';
+                        return;
+                    }
+                    
+                    if (!this.credentials.password) {
+                        this.errors.password = 'Password is required';
+                        return;
+                    }
+                    
+                    this.loading = true;
+                    
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/customers/login`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    username: this.credentials.email, // API expects username
+                                    password: this.credentials.password
+                                })
+                            }
+                        );
+                        
+                        const data = await response.json();
+                        
+                        if (!response.ok) {
+                            throw new Error(data.detail || 'Login failed');
+                        }
+                        
+                        // Store token and user data
+                        localStorage.setItem('customer_token', data.access_token);
+                        localStorage.setItem('customer_user', JSON.stringify(data.user));
+                        
+                        // Store vendor context
+                        localStorage.setItem('customer_vendor_id', this.vendorId);
+                        
+                        this.showAlert('Login successful! Redirecting...', 'success');
+                        
+                        // Redirect to account page or cart
+                        setTimeout(() => {
+                            const returnUrl = new URLSearchParams(window.location.search).get('return') || '/shop/account';
+                            window.location.href = returnUrl;
+                        }, 1000);
+                        
+                    } catch (error) {
+                        console.error('Login error:', error);
+                        this.showAlert(error.message || 'Invalid email or password');
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }
+        }
+    </script>
+</body>
+</html></title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/shop/account/orders.html b/app/templates/shop/account/orders.html
new file mode 100644
index 00000000..909a3bf9
--- /dev/null
+++ b/app/templates/shop/account/orders.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order history</title>
+</head>
+<body>
+    <-- Order history -->
+</body>
+</html>
diff --git a/app/templates/shop/account/profile.html b/app/templates/shop/account/profile.html
new file mode 100644
index 00000000..96b6d750
--- /dev/null
+++ b/app/templates/shop/account/profile.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer profile</title>
+</head>
+<body>
+    <-- Customer profile -->
+</body>
+</html>
diff --git a/app/templates/shop/account/register.html b/app/templates/shop/account/register.html
new file mode 100644
index 00000000..56ff2d05
--- /dev/null
+++ b/app/templates/shop/account/register.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create Account - {{ vendor.name }}</title>
+    <link rel="stylesheet" href="/static/css/shared/base.css">
+    <link rel="stylesheet" href="/static/css/shared/auth.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body class="auth-page">
+<div class="login-container"
+     x-data="customerRegistration()"
+     data-vendor-id="{{ vendor.id }}"
+     data-vendor-name="{{ vendor.name }}"
+>
+    <!-- Header -->
+    <div class="login-header">
+        {% if vendor.logo_url %}
+        <img src="{{ vendor.logo_url }}" alt="{{ vendor.name }}" class="auth-logo">
+        {% else %}
+        <div class="auth-logo">🛒</div>
+        {% endif %}
+        <h1>Create Account</h1>
+        <p>Join {{ vendor.name }}</p>
+    </div>
+
+    <!-- Alert Box -->
+    <div x-show="alert.show"
+         x-transition
+         :class="'alert alert-' + alert.type"
+         x-text="alert.message"
+    ></div>
+
+    <!-- Registration Form -->
+    <form @submit.prevent="handleRegister">
+        <!-- First Name -->
+        <div class="form-group">
+            <label for="firstName">First Name <span class="required">*</span></label>
+            <input
+                    type="text"
+                    id="firstName"
+                    x-model="formData.first_name"
+                    required
+                    placeholder="Enter your first name"
+                    :class="{ 'error': errors.first_name }"
+                    @input="clearError('first_name')"
+            >
+            <div x-show="errors.first_name"
+                 x-text="errors.first_name"
+                 class="error-message show"
+            ></div>
+        </div>
+
+        <!-- Last Name -->
+        <div class="form-group">
+            <label for="lastName">Last Name <span class="required">*</span></label>
+            <input
+                    type="text"
+                    id="lastName"
+                    x-model="formData.last_name"
+                    required
+                    placeholder="Enter your last name"
+                    :class="{ 'error': errors.last_name }"
+                    @input="clearError('last_name')"
+            >
+            <div x-show="errors.last_name"
+                 x-text="errors.last_name"
+                 class="error-message show"
+            ></div>
+        </div>
+
+        <!-- Email -->
+        <div class="form-group">
+            <label for="email">Email Address <span class="required">*</span></label>
+            <input
+                    type="email"
+                    id="email"
+                    x-model="formData.email"
+                    required
+                    placeholder="your@email.com"
+                    :class="{ 'error': errors.email }"
+                    @input="clearError('email')"
+            >
+            <div x-show="errors.email"
+                 x-text="errors.email"
+                 class="error-message show"
+            ></div>
+        </div>
+
+        <!-- Phone (Optional) -->
+        <div class="form-group">
+            <label for="phone">Phone Number</label>
+            <input
+                    type="tel"
+                    id="phone"
+                    x-model="formData.phone"
+                    placeholder="+352 123 456 789"
+            >
+        </div>
+
+        <!-- Password -->
+        <div class="form-group">
+            <label for="password">Password <span class="required">*</span></label>
+            <div class="password-group">
+                <input
+                        :type="showPassword ? 'text' : 'password'"
+                        id="password"
+                        x-model="formData.password"
+                        required
+                        placeholder="At least 8 characters"
+                        :class="{ 'error': errors.password }"
+                        @input="clearError('password')"
+                >
+                <button
+                        type="button"
+                        class="password-toggle"
+                        @click="showPassword = !showPassword"
+                >
+                    <span x-text="showPassword ? '👁️' : '👁️‍🗨️'"></span>
+                </button>
+            </div>
+            <div class="form-help">
+                Must contain at least 8 characters, one letter, and one number
+            </div>
+            <div x-show="errors.password"
+                 x-text="errors.password"
+                 class="error-message show"
+            ></div>
+        </div>
+
+        <!-- Confirm Password -->
+        <div class="form-group">
+            <label for="confirmPassword">Confirm Password <span class="required">*</span></label>
+            <input
+                    :type="showPassword ? 'text' : 'password'"
+                    id="confirmPassword"
+                    x-model="confirmPassword"
+                    required
+                    placeholder="Re-enter your password"
+                    :class="{ 'error': errors.confirmPassword }"
+                    @input="clearError('confirmPassword')"
+            >
+            <div x-show="errors.confirmPassword"
+                 x-text="errors.confirmPassword"
+                 class="error-message show"
+            ></div>
+        </div>
+
+        <!-- Marketing Consent -->
+        <div class="form-group">
+            <div class="remember-me">
+                <input
+                        type="checkbox"
+                        id="marketingConsent"
+                        x-model="formData.marketing_consent"
+                >
+                <label for="marketingConsent" style="font-weight: normal;">
+                    I'd like to receive news and special offers
+                </label>
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <button
+                type="submit"
+                class="btn-login"
+                :disabled="loading"
+        >
+            <span x-show="loading" class="loading-spinner"></span>
+            <span x-text="loading ? 'Creating Account...' : 'Create Account'"></span>
+        </button>
+    </form>
+
+    <!-- Login Link -->
+    <div class="login-footer">
+        <div class="auth-footer-text">Already have an account?</div>
+        <a href="/shop/account/login">Sign in instead</a>
+    </div>
+</div>
+
+<script>
+    function customerRegistration() {
+        return {
+            // Data
+            formData: {
+                first_name: '',
+                last_name: '',
+                email: '',
+                phone: '',
+                password: '',
+                marketing_consent: false
+            },
+            confirmPassword: '',
+            showPassword: false,
+            loading: false,
+            errors: {},
+            alert: {
+                show: false,
+                type: 'error',
+                message: ''
+            },
+
+            // Get vendor data from element
+            get vendorId() {
+                return this.$el.dataset.vendorId;
+            },
+
+            get vendorName() {
+                return this.$el.dataset.vendorName;
+            },
+
+            // Clear specific error
+            clearError(field) {
+                delete this.errors[field];
+            },
+
+            // Clear all errors
+            clearAllErrors() {
+                this.errors = {};
+                this.alert.show = false;
+            },
+
+            // Show alert
+            showAlert(message, type = 'error') {
+                this.alert = {
+                    show: true,
+                    type: type,
+                    message: message
+                };
+
+                // Auto-hide success messages
+                if (type === 'success') {
+                    setTimeout(() => {
+                        this.alert.show = false;
+                    }, 3000);
+                }
+
+                // Scroll to top
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            },
+
+            // Validate form
+            validateForm() {
+                this.clearAllErrors();
+                let isValid = true;
+
+                // First name
+                if (!this.formData.first_name.trim()) {
+                    this.errors.first_name = 'First name is required';
+                    isValid = false;
+                }
+
+                // Last name
+                if (!this.formData.last_name.trim()) {
+                    this.errors.last_name = 'Last name is required';
+                    isValid = false;
+                }
+
+                // Email
+                if (!this.formData.email.trim()) {
+                    this.errors.email = 'Email is required';
+                    isValid = false;
+                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
+                    this.errors.email = 'Please enter a valid email address';
+                    isValid = false;
+                }
+
+                // Password
+                if (!this.formData.password) {
+                    this.errors.password = 'Password is required';
+                    isValid = false;
+                } else if (this.formData.password.length < 8) {
+                    this.errors.password = 'Password must be at least 8 characters';
+                    isValid = false;
+                } else if (!/[a-zA-Z]/.test(this.formData.password)) {
+                    this.errors.password = 'Password must contain at least one letter';
+                    isValid = false;
+                } else if (!/[0-9]/.test(this.formData.password)) {
+                    this.errors.password = 'Password must contain at least one number';
+                    isValid = false;
+                }
+
+                // Confirm password
+                if (this.formData.password !== this.confirmPassword) {
+                    this.errors.confirmPassword = 'Passwords do not match';
+                    isValid = false;
+                }
+
+                return isValid;
+            },
+
+            // Handle registration
+            async handleRegister() {
+                if (!this.validateForm()) {
+                    return;
+                }
+
+                this.loading = true;
+
+                try {
+                    const response = await fetch(
+                        `/api/v1/public/vendors/${this.vendorId}/customers/register`,
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(this.formData)
+                        }
+                    );
+
+                    const data = await response.json();
+
+                    if (!response.ok) {
+                        throw new Error(data.detail || 'Registration failed');
+                    }
+
+                    // Success!
+                    this.showAlert(
+                        'Account created successfully! Redirecting to login...',
+                        'success'
+                    );
+
+                    // Redirect to login after 2 seconds
+                    setTimeout(() => {
+                        window.location.href = '/shop/account/login?registered=true';
+                    }, 2000);
+
+                } catch (error) {
+                    console.error('Registration error:', error);
+                    this.showAlert(error.message || 'Registration failed. Please try again.');
+                } finally {
+                    this.loading = false;
+                }
+            }
+        }
+    }
+</script>
+</body>
+</html>
diff --git a/app/templates/shop/cart.html b/app/templates/shop/cart.html
new file mode 100644
index 00000000..cc14648a
--- /dev/null
+++ b/app/templates/shop/cart.html
@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shopping Cart - {{ vendor.name }}</title>
+    <link rel="stylesheet" href="/static/css/shared/base.css">
+    <link rel="stylesheet" href="/static/css/vendor/vendor.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body>
+<div x-data="shoppingCart()"
+     x-init="loadCart()"
+     data-vendor-id="{{ vendor.id }}"
+>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-left">
+            <h1>🛒 Shopping Cart</h1>
+        </div>
+        <div class="header-right">
+            <a href="/shop" class="btn-secondary">← Continue Shopping</a>
+        </div>
+    </header>
+
+    <div class="container">
+        <!-- Loading State -->
+        <div x-show="loading && items.length === 0" class="loading">
+            <div class="loading-spinner-lg"></div>
+            <p>Loading your cart...</p>
+        </div>
+
+        <!-- Empty Cart -->
+        <div x-show="!loading && items.length === 0" class="empty-state">
+            <div class="empty-state-icon">🛒</div>
+            <h3>Your cart is empty</h3>
+            <p>Add some products to get started!</p>
+            <a href="/shop/products" class="btn-primary">Browse Products</a>
+        </div>
+
+        <!-- Cart Items -->
+        <div x-show="items.length > 0" class="cart-content">
+            <!-- Cart Items List -->
+            <div class="cart-items">
+                <template x-for="item in items" :key="item.product_id">
+                    <div class="cart-item-card">
+                        <div class="item-image">
+                            <img :src="item.image_url || '/static/images/placeholder.png'"
+                                 :alt="item.name">
+                        </div>
+
+                        <div class="item-details">
+                            <h3 class="item-name" x-text="item.name"></h3>
+                            <p class="item-sku" x-text="'SKU: ' + item.sku"></p>
+                            <p class="item-price">
+                                €<span x-text="parseFloat(item.price).toFixed(2)"></span>
+                            </p>
+                        </div>
+
+                        <div class="item-quantity">
+                            <label>Quantity:</label>
+                            <div class="quantity-controls">
+                                <button
+                                        @click="updateQuantity(item.product_id, item.quantity - 1)"
+                                        :disabled="item.quantity <= 1 || updating"
+                                        class="btn-quantity"
+                                >
+                                    −
+                                </button>
+                                <input
+                                        type="number"
+                                        :value="item.quantity"
+                                        @change="updateQuantity(item.product_id, $event.target.value)"
+                                        min="1"
+                                        max="99"
+                                        :disabled="updating"
+                                        class="quantity-input"
+                                >
+                                <button
+                                        @click="updateQuantity(item.product_id, item.quantity + 1)"
+                                        :disabled="updating"
+                                        class="btn-quantity"
+                                >
+                                    +
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="item-total">
+                            <label>Subtotal:</label>
+                            <p class="item-total-price">
+                                €<span x-text="(parseFloat(item.price) * item.quantity).toFixed(2)"></span>
+                            </p>
+                        </div>
+
+                        <div class="item-actions">
+                            <button
+                                    @click="removeItem(item.product_id)"
+                                    :disabled="updating"
+                                    class="btn-remove"
+                                    title="Remove from cart"
+                            >
+                                🗑️
+                            </button>
+                        </div>
+                    </div>
+                </template>
+            </div>
+
+            <!-- Cart Summary -->
+            <div class="cart-summary">
+                <div class="summary-card">
+                    <h3>Order Summary</h3>
+
+                    <div class="summary-row">
+                        <span>Subtotal (<span x-text="totalItems"></span> items):</span>
+                        <span>€<span x-text="subtotal.toFixed(2)"></span></span>
+                    </div>
+
+                    <div class="summary-row">
+                        <span>Shipping:</span>
+                        <span x-text="shipping > 0 ? '€' + shipping.toFixed(2) : 'FREE'"></span>
+                    </div>
+
+                    <div class="summary-row summary-total">
+                        <span>Total:</span>
+                        <span class="total-amount">€<span x-text="total.toFixed(2)"></span></span>
+                    </div>
+
+                    <button
+                            @click="proceedToCheckout()"
+                            :disabled="updating || items.length === 0"
+                            class="btn-primary btn-checkout"
+                    >
+                        Proceed to Checkout
+                    </button>
+
+                    <a href="/shop/products" class="btn-outline">
+                        Continue Shopping
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function shoppingCart() {
+        return {
+            items: [],
+            loading: false,
+            updating: false,
+            vendorId: null,
+            sessionId: null,
+
+            // Computed properties
+            get totalItems() {
+                return this.items.reduce((sum, item) => sum + item.quantity, 0);
+            },
+
+            get subtotal() {
+                return this.items.reduce((sum, item) =>
+                    sum + (parseFloat(item.price) * item.quantity), 0
+                );
+            },
+
+            get shipping() {
+                // Free shipping over €50
+                return this.subtotal >= 50 ? 0 : 5.99;
+            },
+
+            get total() {
+                return this.subtotal + this.shipping;
+            },
+
+            // Initialize
+            init() {
+                this.vendorId = this.$el.dataset.vendorId;
+                this.sessionId = this.getOrCreateSessionId();
+            },
+
+            // Get or create session ID
+            getOrCreateSessionId() {
+                let sessionId = localStorage.getItem('cart_session_id');
+                if (!sessionId) {
+                    sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                    localStorage.setItem('cart_session_id', sessionId);
+                }
+                return sessionId;
+            },
+
+            // Load cart from API
+            async loadCart() {
+                this.loading = true;
+
+                try {
+                    const response = await fetch(
+                        `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
+                    );
+
+                    if (response.ok) {
+                        const data = await response.json();
+                        this.items = data.items || [];
+                    }
+                } catch (error) {
+                    console.error('Failed to load cart:', error);
+                } finally {
+                    this.loading = false;
+                }
+            },
+
+            // Update item quantity
+            async updateQuantity(productId, newQuantity) {
+                newQuantity = parseInt(newQuantity);
+
+                if (newQuantity < 1 || newQuantity > 99) return;
+
+                this.updating = true;
+
+                try {
+                    const response = await fetch(
+                        `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items/${productId}`,
+                        {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({ quantity: newQuantity })
+                        }
+                    );
+
+                    if (response.ok) {
+                        await this.loadCart();
+                    } else {
+                        throw new Error('Failed to update quantity');
+                    }
+                } catch (error) {
+                    console.error('Update quantity error:', error);
+                    alert('Failed to update quantity. Please try again.');
+                } finally {
+                    this.updating = false;
+                }
+            },
+
+            // Remove item from cart
+            async removeItem(productId) {
+                if (!confirm('Remove this item from your cart?')) {
+                    return;
+                }
+
+                this.updating = true;
+
+                try {
+                    const response = await fetch(
+                        `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items/${productId}`,
+                        {
+                            method: 'DELETE'
+                        }
+                    );
+
+                    if (response.ok) {
+                        await this.loadCart();
+                    } else {
+                        throw new Error('Failed to remove item');
+                    }
+                } catch (error) {
+                    console.error('Remove item error:', error);
+                    alert('Failed to remove item. Please try again.');
+                } finally {
+                    this.updating = false;
+                }
+            },
+
+            // Proceed to checkout
+            proceedToCheckout() {
+                // Check if customer is logged in
+                const token = localStorage.getItem('customer_token');
+
+                if (!token) {
+                    // Redirect to login with return URL
+                    window.location.href = '/shop/account/login?return=/shop/checkout';
+                } else {
+                    window.location.href = '/shop/checkout';
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    /* Cart-specific styles */
+    .cart-content {
+        display: grid;
+        grid-template-columns: 1fr 350px;
+        gap: var(--spacing-lg);
+        margin-top: var(--spacing-lg);
+    }
+
+    .cart-items {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .cart-item-card {
+        background: white;
+        border-radius: var(--radius-lg);
+        padding: var(--spacing-lg);
+        display: grid;
+        grid-template-columns: 100px 1fr auto auto auto;
+        gap: var(--spacing-lg);
+        align-items: center;
+        box-shadow: var(--shadow-md);
+    }
+
+    .item-image img {
+        width: 100px;
+        height: 100px;
+        object-fit: cover;
+        border-radius: var(--radius-md);
+    }
+
+    .item-name {
+        font-size: var(--font-lg);
+        font-weight: 600;
+    margin-bottom: var(--spacing-xs);
+    }
+
+    .item-sku {
+        font-size: var(--font-sm);
+        color: var(--text-muted);
+        margin-bottom: var(--spacing-xs);
+    }
+
+    .item-price {
+        font-size: var(--font-lg);
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+
+    .quantity-controls {
+        display: flex;
+        gap: var(--spacing-sm);
+        align-items: center;
+    }
+
+    .btn-quantity {
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--border-color);
+        background: white;
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        font-size: var(--font-lg);
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-quantity:hover:not(:disabled) {
+        background: var(--gray-50);
+        border-color: var(--primary-color);
+    }
+
+    .btn-quantity:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .quantity-input {
+        width: 60px;
+        text-align: center;
+        padding: 8px;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-sm);
+    }
+
+    .item-total-price {
+        font-size: var(--font-xl);
+        font-weight: 700;
+        color: var(--text-primary);
+    }
+
+    .btn-remove {
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--border-color);
+        background: white;
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        font-size: var(--font-lg);
+        transition: all var(--transition-base);
+    }
+
+    .btn-remove:hover:not(:disabled) {
+        background: var(--danger-color);
+        border-color: var(--danger-color);
+        color: white;
+    }
+
+    .cart-summary {
+        position: sticky;
+        top: var(--spacing-lg);
+        height: fit-content;
+    }
+
+    .summary-card {
+        background: white;
+        border-radius: var(--radius-lg);
+        padding: var(--spacing-lg);
+        box-shadow: var(--shadow-md);
+    }
+
+    .summary-card h3 {
+        font-size: var(--font-xl);
+        margin-bottom: var(--spacing-lg);
+        padding-bottom: var(--spacing-md);
+        border-bottom: 2px solid var(--border-color);
+    }
+
+    .summary-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-md);
+        font-size: var(--font-base);
+    }
+
+    .summary-total {
+        font-size: var(--font-lg);
+        font-weight: 700;
+        padding-top: var(--spacing-md);
+        border-top: 2px solid var(--border-color);
+        margin-top: var(--spacing-md);
+    }
+
+    .total-amount {
+        color: var(--primary-color);
+        font-size: var(--font-2xl);
+    }
+
+    .btn-checkout {
+        width: 100%;
+        margin-top: var(--spacing-lg);
+        margin-bottom: var(--spacing-md);
+    }
+
+    .btn-outline {
+        width: 100%;
+        display: block;
+        text-align: center;
+        padding: 10px 20px;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .cart-content {
+            grid-template-columns: 1fr;
+        }
+
+        .cart-summary {
+            position: static;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .cart-item-card {
+            grid-template-columns: 80px 1fr;
+            gap: var(--spacing-md);
+        }
+
+        .item-image img {
+            width: 80px;
+            height: 80px;
+        }
+
+        .item-quantity,
+        .item-total {
+            grid-column: 2;
+        }
+
+        .item-actions {
+            grid-column: 2;
+            justify-self: end;
+        }
+    }
+</style>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/shop/checkout.html b/app/templates/shop/checkout.html
new file mode 100644
index 00000000..3270d419
--- /dev/null
+++ b/app/templates/shop/checkout.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout process</title>
+</head>
+<body>
+    <-- Checkout process -->
+</body>
+</html>
diff --git a/app/templates/shop/home.html b/app/templates/shop/home.html
new file mode 100644
index 00000000..8e463635
--- /dev/null
+++ b/app/templates/shop/home.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop homepage</title>
+</head>
+<body>
+    <-- Shop homepage -->
+</body>
+</html>
diff --git a/app/templates/shop/product.html b/app/templates/shop/product.html
new file mode 100644
index 00000000..77e5e639
--- /dev/null
+++ b/app/templates/shop/product.html
@@ -0,0 +1,771 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ product.name if product else 'Product' }} - {{ vendor.name }}</title>
+    <link rel="stylesheet" href="/static/css/shared/base.css">
+    <link rel="stylesheet" href="/static/css/vendor/vendor.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body>
+    <div x-data="productDetail()"
+         x-init="loadProduct()"
+         data-vendor-id="{{ vendor.id }}"
+         data-product-id="{{ product_id }}"
+    >
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <a href="/shop/products" class="btn-back">← Back to Products</a>
+                <h1>{{ vendor.name }}</h1>
+            </div>
+            <div class="header-right">
+                <a href="/shop/cart" class="btn-primary">
+                    🛒 Cart (<span x-text="cartCount"></span>)
+                </a>
+            </div>
+        </header>
+
+        <!-- Loading State -->
+        <div x-show="loading" class="container">
+            <div class="loading">
+                <div class="loading-spinner-lg"></div>
+                <p>Loading product...</p>
+            </div>
+        </div>
+
+        <!-- Product Detail -->
+        <div x-show="!loading && product" class="container">
+            <div class="product-detail-container">
+                <!-- Product Images -->
+                <div class="product-images">
+                    <div class="main-image">
+                        <img
+                            :src="selectedImage || '/static/images/placeholder.png'"
+                            :alt="product?.marketplace_product?.title"
+                            class="product-main-image"
+                        >
+                    </div>
+
+                    <!-- Thumbnail Gallery -->
+                    <div class="image-gallery" x-show="product?.marketplace_product?.images?.length > 1">
+                        <template x-for="(image, index) in product?.marketplace_product?.images" :key="index">
+                            <img
+                                :src="image"
+                                :alt="`Product image ${index + 1}`"
+                                class="thumbnail"
+                                :class="{ 'active': selectedImage === image }"
+                                @click="selectedImage = image"
+                            >
+                        </template>
+                    </div>
+                </div>
+
+                <!-- Product Info -->
+                <div class="product-info-detail">
+                    <h1 x-text="product?.marketplace_product?.title" class="product-title-detail"></h1>
+
+                    <!-- Brand & Category -->
+                    <div class="product-meta">
+                        <span x-show="product?.marketplace_product?.brand" class="meta-item">
+                            <strong>Brand:</strong> <span x-text="product?.marketplace_product?.brand"></span>
+                        </span>
+                        <span x-show="product?.marketplace_product?.google_product_category" class="meta-item">
+                            <strong>Category:</strong> <span x-text="product?.marketplace_product?.google_product_category"></span>
+                        </span>
+                        <span class="meta-item">
+                            <strong>SKU:</strong> <span x-text="product?.product_id || product?.marketplace_product?.mpn"></span>
+                        </span>
+                    </div>
+
+                    <!-- Price -->
+                    <div class="product-pricing">
+                        <div x-show="product?.sale_price && product?.sale_price < product?.price">
+                            <span class="price-original">€<span x-text="parseFloat(product?.price).toFixed(2)"></span></span>
+                            <span class="price-sale">€<span x-text="parseFloat(product?.sale_price).toFixed(2)"></span></span>
+                            <span class="price-badge">SALE</span>
+                        </div>
+                        <div x-show="!product?.sale_price || product?.sale_price >= product?.price">
+                            <span class="price-current">€<span x-text="parseFloat(product?.price || 0).toFixed(2)"></span></span>
+                        </div>
+                    </div>
+
+                    <!-- Availability -->
+                    <div class="product-availability">
+                        <span
+                            x-show="product?.available_inventory > 0"
+                            class="availability-badge in-stock"
+                        >
+                            ✓ In Stock (<span x-text="product?.available_inventory"></span> available)
+                        </span>
+                        <span
+                            x-show="!product?.available_inventory || product?.available_inventory <= 0"
+                            class="availability-badge out-of-stock"
+                        >
+                            ✗ Out of Stock
+                        </span>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="product-description">
+                        <h3>Description</h3>
+                        <p x-text="product?.marketplace_product?.description || 'No description available'"></p>
+                    </div>
+
+                    <!-- Additional Details -->
+                    <div class="product-details" x-show="hasAdditionalDetails">
+                        <h3>Product Details</h3>
+                        <ul>
+                            <li x-show="product?.marketplace_product?.gtin">
+                                <strong>GTIN:</strong> <span x-text="product?.marketplace_product?.gtin"></span>
+                            </li>
+                            <li x-show="product?.condition">
+                                <strong>Condition:</strong> <span x-text="product?.condition"></span>
+                            </li>
+                            <li x-show="product?.marketplace_product?.color">
+                                <strong>Color:</strong> <span x-text="product?.marketplace_product?.color"></span>
+                            </li>
+                            <li x-show="product?.marketplace_product?.size">
+                                <strong>Size:</strong> <span x-text="product?.marketplace_product?.size"></span>
+                            </li>
+                            <li x-show="product?.marketplace_product?.material">
+                                <strong>Material:</strong> <span x-text="product?.marketplace_product?.material"></span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Add to Cart Section -->
+                    <div class="add-to-cart-section">
+                        <!-- Quantity Selector -->
+                        <div class="quantity-selector">
+                            <label>Quantity:</label>
+                            <div class="quantity-controls">
+                                <button
+                                    @click="decreaseQuantity()"
+                                    :disabled="quantity <= (product?.min_quantity || 1)"
+                                    class="btn-quantity"
+                                >
+                                    −
+                                </button>
+                                <input
+                                    type="number"
+                                    x-model.number="quantity"
+                                    :min="product?.min_quantity || 1"
+                                    :max="product?.max_quantity || product?.available_inventory"
+                                    class="quantity-input"
+                                    @change="validateQuantity()"
+                                >
+                                <button
+                                    @click="increaseQuantity()"
+                                    :disabled="quantity >= (product?.max_quantity || product?.available_inventory)"
+                                    class="btn-quantity"
+                                >
+                                    +
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Add to Cart Button -->
+                        <button
+                            @click="addToCart()"
+                            :disabled="!canAddToCart || addingToCart"
+                            class="btn-add-to-cart"
+                        >
+                            <span x-show="!addingToCart">
+                                🛒 Add to Cart
+                            </span>
+                            <span x-show="addingToCart">
+                                <span class="loading-spinner"></span> Adding...
+                            </span>
+                        </button>
+
+                        <!-- Total Price -->
+                        <div class="total-price">
+                            <strong>Total:</strong> €<span x-text="totalPrice.toFixed(2)"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Related Products / You May Also Like -->
+            <div class="related-products" x-show="relatedProducts.length > 0">
+                <h2>You May Also Like</h2>
+                <div class="product-grid">
+                    <template x-for="related in relatedProducts" :key="related.id">
+                        <div class="product-card">
+                            <img
+                                :src="related.image_url || '/static/images/placeholder.png'"
+                                :alt="related.name"
+                                class="product-image"
+                                @click="viewProduct(related.id)"
+                            >
+                            <div class="product-info">
+                                <h3
+                                    class="product-title"
+                                    @click="viewProduct(related.id)"
+                                    x-text="related.name"
+                                ></h3>
+                                <p class="product-price">
+                                    €<span x-text="parseFloat(related.price).toFixed(2)"></span>
+                                </p>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div
+            x-show="toast.show"
+            x-transition
+            :class="'toast toast-' + toast.type"
+            x-text="toast.message"
+        ></div>
+    </div>
+
+    <script>
+        function productDetail() {
+            return {
+                // Data
+                product: null,
+                relatedProducts: [],
+                loading: false,
+                addingToCart: false,
+                quantity: 1,
+                selectedImage: null,
+                cartCount: 0,
+                vendorId: null,
+                productId: null,
+                sessionId: null,
+
+                // Toast notification
+                toast: {
+                    show: false,
+                    type: 'success',
+                    message: ''
+                },
+
+                // Computed properties
+                get canAddToCart() {
+                    return this.product?.is_active &&
+                           this.product?.available_inventory > 0 &&
+                           this.quantity > 0 &&
+                           this.quantity <= this.product?.available_inventory;
+                },
+
+                get totalPrice() {
+                    const price = this.product?.sale_price || this.product?.price || 0;
+                    return price * this.quantity;
+                },
+
+                get hasAdditionalDetails() {
+                    return this.product?.marketplace_product?.gtin ||
+                           this.product?.condition ||
+                           this.product?.marketplace_product?.color ||
+                           this.product?.marketplace_product?.size ||
+                           this.product?.marketplace_product?.material;
+                },
+
+                // Initialize
+                init() {
+                    this.vendorId = this.$el.dataset.vendorId;
+                    this.productId = this.$el.dataset.productId;
+                    this.sessionId = this.getOrCreateSessionId();
+                    this.loadCartCount();
+                },
+
+                // Get or create session ID
+                getOrCreateSessionId() {
+                    let sessionId = localStorage.getItem('cart_session_id');
+                    if (!sessionId) {
+                        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                        localStorage.setItem('cart_session_id', sessionId);
+                    }
+                    return sessionId;
+                },
+
+                // Load product details
+                async loadProduct() {
+                    this.loading = true;
+
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/products/${this.productId}`
+                        );
+
+                        if (!response.ok) {
+                            throw new Error('Product not found');
+                        }
+
+                        this.product = await response.json();
+
+                        // Set default image
+                        if (this.product?.marketplace_product?.image_link) {
+                            this.selectedImage = this.product.marketplace_product.image_link;
+                        }
+
+                        // Set initial quantity
+                        this.quantity = this.product?.min_quantity || 1;
+
+                        // Load related products (optional)
+                        await this.loadRelatedProducts();
+
+                    } catch (error) {
+                        console.error('Failed to load product:', error);
+                        this.showToast('Failed to load product', 'error');
+                        // Redirect back to products after error
+                        setTimeout(() => {
+                            window.location.href = '/shop/products';
+                        }, 2000);
+                    } finally {
+                        this.loading = false;
+                    }
+                },
+
+                // Load related products (same category or brand)
+                async loadRelatedProducts() {
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/products?limit=4`
+                        );
+
+                        if (response.ok) {
+                            const data = await response.json();
+                            // Filter out current product
+                            this.relatedProducts = data.products
+                                .filter(p => p.id !== parseInt(this.productId))
+                                .slice(0, 4);
+                        }
+                    } catch (error) {
+                        console.error('Failed to load related products:', error);
+                    }
+                },
+
+                // Load cart count
+                async loadCartCount() {
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
+                        );
+
+                        if (response.ok) {
+                            const data = await response.json();
+                            this.cartCount = (data.items || []).reduce((sum, item) =>
+                                sum + item.quantity, 0
+                            );
+                        }
+                    } catch (error) {
+                        console.error('Failed to load cart count:', error);
+                    }
+                },
+
+                // Quantity controls
+                increaseQuantity() {
+                    const max = this.product?.max_quantity || this.product?.available_inventory;
+                    if (this.quantity < max) {
+                        this.quantity++;
+                    }
+                },
+
+                decreaseQuantity() {
+                    const min = this.product?.min_quantity || 1;
+                    if (this.quantity > min) {
+                        this.quantity--;
+                    }
+                },
+
+                validateQuantity() {
+                    const min = this.product?.min_quantity || 1;
+                    const max = this.product?.max_quantity || this.product?.available_inventory;
+
+                    if (this.quantity < min) {
+                        this.quantity = min;
+                    } else if (this.quantity > max) {
+                        this.quantity = max;
+                    }
+                },
+
+                // Add to cart
+                async addToCart() {
+                    if (!this.canAddToCart) return;
+
+                    this.addingToCart = true;
+
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    product_id: parseInt(this.productId),
+                                    quantity: this.quantity
+                                })
+                            }
+                        );
+
+                        if (response.ok) {
+                            this.cartCount += this.quantity;
+                            this.showToast(
+                                `${this.quantity} item(s) added to cart!`,
+                                'success'
+                            );
+
+                            // Reset quantity to minimum
+                            this.quantity = this.product?.min_quantity || 1;
+                        } else {
+                            const error = await response.json();
+                            throw new Error(error.detail || 'Failed to add to cart');
+                        }
+                    } catch (error) {
+                        console.error('Add to cart error:', error);
+                        this.showToast(error.message || 'Failed to add to cart', 'error');
+                    } finally {
+                        this.addingToCart = false;
+                    }
+                },
+
+                // View other product
+                viewProduct(productId) {
+                    window.location.href = `/shop/products/${productId}`;
+                },
+
+                // Show toast notification
+                showToast(message, type = 'success') {
+                    this.toast = {
+                        show: true,
+                        type: type,
+                        message: message
+                    };
+
+                    setTimeout(() => {
+                        this.toast.show = false;
+                    }, 3000);
+                }
+            }
+        }
+    </script>
+
+    <style>
+        /* Product Detail Styles */
+        .product-detail-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--spacing-2xl);
+            margin-top: var(--spacing-xl);
+            margin-bottom: var(--spacing-2xl);
+        }
+
+        .product-images {
+            position: sticky;
+            top: var(--spacing-lg);
+            height: fit-content;
+        }
+
+        .main-image {
+            width: 100%;
+            aspect-ratio: 1;
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            background: var(--gray-50);
+            margin-bottom: var(--spacing-md);
+        }
+
+        .product-main-image {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .image-gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+            gap: var(--spacing-sm);
+        }
+
+        .thumbnail {
+            width: 100%;
+            aspect-ratio: 1;
+            object-fit: cover;
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: all var(--transition-base);
+        }
+
+        .thumbnail:hover {
+            border-color: var(--primary-color);
+        }
+
+        .thumbnail.active {
+            border-color: var(--primary-color);
+            box-shadow: var(--shadow-md);
+        }
+
+        .product-info-detail {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-lg);
+        }
+
+        .product-title-detail {
+            font-size: var(--font-4xl);
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0;
+        }
+
+        .product-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--spacing-md);
+            padding-bottom: var(--spacing-md);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .meta-item {
+            font-size: var(--font-sm);
+            color: var(--text-secondary);
+        }
+
+        .product-pricing {
+            padding: var(--spacing-lg);
+            background: var(--gray-50);
+            border-radius: var(--radius-lg);
+        }
+
+        .price-original {
+            font-size: var(--font-xl);
+            color: var(--text-muted);
+            text-decoration: line-through;
+            margin-right: var(--spacing-md);
+        }
+
+        .price-sale {
+            font-size: var(--font-4xl);
+            font-weight: 700;
+            color: var(--danger-color);
+        }
+
+        .price-current {
+            font-size: var(--font-4xl);
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .price-badge {
+            display: inline-block;
+            background: var(--danger-color);
+            color: white;
+            padding: 4px 12px;
+            border-radius: var(--radius-full);
+            font-size: var(--font-sm);
+            font-weight: 600;
+            margin-left: var(--spacing-sm);
+        }
+
+        .product-availability {
+            padding: var(--spacing-md);
+            background: white;
+            border-radius: var(--radius-md);
+        }
+
+        .availability-badge {
+            display: inline-block;
+            padding: 8px 16px;
+            border-radius: var(--radius-md);
+            font-weight: 600;
+            font-size: var(--font-base);
+        }
+
+        .availability-badge.in-stock {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .availability-badge.out-of-stock {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .product-description {
+            padding: var(--spacing-lg);
+            background: white;
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border-color);
+        }
+
+        .product-description h3 {
+            margin-bottom: var(--spacing-md);
+            font-size: var(--font-xl);
+        }
+
+        .product-description p {
+            line-height: 1.6;
+            color: var(--text-secondary);
+        }
+
+        .product-details {
+            padding: var(--spacing-lg);
+            background: white;
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border-color);
+        }
+
+        .product-details h3 {
+            margin-bottom: var(--spacing-md);
+            font-size: var(--font-xl);
+        }
+
+        .product-details ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .product-details li {
+            padding: var(--spacing-sm) 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .product-details li:last-child {
+            border-bottom: none;
+        }
+
+        .add-to-cart-section {
+            padding: var(--spacing-xl);
+            background: white;
+            border-radius: var(--radius-lg);
+            border: 2px solid var(--primary-color);
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-lg);
+        }
+
+        .quantity-selector {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sm);
+        }
+
+        .quantity-selector label {
+            font-weight: 600;
+            font-size: var(--font-lg);
+        }
+
+        .quantity-controls {
+            display: flex;
+            gap: var(--spacing-sm);
+            align-items: center;
+        }
+
+        .btn-quantity {
+            width: 40px;
+            height: 40px;
+            border: 2px solid var(--border-color);
+            background: white;
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            font-size: var(--font-xl);
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all var(--transition-base);
+        }
+
+        .btn-quantity:hover:not(:disabled) {
+            background: var(--gray-50);
+            border-color: var(--primary-color);
+        }
+
+        .btn-quantity:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .quantity-input {
+            width: 80px;
+            text-align: center;
+            padding: 10px;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-md);
+            font-size: var(--font-lg);
+            font-weight: 600;
+        }
+
+        .btn-add-to-cart {
+            width: 100%;
+            padding: 16px 32px;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius-lg);
+            font-size: var(--font-xl);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all var(--transition-base);
+        }
+
+        .btn-add-to-cart:hover:not(:disabled) {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .btn-add-to-cart:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .total-price {
+            padding: var(--spacing-md);
+            background: var(--gray-50);
+            border-radius: var(--radius-md);
+            text-align: center;
+            font-size: var(--font-2xl);
+        }
+
+        .related-products {
+            margin-top: var(--spacing-2xl);
+            padding-top: var(--spacing-2xl);
+            border-top: 2px solid var(--border-color);
+        }
+
+        .related-products h2 {
+            margin-bottom: var(--spacing-xl);
+            font-size: var(--font-3xl);
+        }
+
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .product-detail-container {
+                grid-template-columns: 1fr;
+            }
+
+            .product-images {
+                position: static;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .product-title-detail {
+                font-size: var(--font-2xl);
+            }
+
+            .price-current,
+            .price-sale {
+                font-size: var(--font-3xl);
+            }
+
+            .add-to-cart-section {
+                padding: var(--spacing-lg);
+            }
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/shop/products.html b/app/templates/shop/products.html
new file mode 100644
index 00000000..99a44701
--- /dev/null
+++ b/app/templates/shop/products.html
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Products - {{ vendor.name }}</title>
+    <link rel="stylesheet" href="/static/css/shared/base.css">
+    <link rel="stylesheet" href="/static/css/vendor/vendor.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body>
+    <div x-data="productCatalog()"
+         x-init="loadProducts()"
+         data-vendor-id="{{ vendor.id }}"
+    >
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <h1>{{ vendor.name }} - Products</h1>
+            </div>
+            <div class="header-right">
+                <a href="/shop/cart" class="btn-primary">
+                    🛒 Cart (<span x-text="cartCount"></span>)
+                </a>
+            </div>
+        </header>
+
+        <div class="container">
+            <!-- Filters & Search -->
+            <div class="filter-bar">
+                <div class="search-box">
+                    <input
+                        type="text"
+                        x-model="filters.search"
+                        @input.debounce.500ms="loadProducts()"
+                        placeholder="Search products..."
+                        class="search-input"
+                    >
+                    <span class="search-icon">🔍</span>
+                </div>
+
+                <div class="filter-group">
+                    <select
+                        x-model="filters.sort"
+                        @change="loadProducts()"
+                        class="form-select"
+                    >
+                        <option value="name_asc">Name (A-Z)</option>
+                        <option value="name_desc">Name (Z-A)</option>
+                        <option value="price_asc">Price (Low to High)</option>
+                        <option value="price_desc">Price (High to Low)</option>
+                        <option value="newest">Newest First</option>
+                    </select>
+                </div>
+
+                <button
+                    @click="clearFilters()"
+                    class="btn-secondary"
+                    x-show="hasActiveFilters"
+                >
+                    Clear Filters
+                </button>
+            </div>
+
+            <!-- Loading State -->
+            <div x-show="loading" class="loading">
+                <div class="loading-spinner-lg"></div>
+                <p>Loading products...</p>
+            </div>
+
+            <!-- Empty State -->
+            <div x-show="!loading && products.length === 0" class="empty-state">
+                <div class="empty-state-icon">📦</div>
+                <h3>No products found</h3>
+                <p x-show="hasActiveFilters">Try adjusting your filters</p>
+                <p x-show="!hasActiveFilters">Check back soon for new products!</p>
+            </div>
+
+            <!-- Product Grid -->
+            <div x-show="!loading && products.length > 0" class="product-grid">
+                <template x-for="product in products" :key="product.id">
+                    <div class="product-card">
+                        <!-- Product Image -->
+                        <div class="product-image-wrapper">
+                            <img
+                                :src="product.image_url || '/static/images/placeholder.png'"
+                                :alt="product.name"
+                                class="product-image"
+                                @click="viewProduct(product.id)"
+                            >
+                            <div
+                                x-show="!product.is_active || product.inventory_level <= 0"
+                                class="out-of-stock-badge"
+                            >
+                                Out of Stock
+                            </div>
+                        </div>
+
+                        <!-- Product Info -->
+                        <div class="product-info">
+                            <h3
+                                class="product-title"
+                                @click="viewProduct(product.id)"
+                                x-text="product.name"
+                            ></h3>
+
+                            <p class="product-sku" x-text="'SKU: ' + product.sku"></p>
+
+                            <p class="product-price">
+                                €<span x-text="parseFloat(product.price).toFixed(2)"></span>
+                            </p>
+
+                            <p
+                                class="product-description"
+                                x-text="product.description || 'No description available'"
+                            ></p>
+                        </div>
+
+                        <!-- Product Actions -->
+                        <div class="product-actions">
+                            <button
+                                @click="viewProduct(product.id)"
+                                class="btn-outline btn-sm"
+                            >
+                                View Details
+                            </button>
+
+                            <button
+                                @click="addToCart(product)"
+                                :disabled="!product.is_active || product.inventory_level <= 0 || addingToCart[product.id]"
+                                class="btn-primary btn-sm"
+                            >
+                                <span x-show="!addingToCart[product.id]">Add to Cart</span>
+                                <span x-show="addingToCart[product.id]">
+                                    <span class="loading-spinner"></span> Adding...
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+            </div>
+
+            <!-- Pagination -->
+            <div x-show="totalPages > 1" class="pagination">
+                <button
+                    @click="changePage(currentPage - 1)"
+                    :disabled="currentPage === 1"
+                    class="pagination-btn"
+                >
+                    ← Previous
+                </button>
+
+                <span class="pagination-info">
+                    Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
+                </span>
+
+                <button
+                    @click="changePage(currentPage + 1)"
+                    :disabled="currentPage === totalPages"
+                    class="pagination-btn"
+                >
+                    Next →
+                </button>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div
+            x-show="toast.show"
+            x-transition
+            :class="'toast toast-' + toast.type"
+            class="toast"
+            x-text="toast.message"
+        ></div>
+    </div>
+
+    <script>
+        function productCatalog() {
+            return {
+                products: [],
+                loading: false,
+                addingToCart: {},
+                cartCount: 0,
+                vendorId: null,
+                sessionId: null,
+
+                // Filters
+                filters: {
+                    search: '',
+                    sort: 'name_asc',
+                    category: ''
+                },
+
+                // Pagination
+                currentPage: 1,
+                perPage: 12,
+                totalProducts: 0,
+
+                // Toast notification
+                toast: {
+                    show: false,
+                    type: 'success',
+                    message: ''
+                },
+
+                // Computed properties
+                get totalPages() {
+                    return Math.ceil(this.totalProducts / this.perPage);
+                },
+
+                get hasActiveFilters() {
+                    return this.filters.search !== '' ||
+                           this.filters.category !== '' ||
+                           this.filters.sort !== 'name_asc';
+                },
+
+                // Initialize
+                init() {
+                    this.vendorId = this.$el.dataset.vendorId;
+                    this.sessionId = this.getOrCreateSessionId();
+                    this.loadCartCount();
+                },
+
+                // Get or create session ID
+                getOrCreateSessionId() {
+                    let sessionId = localStorage.getItem('cart_session_id');
+                    if (!sessionId) {
+                        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                        localStorage.setItem('cart_session_id', sessionId);
+                    }
+                    return sessionId;
+                },
+
+                // Load products from API
+                async loadProducts() {
+                    this.loading = true;
+
+                    try {
+                        const params = new URLSearchParams({
+                            page: this.currentPage,
+                            per_page: this.perPage,
+                            search: this.filters.search,
+                            sort: this.filters.sort
+                        });
+
+                        if (this.filters.category) {
+                            params.append('category', this.filters.category);
+                        }
+
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/products?${params}`
+                        );
+
+                        if (response.ok) {
+                            const data = await response.json();
+                            this.products = data.products || [];
+                            this.totalProducts = data.total || 0;
+                        } else {
+                            throw new Error('Failed to load products');
+                        }
+                    } catch (error) {
+                        console.error('Load products error:', error);
+                        this.showToast('Failed to load products', 'error');
+                    } finally {
+                        this.loading = false;
+                    }
+                },
+
+                // Load cart count
+                async loadCartCount() {
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
+                        );
+
+                        if (response.ok) {
+                            const data = await response.json();
+                            this.cartCount = (data.items || []).reduce((sum, item) =>
+                                sum + item.quantity, 0
+                            );
+                        }
+                    } catch (error) {
+                        console.error('Failed to load cart count:', error);
+                    }
+                },
+
+                // Add product to cart
+                async addToCart(product) {
+                    this.addingToCart[product.id] = true;
+
+                    try {
+                        const response = await fetch(
+                            `/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    product_id: product.id,
+                                    quantity: 1
+                                })
+                            }
+                        );
+
+                        if (response.ok) {
+                            this.cartCount++;
+                            this.showToast(`${product.name} added to cart!`, 'success');
+                        } else {
+                            throw new Error('Failed to add to cart');
+                        }
+                    } catch (error) {
+                        console.error('Add to cart error:', error);
+                        this.showToast('Failed to add to cart. Please try again.', 'error');
+                    } finally {
+                        this.addingToCart[product.id] = false;
+                    }
+                },
+
+                // View product details
+                viewProduct(productId) {
+                    window.location.href = `/shop/products/${productId}`;
+                },
+
+                // Change page
+                changePage(page) {
+                    if (page >= 1 && page <= this.totalPages) {
+                        this.currentPage = page;
+                        this.loadProducts();
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+                },
+
+                // Clear filters
+                clearFilters() {
+                    this.filters = {
+                        search: '',
+                        sort: 'name_asc',
+                        category: ''
+                    };
+                    this.currentPage = 1;
+                    this.loadProducts();
+                },
+
+                // Show toast notification
+                showToast(message, type = 'success') {
+                    this.toast = {
+                        show: true,
+                        type: type,
+                        message: message
+                    };
+
+                    setTimeout(() => {
+                        this.toast.show = false;
+                    }, 3000);
+                }
+            }
+        }
+    </script>
+
+    <style>
+        /* Product-specific styles */
+        .filter-bar {
+            display: flex;
+            gap: var(--spacing-md);
+            margin-bottom: var(--spacing-xl);
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .search-box {
+            flex: 2;
+            min-width: 300px;
+            position: relative;
+        }
+
+        .search-input {
+            width: 100%;
+            padding-left: 40px;
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: var(--font-lg);
+        }
+
+        .filter-group {
+            flex: 1;
+            min-width: 200px;
+        }
+
+        .product-image-wrapper {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .out-of-stock-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: var(--danger-color);
+            color: white;
+            padding: 6px 12px;
+            border-radius: var(--radius-md);
+            font-size: var(--font-sm);
+            font-weight: 600;
+        }
+
+        .product-title {
+            cursor: pointer;
+        }
+
+        .product-title:hover {
+            color: var(--primary-color);
+        }
+
+        .product-sku {
+            font-size: var(--font-sm);
+            color: var(--text-muted);
+            margin-bottom: var(--spacing-sm);
+        }
+
+        /* Toast notification */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 16px 24px;
+            background: white;
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-xl);
+            z-index: 10000;
+            max-width: 400px;
+        }
+
+        .toast-success {
+            border-left: 4px solid var(--success-color);
+        }
+
+        .toast-error {
+            border-left: 4px solid var(--danger-color);
+        }
+
+        @media (max-width: 768px) {
+            .filter-bar {
+                flex-direction: column;
+            }
+
+            .search-box,
+            .filter-group {
+                width: 100%;
+            }
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/shop/search.html b/app/templates/shop/search.html
new file mode 100644
index 00000000..3dfc5efa
--- /dev/null
+++ b/app/templates/shop/search.html
@@ -0,0 +1,11 @@
+<DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search results page</title>
+</head>
+<body>
+    <-- Search results page -->
+</body>
+</html>
