diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index a555aeb7d..cb5d825cb 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -5,6 +5,7 @@ import { ProductOption, ProductVariant } from 'lib/medusa/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
 
 type ParamsMap = {
   [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
@@ -79,9 +80,11 @@ export function VariantSelector({
   const currentUrl = createUrl(pathname, currentParams);
   const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
 
-  if (currentUrl !== selectedVariantUrl) {
-    router.replace(selectedVariantUrl);
-  }
+  useEffect(() => {
+    if (currentUrl !== selectedVariantUrl) {
+      router.replace(selectedVariantUrl);
+    }
+  }, [currentUrl, router, selectedVariantUrl]);
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>