diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css
index f9fe576..f245346 100644
--- a/assets/css/shop/components.css
+++ b/assets/css/shop/components.css
@@ -50,6 +50,7 @@
   }
 
   .product-card-image-wrap {
+    display: block;
     z-index: 1;
     overflow: hidden;
     position: relative;
diff --git a/lib/berrypod_web/components/shop_components/product.ex b/lib/berrypod_web/components/shop_components/product.ex
index 25a8a00..9566d7c 100644
--- a/lib/berrypod_web/components/shop_components/product.ex
+++ b/lib/berrypod_web/components/shop_components/product.ex
@@ -96,14 +96,20 @@ defmodule BerrypodWeb.ShopComponents.Product do
     primary_image = Product.primary_image(product)
     hover_image = Product.hover_image(product)
 
+    product_url =
+      if assigns.clickable && assigns.mode != :preview do
+        "/products/#{Map.get(assigns.product, :slug) || Map.get(assigns.product, :id)}"
+      end
+
     assigns =
       assigns
       |> assign(:primary_image, primary_image)
       |> assign(:hover_image, hover_image)
       |> assign(:has_hover_image, assigns.theme_settings.hover_image && hover_image != nil)
+      |> assign(:product_url, product_url)
 
     ~H"""
-    <div class="product-card-image-wrap">
+    <.product_card_image_wrap href={@product_url}>
       <%= if @show_badges do %>
         <.product_badge product={@product} />
       <% end %>
@@ -142,7 +148,7 @@ defmodule BerrypodWeb.ShopComponents.Product do
           <span class="product-image-dot"></span>
         </div>
       <% end %>
-    </div>
+    </.product_card_image_wrap>
     <div class="product-card-content">
       <%= if @show_category && Map.get(@product, :category) do %>
         <%= if @mode == :preview do %>
@@ -193,6 +199,23 @@ defmodule BerrypodWeb.ShopComponents.Product do
     """
   end
 
+  attr :href, :string, default: nil
+  slot :inner_block, required: true
+
+  defp product_card_image_wrap(assigns) do
+    ~H"""
+    <%= if @href do %>
+      <.link navigate={@href} class="product-card-image-wrap" tabindex="-1" aria-hidden="true">
+        {render_slot(@inner_block)}
+      </.link>
+    <% else %>
+      <div class="product-card-image-wrap">
+        {render_slot(@inner_block)}
+      </div>
+    <% end %>
+    """
+  end
+
   attr :image, :map, default: nil
   attr :alt, :string, required: true
   attr :variant, :atom, required: true