Skip to main content

Product Card - Without Variation

Lorem Ipsum

Product Card


The product card image offer valuable information can help customer understand the product quickly.

  • Best Seller
  • New Arrival
  • Wishlist
  • Shop the look
  • Image Carousel

Also there is 'Add to Bag' CTA on top of the image.


The product cards can be used showcasing various products. Each product card content offer following information and interaction.

  • Product Title
  • Product Price
  • Product Variation selector such as colours, different sizes, birthstone
  • Product Materials or Type

Product Card Layout can be in Grid or Carousel.

Product Card - Grid ( Product Landing Page )

Product Card- Desktop, 2 Cards, Grid

Text Alignment - Left

Usage- Product Landing Page

Product Card- Desktop, 4 Cards, Grid

Text Alignment - Left

Usage- Product Landing Page

Product Card - Carousel (Product Category)

Product Card Carousel can be used for showcasing a categorized group of products such as

  • Trending jewelry

  • Best sellers

Product Card- Desktop, 4 Cards, Carousel

Text Alignment - Left

Usage- Product Category

Product Card- Mobile, 1 Cards + Sneak Peek, Carousel

Text Alignment - Left

Usage- Product Category

Product Card (Style With)

Product Card- Desktop, 3 Cards + Sneak Peek, Carousel

Text Alignment - Left

Usage- Style With on PDP

Product Card- Mobile, 2 Cards + Sneak Peek, Carousel

Text Alignment - Left

Usage- Style With on PDP

Product Card (Shop The Look)

Product Card- Desktop, 2 Cards, Grid

Text Alignment - Left

Usage- Shop The Look CTA Pop Up (Drawer)

Product Card- Desktop, 2 Cards, Grid

Text Alignment - Left

Usage- Shop The Look CTA Pop Up (Drawer)