diff --git a/app/templates/shop/product.html b/app/templates/shop/product.html
index 33e46c71..d00c5928 100644
--- a/app/templates/shop/product.html
+++ b/app/templates/shop/product.html
@@ -7,10 +7,7 @@
 {% block alpine_data %}productDetail(){% endblock %}
 
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-     data-vendor-id="{{ vendor.id }}"
-     data-product-id="{{ product_id }}"
->
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     {# Breadcrumbs #}
     <div class="breadcrumb mb-6">
         <a href="{{ base_url }}" class="hover:text-primary">Home</a>
@@ -212,6 +209,10 @@
 
 {% block extra_scripts %}
 <script>
+// Pass product ID from template to JavaScript
+window.PRODUCT_ID = {{ product_id }};
+window.VENDOR_ID = {{ vendor.id }};
+
 document.addEventListener('alpine:init', () => {
     Alpine.data('productDetail', () => ({
         ...shopLayoutData(),
@@ -223,8 +224,8 @@ document.addEventListener('alpine:init', () => {
         addingToCart: false,
         quantity: 1,
         selectedImage: null,
-        vendorId: null,
-        productId: null,
+        vendorId: window.VENDOR_ID,
+        productId: window.PRODUCT_ID,
 
         // Computed properties
         get canAddToCart() {
@@ -250,8 +251,8 @@ document.addEventListener('alpine:init', () => {
         // Initialize
         async init() {
             console.log('[SHOP] Product detail page initializing...');
-            this.vendorId = this.$el.dataset.vendorId;
-            this.productId = this.$el.dataset.productId;
+            console.log('[SHOP] Product ID:', this.productId);
+            console.log('[SHOP] Vendor ID:', this.vendorId);
             await this.loadProduct();
         },
 
diff --git a/static/shop/img/placeholder.jpg b/static/shop/img/placeholder.jpg
new file mode 100644
index 00000000..b4ba3c21
--- /dev/null
+++ b/static/shop/img/placeholder.jpg
@@ -0,0 +1,6 @@
+<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+  <rect width="400" height="400" fill="#f3f4f6"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="20" fill="#9ca3af" text-anchor="middle" dominant-baseline="middle">
+    No Image Available
+  </text>
+</svg>