diff --git a/components/product/variant-details.tsx b/components/product/variant-details.tsx
index d77a0bf57..e98f3e5a7 100644
--- a/components/product/variant-details.tsx
+++ b/components/product/variant-details.tsx
@@ -1,20 +1,20 @@
 'use client'
 
 import Price from "components/price";
-import { Product } from "lib/shopify/types";
+import { Product, ProductVariant } from "lib/shopify/types";
 import { useState } from "react";
 import { VariantSelector } from "./variant-selector";
 
 export function VariantDetails({ product }: { product: Product }) {
   const filterDeterminedOptions = product.options.filter(option => option.name !== 'Wrap');
-  const [selectedVariant, setSelectedVariant] = useState(product.variants[0]);
+  const [selectedVariant, setSelectedVariant] = useState<Partial<ProductVariant> | undefined>(product.variants[0]);
 
   return (
     <>
       <div className='flex flex-col border-b mb-6 dark:border-neutral-700'>
         <div className="place-self-end mr-auto w-auto rounded-full bg-gray-600 p-2 text-sm text-white mb-6">
           <Price
-            amount={selectedVariant?.price.amount || product.variants[0]!.price.amount}
+            amount={selectedVariant?.price?.amount || product.variants[0]!.price.amount}
             currencyCode={product.priceRange.maxVariantPrice.currencyCode}
           />
         </div>
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index c2e68e5e7..903e14e21 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -26,7 +26,7 @@ export function VariantSelector({
 }: {
   options: ProductOption[];
   variants: ProductVariant[];
-  setSelectedVariant: (newVariant: OptimizedVariant | undefined) => void,
+  setSelectedVariant: (value: OptimizedVariant | undefined) => void,
 }) {
   const pathname = usePathname();
   const currentParams = useSearchParams();