diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
index a81a6b02c..9d2ab066f 100644
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -5,15 +5,23 @@ import { Product } from 'lib/shopify/types';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
+ const compareAtPrice = product.compareAtPriceRange.maxVariantPrice.amount;
+ const price = product.priceRange.maxVariantPrice.amount;
+
return (
<>
{product.title}
+ {parseFloat(compareAtPrice) > parseFloat(price) && (
+
+ )}
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
index be14dedca..bd67810dc 100644
--- a/lib/shopify/fragments/product.ts
+++ b/lib/shopify/fragments/product.ts
@@ -24,6 +24,16 @@ const productFragment = /* GraphQL */ `
currencyCode
}
}
+ compareAtPriceRange {
+ maxVariantPrice {
+ amount
+ currencyCode
+ }
+ minVariantPrice {
+ amount
+ currencyCode
+ }
+ }
variants(first: 250) {
edges {
node {
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 23dc02d46..8a7a89891 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -120,6 +120,10 @@ export type ShopifyProduct = {
maxVariantPrice: Money;
minVariantPrice: Money;
};
+ compareAtPriceRange: {
+ maxVariantPrice: Money;
+ minVariantPrice: Money;
+ };
variants: Connection;
featuredImage: Image;
images: Connection;