M+ Early Access: Up To 30% Off.
All is Bright:
Product Card - With List Selector
Product Card - With Variant Selector
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.
Variation Selectors in Product Card
When a product card showcase a product has variation, the variation selector or list selector component will show up over the product image by clicking 'Add to Card' CTA. Here are the selector lists.
List Selector
- •
Birthstone
- •
Zodiac
- •
Gemstone
Variation Selector
- •
Size
- •
Letter
- •
Carat
- •
Engraving
- •
Length for Necklace
- •
Length for Bracelet
- •
Length for Anklet
- •
Earring Quantity
- •
Gift Card Format and Amount (2 step)
Product Card - List Selector (GemStone)
Product Card, Desktop, List Selector (GemStone)
Usage- Gemstone Selector
Product Card- Mobile, List Selector (GemStone)
Usage- Gemstone Selector
Product Card - List Selector (Zodiac)
Product Card, Desktop, List Selector (Zodiac)
Usage- Zodiac Selector
Product Card- Mobile, List Selector (Zodiac)
Usage- Gemstone Selector
Product Card - List Selector (BirthStone)
Product Card, Desktop, List Selector (BirthStone)
Usage- BirthStone Selector
Product Card- Mobile, List Selector (BirthStone)
Usage- BirthStone Selector
Product Card - Variant Selector (Ring Size)
Product Card, Desktop, Variant Selector (Ring Size)
Usage- Ring Size Selector
Product Card- Mobile, Variant Selector (Ring Size)
Usage- Ring Size Selector
Product Card - Variant Selector (Letter)
Product Card, Desktop, Variant Selector (Letter)
Usage- Letter Selector
When the letter selector is used in a multi-step process, a back arrow appears on the left side of the title, allowing customers to return to the previous step.
Product Card- Mobile, Variant Selector (Letter)
Usage- Letter Selector
Product Card - Variant Selector (Carat)
Product Card, Desktop, Variant Selector (Carat)
Usage- Carat Selector
Product Card- Mobile, Variant Selector (Carat)
Usage- Carat Selector
Product Card - Variant Selector (Bracelet)
Product Card, Desktop, Variant Selector (Bracelet)
Usage- Bracelet Selector
Product Card- Mobile, Variant Selector (Bracelet)
Usage- Bracelet Selector
Product Card - Variant Selector (Necklace)
Product Card, Desktop, Variant Selector (Necklace)
Usage- Necklace Selector
Product Card- Mobile, Variant Selector (Necklace)
Usage- Necklace Selector
Product Card - Variant Selector (Engraving)
Product Card, Desktop, Variant Selector (Engraving)
Usage- Engraving
Product Card- Mobile, Variant Selector (Engraving)
Usage- Engraving Selector
Product Card - Variant Selector (Earring)
Product Card, Desktop, Variant Selector (Earring)
Usage- Earring Quantity Selector
Product Card- Mobile, Variant Selector (Earring)
Usage- Earring Selector
Product Card - Variant Selector (Gift Card Step 1)
Product Card, Desktop, Variant Selector (Gift Card Step 1)
Usage- Gift Card Format
Product Card- Mobile, Variant Selector (Gift Card Step 1)
Usage- Gift Card Format
Product Card - Variant Selector (Gift Card Step 2)
Product Card, Desktop, Variant Selector (Gift Card Step 2)
Usage- Gift Card Price
Product Card- Mobile, Variant Selector (Gift Card Step 2)
Usage- Gift Card Price