diff --git a/.vscode/settings.json b/.vscode/settings.json
index 92e1095..59185aa 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,6 +19,7 @@
     "Swipeable",
     "swiper",
     "usehooks",
+    "Woocommerce",
     "Yekan",
     "چنده"
   ]
diff --git a/src/components/VariableProductItem/VariableProductItem.tsx b/src/components/VariableProductItem/VariableProductItem.tsx
index 7f38484..92e9be4 100644
--- a/src/components/VariableProductItem/VariableProductItem.tsx
+++ b/src/components/VariableProductItem/VariableProductItem.tsx
@@ -23,9 +23,7 @@ export interface ProductItemProps {
 }
 
 const VariableProductItem: FC<ProductItemProps> = ({ data }) => {
-  const { isMobile } = useAppContext();
-
-  const size = isMobile ? 120 : 240;
+  const { isMobile, variantImageSize } = useAppContext();
 
   const profitMarginPercentage = getProfitPercentage(
     extractNumbers(getMinOfRangePrice(data.price)),
@@ -61,8 +59,8 @@ const VariableProductItem: FC<ProductItemProps> = ({ data }) => {
           }}
         >
           <Image
-            height={size}
-            width={size}
+            height={variantImageSize}
+            width={variantImageSize}
             src={data.image?.sourceUrl!}
             alt="Product Image"
             style={{
diff --git a/src/components/VariableProductItem/VariableProductItemSkeleton.tsx b/src/components/VariableProductItem/VariableProductItemSkeleton.tsx
new file mode 100644
index 0000000..c5ca8c5
--- /dev/null
+++ b/src/components/VariableProductItem/VariableProductItemSkeleton.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { useAppContext } from '@/hooks/useAppContext';
+import { Box, Card, CardContent, Skeleton } from '@mui/material';
+
+const VariableProductItemSkeleton = () => {
+  const { variantImageSize, isMobile } = useAppContext();
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        display: 'block',
+        height: '100%',
+      }}
+    >
+      <CardContent
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: isMobile ? 'row' : 'column',
+            gap: 1,
+          }}
+        >
+          <Skeleton height={variantImageSize} width="100%" />
+          {!isMobile && <Box mt={3} />}
+
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              gap: 1,
+              width: '100%',
+            }}
+          >
+            <Skeleton variant="text" width={90} />
+
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'top',
+                justifyContent: 'space-between',
+                mt: 1,
+              }}
+            >
+              <Box>
+                <Skeleton variant="text" width={40} />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default VariableProductItemSkeleton;
diff --git a/src/components/VariableProductItem/index.ts b/src/components/VariableProductItem/index.ts
index 1a9e4dd..03f3ac9 100644
--- a/src/components/VariableProductItem/index.ts
+++ b/src/components/VariableProductItem/index.ts
@@ -1,2 +1,3 @@
 export { default as VariableProductItem } from './VariableProductItem';
+export { default as VariableProductItemSkeleton } from './VariableProductItemSkeleton';
 export * from './types';
diff --git a/src/config/images.ts b/src/config/images.ts
new file mode 100644
index 0000000..2e6a540
--- /dev/null
+++ b/src/config/images.ts
@@ -0,0 +1,2 @@
+export const MOBILE_PRODUCT_VARIANT_IMAGE_SIZE = 120;
+export const DESKTOP_PRODUCT_VARIANT_IMAGE_SIZE = 240;
diff --git a/src/contexts/appContext.ts b/src/contexts/appContext.ts
index 860dd20..55c458b 100644
--- a/src/contexts/appContext.ts
+++ b/src/contexts/appContext.ts
@@ -1,8 +1,11 @@
+import { DESKTOP_PRODUCT_VARIANT_IMAGE_SIZE } from '@/config/images';
 import { createContext } from 'react';
 
 export interface IAppContext {
   isMobile: null | boolean;
+  variantImageSize: number;
 }
 export const appContext = createContext<IAppContext>({
   isMobile: null,
+  variantImageSize: DESKTOP_PRODUCT_VARIANT_IMAGE_SIZE,
 });
diff --git a/src/providers/AppProvider.tsx b/src/providers/AppProvider.tsx
index 4a685c2..c4f6383 100644
--- a/src/providers/AppProvider.tsx
+++ b/src/providers/AppProvider.tsx
@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  DESKTOP_PRODUCT_VARIANT_IMAGE_SIZE,
+  MOBILE_PRODUCT_VARIANT_IMAGE_SIZE,
+} from '@/config/images';
 import { appContext } from '@/contexts/appContext';
 import { Theme, useMediaQuery } from '@mui/material';
 import { userAgent } from 'next/server';
@@ -15,10 +19,15 @@ const AppProvider: FC<PropsWithChildren<AppProviderProps>> = ({
     theme.breakpoints.down('md'),
   );
 
+  const isMobile = userAgent.device.type === 'mobile' || inMobileView;
+
   return (
     <appContext.Provider
       value={{
-        isMobile: userAgent.device.type === 'mobile' || inMobileView,
+        isMobile,
+        variantImageSize: isMobile
+          ? MOBILE_PRODUCT_VARIANT_IMAGE_SIZE
+          : DESKTOP_PRODUCT_VARIANT_IMAGE_SIZE,
       }}
     >
       {children}