Changes

components/product/ProductCard/ProductCard.module.css

@@ -41,8 +41,8 @@
   }
 }
 
-.wishlistButton {
+.root .wishlistButton {
-  @apply top-3 right-3 z-50 absolute bg-accent-9 text-accent-0;
+  @apply top-0 right-0 z-30 absolute;
 }
 
 .productTitle > span,

components/product/ProductCard/ProductCard.tsx

@@ -9,9 +9,8 @@ import WishlistButton from '@components/wishlist/WishlistButton'
 interface Props {
   className?: string
   product: Product
-  variant?: 'slim' | 'simple'
+  variant?: 'default' | 'slim' | 'simple'
   imgProps?: Omit<ImageProps, 'src'>
-  noNameTag?: boolean
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
@@ -19,22 +18,26 @@ const placeholderImg = '/product-img-placeholder.svg'
 const ProductCard: FC<Props> = ({
   className,
   product,
-  variant,
+  variant = 'default',
   imgProps,
-  noNameTag = false,
   ...props
 }) => (
   <Link href={`/product/${product.slug}`} {...props}>
-    <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
+    <a
-      {variant === 'slim' ? (
+      className={cn(
+        s.root,
+        { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
+        className
+      )}
+    >
+      {variant === 'slim' && (
+        <>
           <div className="relative overflow-hidden box-border ">
-          {!noNameTag && (
             <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">
                 {product.name}
               </span>
             </div>
-          )}
             {product?.images && (
               <Image
                 quality="85"
@@ -47,7 +50,10 @@ const ProductCard: FC<Props> = ({
               />
             )}
           </div>
-      ) : (
+        </>
+      )}
+
+      {variant === 'simple' && (
         <>
           {process.env.COMMERCE_WISHLIST_ENABLED && (
             <WishlistButton
@@ -57,7 +63,6 @@ const ProductCard: FC<Props> = ({
             />
           )}
           <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
-            {!noNameTag && (
             <div className="absolute top-0 left-0 pr-16 max-w-full">
               <h3 className={s.productTitle}>
                 <span>{product.name}</span>
@@ -68,8 +73,45 @@ const ProductCard: FC<Props> = ({
                 {product.price.currencyCode}
               </span>
             </div>
+          </div>
+          <div className={s.imageContainer}>
+            {product?.images && (
+              <Image
+                alt={product.name || 'Product Image'}
+                className={s.productImage}
+                src={product.images[0].url || placeholderImg}
+                height={540}
+                width={540}
+                quality="85"
+                layout="responsive"
+                {...imgProps}
+              />
             )}
           </div>
+        </>
+      )}
+
+      {variant === 'default' && (
+        <>
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
+            <WishlistButton
+              className={s.wishlistButton}
+              productId={product.id}
+              variant={product.variants[0] as any}
+            />
+          )}
+          <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
+            <div className="absolute top-0 left-0 pr-16 max-w-full">
+              <h3 className={s.productTitle}>
+                <span>{product.name}</span>
+              </h3>
+              <span className={s.productPrice}>
+                {product.price.value}
+                &nbsp;
+                {product.price.currencyCode}
+              </span>
+            </div>
+          </div>
           <div className={s.imageContainer}>
             {product?.images && (
               <Image

components/product/ProductSlider/ProductSlider.module.css

@@ -5,7 +5,7 @@
 
 .control {
   @apply bg-violet absolute bottom-10 right-10 flex flex-row
-  border-accent-0 border text-accent-0 z-50 shadow-xl;
+  border-accent-0 border text-accent-0 z-30 shadow-xl;
   height: 48px;
 }
 

components/product/ProductView/ProductView.tsx

@@ -175,7 +175,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           </div>
         </div>
       </div>
-      <section className="py-12 px-6">
+      <section className="py-12 px-6 mb-10">
         <Text variant="sectionHeading">Related Products</Text>
         <div className="grid grid-cols-4 py-3 gap-10">
           {relatedProducts.map((p) => (
@@ -185,9 +185,9 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             >
               <ProductCard
                 key={p.path}
+                variant="simple"
                 className="animated fadeIn"
                 product={p}
-                noNameTag
                 imgProps={{
                   width: 275,
                   height: 275,

components/ui/Grid/Grid.module.css

@@ -45,13 +45,12 @@
   }
 
   &.filled {
-    & > *:nth-child(6n + 1),
+    & > *:nth-child(6n + 1) {
-    & > *:nth-child(6n + 5) {
       @apply bg-violet;
     }
 
-    & > *:nth-child(6n + 5) {
+    & > *:nth-child(6n + 2) {
-      @apply bg-blue;
+      @apply bg-accent-8;
     }
 
     & > *:nth-child(6n + 3) {
@@ -76,12 +75,12 @@
   }
 
   &.filled {
-    & > *:nth-child(6n + 2) {
+    & > *:nth-child(6n + 1) {
-      @apply bg-blue;
+      @apply bg-violet;
     }
 
-    & > *:nth-child(6n + 4) {
+    & > *:nth-child(6n + 2) {
-      @apply bg-violet;
+      @apply bg-accent-8;
     }
 
     & > *:nth-child(6n + 3) {

pages/index.tsx

@@ -42,7 +42,7 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <Grid>
+      <Grid variant="filled">
         {products.slice(0, 3).map((product, i) => (
           <ProductCard
             key={product.id}
@@ -77,7 +77,7 @@ export default function Home({
         Hebrew. It’s now undergone a name change, and will be referred to as
         ‘Natural’."
       />
-      <Grid layout="B">
+      <Grid layout="B" variant="filled">
         {products.slice(0, 3).map((product, i) => (
           <ProductCard
             key={product.id}