diff --git a/app/modules/dev_tools/templates/dev_tools/admin/components.html b/app/modules/dev_tools/templates/dev_tools/admin/components.html
index e3626e57..4e12fcf5 100644
--- a/app/modules/dev_tools/templates/dev_tools/admin/components.html
+++ b/app/modules/dev_tools/templates/dev_tools/admin/components.html
@@ -97,7 +97,7 @@ html {
                         <span x-html="$icon('information-circle', 'w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0 mt-0.5')"></span>
                         <div>
                             <p class="text-sm text-green-800 dark:text-gray-200">
-                                <strong>Shop Components:</strong> Reusable e-commerce components from <code class="bg-green-100 dark:bg-gray-600 px-1 rounded">shared/macros/shop/</code>. These support vendor theming via CSS variables and are designed for the shop frontend.
+                                <strong>Shop Components:</strong> Reusable e-commerce components from <code class="bg-green-100 dark:bg-gray-600 px-1 rounded">shared/macros/storefront/</code>. These support vendor theming via CSS variables and are designed for the shop frontend.
                             </p>
                         </div>
                     </div>
@@ -193,7 +193,7 @@ html {
                             </template>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-card.html' import product_card %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/product-card.html' import product_card %}
 
 <template x-for=&quot;product in products&quot; :key=&quot;product.id&quot;>
     {{ product_card() }}
@@ -262,7 +262,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/mini-cart.html' import cart_icon_button, mini_cart %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/mini-cart.html' import cart_icon_button, mini_cart %}
 
 <div class=&quot;relative&quot;>
     {{ cart_icon_button(cart_count_var='cart.item_count', toggle_action='showCart = !showCart') }}
@@ -304,7 +304,7 @@ html {
                             <span>Added to cart!</span>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/add-to-cart.html' import add_to_cart_button, add_to_cart_form %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/add-to-cart.html' import add_to_cart_button, add_to_cart_form %}
 
 {# Simple button #}
 {{ add_to_cart_button(action='addToCart()') }}
@@ -371,7 +371,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-gallery.html' import product_gallery %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/product-gallery.html' import product_gallery %}
 
 {{ product_gallery(images_var='product.images', enable_zoom=true, enable_lightbox=true) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                         <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
@@ -444,7 +444,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/variant-selector.html' import size_selector, color_swatches %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/variant-selector.html' import size_selector, color_swatches %}
 
 {{ size_selector(sizes_var='product.sizes', selected_var='selectedSize') }}
 
@@ -495,7 +495,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-info.html' import product_info, product_price, product_rating %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/product-info.html' import product_info, product_price, product_rating %}
 
 {{ product_info(product_var='product', show_vendor=true, show_rating=true) }}
 
@@ -612,7 +612,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-tabs.html' import product_tabs %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/product-tabs.html' import product_tabs %}
 
 {{ product_tabs(product_var='product', tabs=['description', 'specifications', 'reviews', 'shipping']) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
                         <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
@@ -711,7 +711,7 @@ html {
                             </nav>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/category-nav.html' import category_nav, category_tree %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/category-nav.html' import category_nav, category_tree %}
 
 {# Sidebar with nested categories #}
 {{ category_nav(categories_var='categories', current_var='currentCategory', show_count=true) }}
@@ -771,7 +771,7 @@ html {
                             </nav>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/breadcrumbs.html' import shop_breadcrumbs, compact_breadcrumbs %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/breadcrumbs.html' import shop_breadcrumbs, compact_breadcrumbs %}
 
 {# Static breadcrumbs #}
 {{ shop_breadcrumbs(items=[
@@ -900,7 +900,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/search-bar.html' import search_bar, search_autocomplete %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/search-bar.html' import search_bar, search_autocomplete %}
 
 {# Basic search #}
 {{ search_bar(placeholder='Search products...') }}
@@ -1033,7 +1033,7 @@ html {
                             </div>
                         </div>
                     </div>
-                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/filter-sidebar.html' import filter_sidebar, price_filter, rating_filter, sort_dropdown %}
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/filter-sidebar.html' import filter_sidebar, price_filter, rating_filter, sort_dropdown %}
 
 {# Complete filter sidebar #}
 {{ filter_sidebar(filters_var='filters', active_filters_var='activeFilters', on_change='filterProducts()') }}
@@ -1185,7 +1185,7 @@ html {
 
         <!-- Reviews -->
         <section id="reviews" class="scroll-mt-24">
-            {% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %}
+            {% from 'shared/macros/storefront/reviews.html' import review_card, review_list, review_form, review_summary_section %}
             <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                 <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                     <span x-html="$icon('chat', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
@@ -1237,7 +1237,7 @@ html {
                     </div>
                 </div>
 
-                <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %}
+                <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/reviews.html' import review_card, review_list, review_form, review_summary_section %}
 
 {# Single review card #}
 {{ review_card(review_var='review', on_helpful='markHelpful(review.id)') }}
@@ -1269,7 +1269,7 @@ html {
 
         <!-- Trust Badges -->
         <section id="trust-badges" class="scroll-mt-24">
-            {% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
+            {% from 'shared/macros/storefront/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
             <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                 <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                     <span x-html="$icon('shield-check', 'w-6 h-6 mr-2 text-green-600 dark:text-green-400')"></span>
@@ -1343,7 +1343,7 @@ html {
                     </div>
                 </div>
 
-                <button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
+                <button @click="copyCode(`{% raw %}{% from 'shared/macros/storefront/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
 
 {# Trust badges grid #}
 {{ trust_badges(badges=['secure_payment', 'free_shipping', 'easy_returns', 'support_24_7'], layout='grid') }}