diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaf04ff6b..db0e3725a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - `GatsbyLink` to `Link` ui component.
+- `Skeleton` loading components.
 
 ### Changed
 - Replaces page type redirects, a.k.a. `/account`, `/login` to a corresponding file in `/pages` folder
diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js
index e5029902f..1838713ef 100644
--- a/cypress/integration/plp.test.js
+++ b/cypress/integration/plp.test.js
@@ -43,13 +43,15 @@ describe('Search page Filters and Sorting options', () => {
             // Check if the filter applied actually brought the number of products it said it would
 
             cy.waitUntil(() => {
-              return cy.get('.product-grid').should('exist')
+              return cy.getById('total-product-count').should('exist')
             }).then(() => {
-              cy.getById('total-product-count').then(($countDiv) => {
-                expect(Number($countDiv.attr('data-count'))).to.eq(
-                  Number(quantity)
-                )
-              })
+              cy.getById('total-product-count')
+                .parent()
+                .then(($countDiv) => {
+                  expect(Number($countDiv.attr('data-count'))).to.eq(
+                    Number(quantity)
+                  )
+                })
             })
           })
       })
diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index b96c426f7..e929b397e 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -12,21 +13,23 @@ interface Props {
 
 function ProductGrid({ products, page, pageSize }: Props) {
   return (
-    <ul className="product-grid">
-      {products.map((product, idx) => (
-        <li key={`${product.id}`}>
-          <ProductCard
-            product={product}
-            index={pageSize * page + idx + 1}
-            bordered
-            outOfStock={
-              product.offers.offers?.[0].availability !==
-              'https://schema.org/InStock'
-            }
-          />
-        </li>
-      ))}
-    </ul>
+    <ProductGridSkeleton loading={products.length === 0}>
+      <ul className="product-grid">
+        {products.map((product, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard
+              product={product}
+              index={pageSize * page + idx + 1}
+              bordered
+              outOfStock={
+                product.offers.offers?.[0].availability !==
+                'https://schema.org/InStock'
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    </ProductGridSkeleton>
   )
 }
 
diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index d132803d9..c7116339a 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -8,6 +8,9 @@ import React, { useState } from 'react'
 import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import Button, { LinkButton } from 'src/components/ui/Button'
+import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
+import ProductGrid from 'src/components/product/ProductGrid'
 
 import GalleryPage from './ProductGalleryPage'
 import { useGalleryQuery } from './useGalleryQuery'
@@ -33,35 +36,39 @@ function ProductGallery({ title, slug }: Props) {
     <div className="product-listing / grid-content-full">
       <div className="product-listing__content-grid / grid-content">
         <div className="product-listing__filters">
-          <Filter
-            slug={slug}
-            isOpen={isFilterOpen}
-            facets={orderedFacets}
-            onDismiss={() => setIsFilterOpen(false)}
-          />
+          <FilterSkeleton loading={orderedFacets?.length === 0}>
+            <Filter
+              slug={slug}
+              isOpen={isFilterOpen}
+              facets={orderedFacets}
+              onDismiss={() => setIsFilterOpen(false)}
+            />
+          </FilterSkeleton>
         </div>
 
-        <div
-          className="product-listing__results-count"
-          data-testid="total-product-count"
-          data-count={totalCount}
-        >
-          <h2>{totalCount} Results</h2>
+        <div className="product-listing__results-count" data-count={totalCount}>
+          <SkeletonElement shimmer type="text" loading={!data}>
+            <h2 data-testid="total-product-count">{totalCount} Results</h2>
+          </SkeletonElement>
         </div>
 
         <div className="product-listing__sort">
-          <Sort />
+          <SkeletonElement shimmer type="text" loading={!data}>
+            <Sort />
+          </SkeletonElement>
 
-          <Button
-            variant="tertiary"
-            data-testid="open-filter-button"
-            icon={<FadersHorizontalIcon size={16} />}
-            iconPosition="left"
-            aria-label="Open Filters"
-            onClick={() => setIsFilterOpen(!isFilterOpen)}
-          >
-            Filters
-          </Button>
+          <SkeletonElement shimmer type="button" loading={!data}>
+            <Button
+              variant="tertiary"
+              data-testid="open-filter-button"
+              icon={<FadersHorizontalIcon size={16} />}
+              iconPosition="left"
+              aria-label="Open Filters"
+              onClick={() => setIsFilterOpen(!isFilterOpen)}
+            >
+              Filters
+            </Button>
+          </SkeletonElement>
         </div>
 
         <div className="product-listing__results">
@@ -87,9 +94,9 @@ function ProductGallery({ title, slug }: Props) {
           )}
 
           {/* Render ALL products */}
-          <div className="product-listing__data-grid">
-            {data &&
-              pages.map((page) => (
+          {data ? (
+            <>
+              {pages.map((page) => (
                 <GalleryPage
                   key={`gallery-page-${page}`}
                   showSponsoredProducts={false}
@@ -98,7 +105,10 @@ function ProductGallery({ title, slug }: Props) {
                   title={title}
                 />
               ))}
-          </div>
+            </>
+          ) : (
+            <ProductGrid page={0} pageSize={0} products={[]} />
+          )}
 
           {/* Prefetch Previous and Next pages */}
           {prev !== false && (
diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index f5eea37d6..052b3ffc1 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -1,6 +1,5 @@
 @import "src/styles/scaffold";
 
-// Check it after apply Skeletons.
 .product-listing {
   --product-listing-row-height: var(--space-6);
 
@@ -29,19 +28,6 @@
   }
 }
 
-.product-listing__data-grid {
-  --product-listing-grid-height: 1750px;
-  --product-listing-row-height: var(--space-6);
-
-  min-height: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
-  contain-intrinsic-size: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
-  content-visibility: auto;
-
-  @include media(">=notebook") {
-    --product-listing-grid-height: 1016px;
-  }
-}
-
 .product-listing__filters {
   @include media(">=notebook") {
     position: sticky;
@@ -62,6 +48,11 @@
   padding: var(--space-1) var(--space-3) var(--space-2);
   background-color: var(--bg-neutral-lightest);
 
+  [data-element-variant="text"] {
+    min-width: rem(225px);
+    min-height: var(--space-5);
+  }
+
   @include media(">=notebook") {
     grid-column: 6 / span 7;
     justify-content: flex-end;
@@ -72,6 +63,10 @@
     .button[data-store-button] {
       display: none;
     }
+
+    [data-element-variant="button"] {
+      display: none;
+    }
   }
 }
 
@@ -92,9 +87,12 @@
     padding: 0;
     background-color: unset;
   }
+
+  [data-element-variant="text"] {
+    min-width: rem(130px);
+  }
 }
 
-// Check it after apply Skeletons.
 .product-listing__results {
   --padding: var(--space-1);
 
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index db12a007c..4e1245519 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -11,13 +12,15 @@ interface ProductShelfProps {
 
 function ProductShelf({ products }: ProductShelfProps) {
   return (
-    <ul data-product-shelf className="grid-content">
-      {products.map((product, idx) => (
-        <li key={`${product.id}`}>
-          <ProductCard product={product} index={idx + 1} />
-        </li>
-      ))}
-    </ul>
+    <ProductShelfSkeleton loading={products.length === 0}>
+      <ul data-product-shelf className="grid-content">
+        {products.map((product, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard product={product} index={idx + 1} />
+          </li>
+        ))}
+      </ul>
+    </ProductShelfSkeleton>
   )
 }
 
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 5c377bf59..fdfa07210 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 import ProductCard from 'src/components/product/ProductCard'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
@@ -26,19 +27,21 @@ const getRatio = (products: number, idx: number) => {
 
 const ProductTiles = ({ products }: TilesProps) => {
   return (
-    <Tiles>
-      {products.map((product, idx) => (
-        <Tile key={product.id}>
-          <ProductCard
-            data-testid="tile-card"
-            product={product}
-            index={idx + 1}
-            variant="horizontal"
-            aspectRatio={getRatio(products.length, idx)}
-          />
-        </Tile>
-      ))}
-    </Tiles>
+    <ProductTilesSkeleton variant="horizontal" loading={products.length === 0}>
+      <Tiles>
+        {products.map((product, idx) => (
+          <Tile key={product.id}>
+            <ProductCard
+              data-testid="tile-card"
+              product={product}
+              index={idx + 1}
+              variant="horizontal"
+              aspectRatio={getRatio(products.length, idx)}
+            />
+          </Tile>
+        ))}
+      </Tiles>
+    </ProductTilesSkeleton>
   )
 }
 
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
new file mode 100644
index 000000000..c3642b055
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './filter-skeleton.scss'
+
+interface Props {
+  loading?: boolean
+}
+
+function FilterSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <div data-store-filter-skeleton>
+      <SkeletonElement shimmer type="text" />
+
+      <div data-filter-skeleton-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <Shimmer />
+      </div>
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default FilterSkeleton
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
new file mode 100644
index 000000000..ffffaa89b
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -0,0 +1,28 @@
+@import "src/styles/scaffold";
+
+[data-store-filter-skeleton] {
+  margin-top: var(--space-1);
+
+  @include media("<notebook") { display: none; }
+
+  [data-filter-skeleton-content] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-1) var(--space-1) var(--space-0);
+    overflow: hidden;
+    border: var(--border-width-0) solid var(--color-border-display);
+    border-radius: var(--border-radius-default);
+
+    [data-element-variant="text"] {
+      min-width: 100%;
+      min-height: var(--space-8);
+      margin-bottom: var(--space-0);
+    }
+  }
+
+  [data-element-variant="text"] {
+    max-width: 30%;
+    margin-bottom: var(--space-2);
+  }
+}
diff --git a/src/components/skeletons/FilterSkeleton/index.ts b/src/components/skeletons/FilterSkeleton/index.ts
new file mode 100644
index 000000000..3224f597c
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSkeleton'
diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
new file mode 100644
index 000000000..29dbd24bb
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './product-card-skeleton.scss'
+
+interface Props {
+  bordered?: boolean
+  sectioned?: boolean
+  showActions?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+function ProductCardSkeleton({
+  bordered,
+  sectioned = false,
+  showActions = false,
+  variant = 'vertical',
+}: Props) {
+  return (
+    <div
+      data-store-product-card-skeleton
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-product-card-skeleton-image data-sectioned={sectioned}>
+        <SkeletonElement type="image" />
+      </div>
+      <div data-product-card-skeleton-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="badge" />
+        {showActions && <SkeletonElement type="button" />}
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductCardSkeleton
diff --git a/src/components/skeletons/ProductCardSkeleton/index.ts b/src/components/skeletons/ProductCardSkeleton/index.ts
new file mode 100644
index 000000000..852a53006
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCardSkeleton'
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
new file mode 100644
index 000000000..4185d7392
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -0,0 +1,58 @@
+@import "src/styles/scaffold";
+
+[data-store-product-card-skeleton] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 14vw;
+  height: 100%;
+  padding: var(--space-1) var(--space-1) var(--space-2);
+  overflow: hidden;
+  border: var(--border-width-0) solid transparent;
+  border-radius: var(--border-radius-default);
+
+  @include media(">=notebook") { min-width: 12rem; }
+
+  &[data-bordered="true"] { border: var(--border-width-0) solid var(--color-border-display); }
+
+  [data-product-card-skeleton-image] {
+    [data-element-variant="image"] {
+      height: 45vw;
+
+      @include media(">=notebook") {
+        height: rem(195px);
+      }
+    }
+
+    &[data-sectioned="true"] {
+      [data-element-variant="image"] {
+        min-width: 13rem;
+        height: rem(195px);
+      }
+    }
+  }
+
+  [data-product-card-skeleton-content] {
+    position: relative;
+    height: 20%;
+    margin-top: var(--space-2);
+
+    [data-element-variant="text"] { margin-bottom: var(--space-2); }
+
+    [data-element-variant="button"] { margin-top: var(--space-4); }
+
+    [data-element-variant="badge"] {
+      min-width: 30%;
+
+      @include media(">=notebook") {
+        min-height: var(--space-5);
+        margin-top: var(--space-4);
+      }
+
+      @include media(">=tablet") {
+        min-width: 20%;
+        max-width: 20%;
+      }
+    }
+  }
+}
diff --git a/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
new file mode 100644
index 000000000..71270deb3
--- /dev/null
+++ b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { ITEMS_PER_PAGE } from 'src/constants'
+
+import ProductCardSkeleton from '../ProductCardSkeleton'
+
+import 'src/components/product/ProductGrid/product-grid.scss'
+
+interface Props {
+  loading?: boolean
+}
+
+function ProductGridSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <ul className="product-grid">
+      {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
+        <li key={String(index)}>
+          <ProductCardSkeleton bordered />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductGridSkeleton
diff --git a/src/components/skeletons/ProductGridSkeleton/index.ts b/src/components/skeletons/ProductGridSkeleton/index.ts
new file mode 100644
index 000000000..568e0cb13
--- /dev/null
+++ b/src/components/skeletons/ProductGridSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductGridSkeleton'
diff --git a/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
new file mode 100644
index 000000000..ab4291893
--- /dev/null
+++ b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { ITEMS_PER_SECTION } from 'src/constants'
+
+import ProductCardSkeleton from '../ProductCardSkeleton'
+
+import 'src/components/sections/ProductShelf/product-shelf.scss'
+
+interface Props {
+  loading?: boolean
+}
+
+function ProductShelfSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <ul data-product-shelf className="grid-content">
+      {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
+        <li key={String(index)}>
+          <ProductCardSkeleton sectioned />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductShelfSkeleton
diff --git a/src/components/skeletons/ProductShelfSkeleton/index.ts b/src/components/skeletons/ProductShelfSkeleton/index.ts
new file mode 100644
index 000000000..e0147164a
--- /dev/null
+++ b/src/components/skeletons/ProductShelfSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductShelfSkeleton'
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
new file mode 100644
index 000000000..9e0e89205
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Shimmer from 'src/components/skeletons/Shimmer'
+import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import './product-tile-skeleton.scss'
+
+interface Props {
+  tileIndex: number
+  bordered?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+function ProductTileSkeleton({
+  tileIndex,
+  bordered,
+  variant = 'vertical',
+}: Props) {
+  return (
+    <div
+      data-store-product-tile-skeleton
+      data-tile-index={tileIndex}
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-product-tile-skeleton-image data-tile-index={tileIndex}>
+        <SkeletonElement type="image" />
+      </div>
+      <div data-product-tile-skeleton-content data-tile-index={tileIndex}>
+        <div data-product-tile-skeleton-text data-tile-index={tileIndex}>
+          <SkeletonElement type="text" />
+          <div data-product-tile-skeleton-price>
+            <SkeletonElement type="text" />
+          </div>
+        </div>
+
+        <div data-product-tile-skeleton-badge data-tile-index={tileIndex}>
+          <SkeletonElement type="badge" />
+        </div>
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductTileSkeleton
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts
new file mode 100644
index 000000000..6c876886c
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTileSkeleton'
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
new file mode 100644
index 000000000..eb13ef4f1
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
@@ -0,0 +1,170 @@
+@import "src/styles/scaffold";
+
+[data-store-product-tile-skeleton] {
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &[data-tile-index="1"] {
+    min-width: 9rem;
+    height: 24rem;
+
+    @include media(">=tablet") { height: 28rem; }
+  }
+
+  &[data-variant="horizontal"] {
+    [data-product-tile-skeleton-content] {
+      background-color: var(--bg-neutral-light);
+
+      @include media(">=tablet") {
+        padding: var(--space-2) var(--space-3) var(--space-3);
+      }
+    }
+  }
+
+  [data-product-tile-skeleton-image] {
+    height: 60%;
+    min-height: 60%;
+    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+
+    @include media(">=tablet") {
+      height: 70%;
+      min-height: 70%;
+    }
+
+    @include media(">=notebook") {
+      height: 80%;
+      min-height: 80%;
+    }
+
+    &[data-tile-index="1"] {
+      height: 80%;
+
+      @include media(">=tablet") {
+        height: 70%;
+        min-height: 70%;
+      }
+
+      @include media(">=notebook") {
+        height: 80%;
+        min-height: 80%;
+      }
+    }
+
+    [data-store-skeleton-element] { height: 100%; }
+
+    [data-element-variant="image"] {
+      width: 100%;
+      height: 100%;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [data-product-tile-skeleton-content] {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    height: 40%;
+    padding: var(--space-3);
+    border-bottom-right-radius: var(--border-radius-default);
+    border-bottom-left-radius: var(--border-radius-default);
+
+    @include media(">=tablet") {
+      flex-flow: row wrap;
+      height: 30%;
+    }
+
+    @include media(">=notebook") {
+      flex-flow: row wrap;
+      height: 20%;
+    }
+
+    &[data-tile-index="1"] {
+      height: 20%;
+      padding: var(--space-2) var(--space-3);
+
+      @include media(">=tablet") {
+        flex-flow: row wrap;
+        height: 30%;
+      }
+
+      @include media(">=notebook") { height: 20%; }
+    }
+
+    [data-product-tile-skeleton-text] {
+      width: 70%;
+
+      @include media(">=tablet") {
+        width: 50%;
+
+        &[data-tile-index="2"],
+        &[data-tile-index="3"] { width: 100%; }
+      }
+
+      @include media(">=notebook") {
+        width: 60%;
+
+        &[data-tile-index="2"],
+        &[data-tile-index="3"] { width: 60%; }
+      }
+
+      [data-element-variant="text"] { margin-bottom: var(--space-1); }
+
+      [data-product-tile-skeleton-price] {
+        width: 60%;
+
+        @include media(">=tablet") { width: 100%; }
+      }
+    }
+
+    [data-product-tile-skeleton-badge] {
+      position: absolute;
+      right: var(--space-1);
+      width: 20%;
+
+      @include media(">=tablet") { width: 20%; }
+
+      &[data-tile-index="2"],
+      &[data-tile-index="3"] {
+        bottom: var(--space-2);
+        left: var(--space-3);
+        width: 30%;
+
+        @include media(">=tablet") {
+          position: relative;
+          bottom: 0;
+          left: var(--space-2);
+          width: 50%;
+        }
+
+        @include media(">=notebook") {
+          position: absolute;
+          right: var(--space-1);
+          bottom: unset;
+          left: unset;
+          width: 30%;
+        }
+      }
+
+      [data-element-variant="badge"] {
+        width: 100%;
+        height: var(--space-4);
+
+        @include media(">=tablet") {
+          position: absolute;
+          right: var(--space-1);
+        }
+
+        @include media(">=notebook") {
+          position: relative;
+          right: var(--space-0);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
new file mode 100644
index 000000000..cc5f5443a
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import Tiles, { Tile } from 'src/components/ui/Tiles'
+
+import ProductTileSkeleton from './ProductTileSkeleton'
+
+// TODO: // Replace it when items number be dinamically defined
+const DEFAULT_ITEMS_NUMBER = 3
+
+interface Props {
+  loading?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+function ProductTilesSkeleton({
+  children,
+  loading = true,
+  variant = 'vertical',
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <Tiles>
+      {Array.from({ length: DEFAULT_ITEMS_NUMBER }, (_, index) => (
+        <Tile key={String(index)}>
+          <ProductTileSkeleton tileIndex={index + 1} variant={variant} />
+        </Tile>
+      ))}
+    </Tiles>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductTilesSkeleton
diff --git a/src/components/skeletons/ProductTilesSkeleton/index.ts b/src/components/skeletons/ProductTilesSkeleton/index.ts
new file mode 100644
index 000000000..556abc08c
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTilesSkeleton'
diff --git a/src/components/skeletons/Shimmer/Shimmer.tsx b/src/components/skeletons/Shimmer/Shimmer.tsx
new file mode 100644
index 000000000..a1110c320
--- /dev/null
+++ b/src/components/skeletons/Shimmer/Shimmer.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import './shimmer.scss'
+
+function Shimmer() {
+  return (
+    <div data-store-shimmer>
+      <div data-shimmer />
+    </div>
+  )
+}
+
+export default Shimmer
diff --git a/src/components/skeletons/Shimmer/index.ts b/src/components/skeletons/Shimmer/index.ts
new file mode 100644
index 000000000..e0f129d4d
--- /dev/null
+++ b/src/components/skeletons/Shimmer/index.ts
@@ -0,0 +1 @@
+export { default } from './Shimmer'
diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
new file mode 100644
index 000000000..d4d32c135
--- /dev/null
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -0,0 +1,24 @@
+[data-store-shimmer] {
+  /*
+   * Parent must have `position: relative` and `overflow: hidden`
+   * in order to the effect to work properly.
+   */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  animation: loading 800ms infinite linear;
+
+  [data-shimmer] {
+    width: 50%;
+    height: 100%;
+    background: var(--color-white-transparent-20);
+    box-shadow: 0 0 var(--space-5) var(--space-5) var(--color-white-transparent-20);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translate3d(-50vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
diff --git a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
new file mode 100644
index 000000000..97ca2916c
--- /dev/null
+++ b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+import Shimmer from '../Shimmer'
+
+import './skeleton-element.scss'
+
+type ElementVariant = 'text' | 'button' | 'image' | 'badge'
+
+interface Props {
+  loading?: boolean
+  shimmer?: boolean
+  type: ElementVariant
+}
+
+function SkeletonElement({
+  type,
+  children,
+  loading = true,
+  shimmer = false,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <div data-store-skeleton-element data-shimmer={shimmer}>
+      <div data-skeleton-element-content data-element-variant={type} />
+      {shimmer && <Shimmer />}
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default SkeletonElement
diff --git a/src/components/skeletons/SkeletonElement/index.ts b/src/components/skeletons/SkeletonElement/index.ts
new file mode 100644
index 000000000..762fcb8f3
--- /dev/null
+++ b/src/components/skeletons/SkeletonElement/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonElement'
diff --git a/src/components/skeletons/SkeletonElement/skeleton-element.scss b/src/components/skeletons/SkeletonElement/skeleton-element.scss
new file mode 100644
index 000000000..def2b1bdb
--- /dev/null
+++ b/src/components/skeletons/SkeletonElement/skeleton-element.scss
@@ -0,0 +1,34 @@
+[data-store-skeleton-element] {
+  &[data-shimmer="true"] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-skeleton-element-content] {
+    overflow: hidden;
+    background: var(--bg-skeleton-loading);
+    border-radius: var(--border-radius-default);
+
+    &[data-element-variant="text"] {
+      width: 100%;
+      height: var(--space-4);
+    }
+
+    &[data-element-variant="button"] {
+      width: var(--space-13);
+      min-height: var(--space-5);
+      column-gap: var(--space-2);
+      border-radius: var(--border-radius-button);
+    }
+
+    &[data-element-variant="image"] {
+      border-radius: var(--border-radius-default);
+    }
+
+    &[data-element-variant="badge"] {
+      width: 40%;
+      height: var(--space-5);
+      border-radius: var(--border-radius-pill);
+    }
+  }
+}
diff --git a/src/constants.ts b/src/constants.ts
index c083bca92..139f1c081 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +1,2 @@
 export const ITEMS_PER_PAGE = 12
+export const ITEMS_PER_SECTION = 5
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2d5f01d7e..f8e72c7fc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -24,7 +24,6 @@ function Page(props: Props) {
   const title = site?.siteMetadata?.title ?? ''
   const siteUrl = `https://${host}${pathname}`
   const products = allStoreProduct?.nodes
-  const haveProducts = products && products?.length > 0
 
   return (
     <>
@@ -73,23 +72,19 @@ function Page(props: Props) {
         <IncentivesHeader />
       </section>
 
-      {haveProducts && (
-        <section className="page__section page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Most Wanted</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products.slice(0, 5)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Most Wanted</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(0, 5)} />
+        </div>
+      </section>
 
-      {haveProducts && (
-        <section className="page__section / grid-section grid-content">
-          <h2 className="title-section">Just Arrived</h2>
-          <div className="page__section-content">
-            <ProductTiles products={products.slice(5, 8)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section / grid-section grid-content">
+        <h2 className="title-section">Just Arrived</h2>
+        <div className="page__section-content">
+          <ProductTiles products={products?.slice(5, 8)} />
+        </div>
+      </section>
 
       <section className="page__section / grid-section">
         <BannerText
@@ -100,14 +95,12 @@ function Page(props: Props) {
         />
       </section>
 
-      {haveProducts && (
-        <section className="page__section page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Deals & Promotions</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products.slice(9, 14)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Deals & Promotions</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(9, 14)} />
+        </div>
+      </section>
     </>
   )
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index da795711e..36378234a 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -8,8 +8,8 @@
   --color-black-transparent-5: rgb(0 0 0 / 5%);
   --color-black-transparent-10: rgb(0 0 0 / 10%);
   --color-black-transparent-20: rgb(0 0 0 / 20%);
-  --color-white-transparent-10: rgb(0 0 0 / 10%);
-  --color-white-transparent-20: rgb(0 0 0 / 20%);
+  --color-white-transparent-10: rgb(255 255 255 / 10%);
+  --color-white-transparent-20: rgb(255 255 255 / 20%);
 
   // Text
   --color-link: var(--color-secondary-2);
@@ -38,6 +38,7 @@
   --bg-disabled: var(--color-neutral-2);
   --bg-focus-ring: var(--color-emphasis);
   --bg-selected-outline: var(--color-emphasis-transparent-80);
+  --bg-skeleton-loading: var(--bg-disabled);
 
   // Backgrounds – Contextual
   --bg-success: var(--color-success);