**LAYOUT

Product card example:

++ Use two collumn product in once row on mobile  

Result:

++ Show image of first available variant: the first image of the product variants will loaded when enter the site

++ Image type

Normal
Non stretch image
Stretch image

++ Use second image: when you hover on the product image, it's changed into the other promptly

** Product card grid layout

Layout 1

Layout 2

Layout 3

Layout 4

Layout 5

Layout 6

Layout 7

Layout 8

Layout 9

Layout 10

Layout 11

Layout 11

Layout 12

Layout 13

Layout 14

Layout 15

Layout 16

++ Label style

- Style 1

- Style 2

- Style 3

 ++ Text align

- Left

- Center

- Right

++ Use Lablel

- Sale label: Discount below 10% will only display the label Sale. Conversely, it will show the percentage being reduced.

- New label: will be showed up when your products are recently uploaded

-

++ Style for price varies

- Price range

- Price from

** FUNCTION

++ Show review?  (on Home page)

++ Show product vendor?  

++ Use Add to cart button?

++ Use Popup chose variant when Add to cart?  

** VARIANT LIST

++ Show variants list?
++ Show name option?
++ Show only first option?
++ Hide when there is only 1 variant?
++ Hide on mobile?

++ Swatch layout

- Swatch color

- Swatch image variant

- Swatch crop image variant