Product Card

Default configuration for product card. includes layout, content, image and display variant options...

Layout

#

Product card example

We have built many skins for product card. Including grid and list layout skins. You can configure default layout for product card display. These configurations can be overridden in configuration section.

In Customize » Theme settings, Open group Product Card then locate Layout. Here you can make the necessary configurations.

#

Layout Settings
  • Card Skin : Select default skin for card product.
  • Show Rating : Show product rating. For this option to work you need to install the review app. See instructions

Image Card

In Customize » Theme settings, Open group Product Card then locate Image Card. Here you can make the necessary configurations.

#

Image Card Settings
  • Aspect Ratio : Set image ratio for image card.
  • Image Size : set the size attribute for the img tag. See more about the sizes attribute .
  • Hover Style : Select a hover style for the image. Available options include None, Zoom in, Slide left, Slide right, and Slide up.
  • Show second image on hover : Enable so that when hovering on the image card the second image in the library will be displayed.
  • Default thumbnail : Select the default image for the product card. If the gallery does not contain any images, the default image will be displayed..

Add To Cart

In Customize » Theme settings, Open group Product Card then locate Add To Cart. Here you can make the necessary configurations.

Select option mode when clicking Add to cart if the product has variations. Available options include Open Popup and View Detail Product.

#

Select Option Mode

Variant Options

#

Variant options example

Enable if you want to show variations on product card. It will help customers reach the item faster.

In Customize » Theme settings, Open group Product Card then locate Variant Options. Here you can make the necessary configurations.

#

Variant options settings
  • Show variant options : Disable/Enable on the product card.
  • Option name : Enter the name of the option you want to display. For example Color, Size...
  • Option design : Select the design for the variation. Available options include button, color , image, dropdown
  • Number of option's values to display : Number of variations displayed.
On this page
Check