fix: Add dedicated products page collection

app/[locale]/products/page.tsx

@@ -1,7 +1,7 @@
-import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 
+import { ProductGrid } from 'components/grid/product-grid';
 import Navbar from 'components/layout/navbar';
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
@@ -36,7 +36,7 @@ export default async function ProductPage({
     <div>
       <Navbar cart={cart} locale={locale} compact />
       <div className="py-24 md:py-48">
-        <ThreeItemGrid lang={locale} />
+        <ProductGrid lang={locale} />
       </div>
 
       <Suspense>

components/grid/product-grid.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+import Label from '../label';
+import { GridTileImage } from './tile';
+
+function ProductGridItem({ item, priority }: { item: Product; priority?: boolean }) {
+  const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
+
+  return (
+    <div className={clsx('col-span-1 row-span-1 md:col-span-2 md:row-span-1')}>
+      <Link className="w-full bg-black/30" href={`/product/${item.handle}`}>
+        <div className="relative block aspect-square overflow-hidden ">
+          <GridTileImage
+            src={item.featuredImage.url}
+            fill
+            sizes={'(min-width: 768px) 33vw, 100vw'}
+            priority={priority}
+            alt={item.title}
+          />
+        </div>
+        <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
+          <Label
+            title={item.title as string}
+            amount={item.priceRange.maxVariantPrice.amount}
+            currencyCode={item.priceRange.maxVariantPrice.currencyCode}
+            size={size?.value}
+          />
+          <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export async function ProductGrid({ lang }: { lang?: SupportedLocale }) {
+  // Collections that start with `hidden-*` are hidden from the search page.
+  const productPageItems = await getCollectionProducts({
+    collection: 'hidden-products-page-items',
+    language: lang?.toUpperCase()
+  });
+  console.debug({ productPageItems });
+
+  if (!productPageItems?.length) return null;
+
+  return (
+    <section
+      className={clsx(
+        'mx-auto grid max-w-screen-xl gap-6 px-4 pb-4 ',
+        'grid-cols-1 md:grid-cols-6',
+        'grid-rows-3 md:grid-rows-1'
+      )}
+    >
+      {productPageItems.map((item) => (
+        <ProductGridItem key={item.id} item={item} priority={true} />
+      ))}
+    </section>
+  );
+}

components/grid/three-items.tsx

@@ -8,12 +8,14 @@ import { GridTileImage } from './tile';
 
 function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) {
   const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
-  return (
+  const image = item?.variants?.[0]?.image;
+
+  return !!image ? (
     <div className={clsx('col-span-1 row-span-1 md:col-span-2 md:row-span-1')}>
       <Link className="w-full bg-black/30" href={`/product/${item.handle}`}>
         <div className="relative block aspect-tall overflow-hidden ">
           <GridTileImage
-            src={item.featuredImage.url}
+            src={image?.url}
             fill
             sizes={'(min-width: 768px) 33vw, 100vw'}
             priority={priority}
@@ -31,7 +33,7 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
         </div>
       </Link>
     </div>
-  );
+  ) : null;
 }
 
 export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) {

lib/shopify/fragments/product.ts

@@ -40,6 +40,9 @@ const productFragment = /* GraphQL */ `
             name
             value
           }
+          image {
+            ...image
+          }
           price {
             amount
             currencyCode

lib/shopify/types.ts

@@ -98,6 +98,7 @@ export type ProductVariant = {
     value: string;
   }[];
   price: Money;
+  image: Image;
 };
 
 export type SEO = {