> For the complete documentation index, see [llms.txt](https://kitisummus.gitbook.io/molla/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kitisummus.gitbook.io/molla/theme-settings/product-card-item.md).

# Product card item

## 1 - Layout

### 1.1 - Show image of first available variant

Display photos according to the variant.

![](/files/-MMdX3wcuUqZ-6JZEDSn)

### 1.2 - Image type

![](/files/-MMdYe58GqtgWTiccN77)

### 1.3 - Use second image

Show 2nd image on hover.

### 1.4 - Product card grid layout

On version 1.6.0, there are 24 layouts available. [Preview](https://cdn.shopify.com/s/files/1/0264/6972/8316/files/Midas-Product-grid.jpg)

### 1.5 - Label style

![](/files/-MMd_h0VqHFLBVlDsbNg)

### 1.6 - Text align

![](/files/-MMdaVxvSBK0nJDaNWnB)

## 2 - Function

* Show review?
* Show product vendor?

![](/files/-MMdcPDVdQWvdt7kxmDQ)

* Show countdown?

![](/files/-MMdkh5C770PUuQiF8bn)

## 3 - Variants list

### 3.1 - Show variants list?

![](/files/-MMdm2qntXkr54nJ40ne)

### 3.2 - Show name option?

![](/files/-MMdmSQDJR3bMYwLViUi)

### 3.3 - Show only first option?

Show only the first option of the product.

### 3.4 - Show only option of list.

Show only the options listed.

### 3.5 - Hide when there is only 1 variant?

### 3.5 - Hide on mobile?

### 3.6 - Swatch layout

* Swatch image variant
* Swatch crop image variant
* Swatch color

### 3.7 - Custom option

* Name option

![](/files/-MMfLbQ4dswFhtLUP3Wp)

* Is swatch color(image)

![](/files/-MMfLOFSP2DX5V3qRoWK)

* Style for option

![](/files/-MMfKfZrntRsdBKHu1i0)