Product card item settings

53 views September 23, 2019 October 22, 2019 hyun-dung 0

**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

++

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 16 LAYOUTS

++ Layout 1

++ Layout 2

++ Layout 3

++ Layout 4

++ Layout 5

++ Layout 6

++ Layout 7

++ Layout 8

++ Layout 9

++ Layout 10

++ 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?

++ 
++ Countdown style
– Light
– Dark

++ Use Add to cart button?

++ Use Popup chose variant when Add to cart?

this popup will display once customer click Add to cart button

** VARIANT LIST

++ Show variants list?

++ Show name option?

++ Hide when there is only 1 variant?


++ Hide on mobile? Don’t show variant list on mobile

++ Swatch layout

– Swatch color

– Swatch image variant

– Swatch crop image variant

 

Was this helpful?