diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
index 4844ce0..1aef969 100644
--- a/app/shop/components/ProductGrid.tsx
+++ b/app/shop/components/ProductGrid.tsx
@@ -111,7 +111,19 @@ export async function ProductGrid({
               filter active the grid still renders at this same 3-up density,
               simplest to keep one fixed lg: density rather than branching
               the whole grid on hasSidebarFilter too. */}
-          <RevealGroup className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
+          {/* key'd on the rendered product set — same fix, same reason as
+              blog/page.tsx's RevealGroup: `whileInView` only fires once per
+              component instance, and a filter change (price/category/
+              inStock) re-renders this same page in place rather than
+              remounting it, so RevealGroup itself never naturally unmounts
+              between filter states. Without the key, freshly swapped-in
+              RevealItems mounted into an already-settled parent and stayed
+              stuck at opacity 0 — the grid going blank/white after
+              applying a filter. */}
+          <RevealGroup
+            key={products.map((p) => p.id).join(",")}
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full"
+          >
             {products.map((product) => {
           const discount = discountPercent(product.price, product.compareAtPrice);
           const taxRate = effectiveTaxRate(product, defaultTaxRate);