Fix: color option

components/product/ProductCard/ProductCard.tsx

@@ -25,8 +25,8 @@ const ProductCard: FC<Props> = ({
     <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
       {variant === 'slim' ? (
         <div className="relative overflow-hidden box-border">
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+          <div className="absolute inset-0 flex items-start justify-end m-1 z-20">
+            <span className="text-black  inline-block p-3 font-bold text-xl break-words">
               {product.name}
             </span>
           </div>

framework/shopify/lib/normalize.ts

@@ -22,14 +22,17 @@ const normalizeProductOption = ({
   name: displayName,
   values,
   ...rest
-}: ProductOption) => ({
-  __typename: 'MultipleChoiceOption',
-  displayName,
-  values: values.map((value) => ({
-    label: value,
-  })),
-  ...rest,
-})
+}: ProductOption) => {
+  return {
+    __typename: 'MultipleChoiceOption',
+    displayName,
+    values: values.map((value) => ({
+      label: value,
+      hexColors: displayName === 'Color' ? [value] : null,
+    })),
+    ...rest,
+  }
+}
 
 const normalizeProductImages = ({ edges }: ImageConnection) =>
   edges?.map(({ node: { originalSrc: url, ...rest } }) => ({

framework/shopify/product/get-product.ts

@@ -29,6 +29,8 @@ const getProduct = async (options: {
 
   const product = data?.productByHandle
 
+  console.info(normalizeProduct(product))
+
   return {
     product: product ? normalizeProduct(product) : null,
   }