diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx
index 7a45327e7..861e60bfd 100644
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@@ -9,6 +9,7 @@ import Label from 'components/label';
import { SupportedLocale } from 'components/layout/navbar/language-control';
import Price from 'components/price';
import { ProductDescription } from 'components/product/product-description';
+import { ProductTastingNotes } from 'components/product/tasting-notes';
import { VariantSelector } from 'components/product/variant-selector';
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
import { getProduct, getProductRecommendations } from 'lib/shopify';
@@ -72,6 +73,7 @@ export default async function ProductPage({
handle: params.handle,
language: params?.locale?.toUpperCase()
});
+
let otherImages: MediaImage[] = [];
if (!!product) {
otherImages = product.images
@@ -151,6 +153,10 @@ export default async function ProductPage({
+
+
{!!otherImages &&
otherImages?.length > 0 &&
diff --git a/components/product/tasting-notes.tsx b/components/product/tasting-notes.tsx
new file mode 100644
index 000000000..737463cf7
--- /dev/null
+++ b/components/product/tasting-notes.tsx
@@ -0,0 +1,35 @@
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import Image from 'next/image';
+
+export function ProductTastingNotes({ product }: { product: Product }) {
+ const notes = product?.notes?.value;
+ const imageUrl = product?.notesImage?.reference?.image?.url;
+ const imageWidth = product?.notesImage?.reference?.image?.width;
+ const imageHeight = product?.notesImage?.reference?.image?.height;
+ const imageAlt = product?.notesImage?.reference?.image?.altText;
+
+ if (!imageUrl && !imageWidth && !imageHeight) {
+ return null;
+ }
+
+ return (
+
+ {!!notes ? (
+
+ ) : null}
+ {imageUrl && imageHeight && imageWidth && (
+
+
+
+ )}
+
+ );
+}
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 9441d78af..cd7696c85 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -149,6 +149,14 @@ export type ShopifyProduct = {
summary: {
value: string;
};
+ notes?: {
+ value?: string;
+ };
+ notesImage?: {
+ reference: {
+ image: Image;
+ };
+ };
options: ProductOption[];
priceRange: {
maxVariantPrice: Money;