# Product card item

## 1 - Layout

### 1.1 - Show image of first available variant

Display photos according to the variant.

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMcsE4-Msp7SP_lFelT%2F-MMdX3wcuUqZ-6JZEDSn%2FScreenshot_142.jpg?alt=media\&token=ae61f9a5-de5c-406f-b643-65c6b9f16c0d)

### 1.2 - Image type

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMcsE4-Msp7SP_lFelT%2F-MMdYe58GqtgWTiccN77%2FScreenshot_143.jpg?alt=media\&token=27ddc700-bea0-4ca7-904e-4ca68ac3e20a)

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

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMcsE4-Msp7SP_lFelT%2F-MMd_h0VqHFLBVlDsbNg%2FScreenshot_144.jpg?alt=media\&token=daa963e7-95fc-40a1-9e52-062f91d28b99)

### 1.6 - Text align

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMcsE4-Msp7SP_lFelT%2F-MMdaVxvSBK0nJDaNWnB%2FScreenshot_145.jpg?alt=media\&token=3bc5a616-f941-45eb-aee5-cf792123832a)

## 2 - Function

* Show review?
* Show product vendor?

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMdakmqrZVxI29XIN2g%2F-MMdcPDVdQWvdt7kxmDQ%2FScreenshot_146.jpg?alt=media\&token=8f2abd83-95f6-40c0-aff1-33edf33826c1)

* Show countdown?

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMdakmqrZVxI29XIN2g%2F-MMdkh5C770PUuQiF8bn%2FScreenshot_147.jpg?alt=media\&token=dab40bde-5338-48b5-9ac3-b0c57b8a7d2d)

## 3 - Variants list

### 3.1 - Show variants list?

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMdakmqrZVxI29XIN2g%2F-MMdm2qntXkr54nJ40ne%2FScreenshot_148.jpg?alt=media\&token=b3063548-4c12-4ca4-95f1-da33b03a0032)

### 3.2 - Show name option?

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMdakmqrZVxI29XIN2g%2F-MMdmSQDJR3bMYwLViUi%2FScreenshot_149.jpg?alt=media\&token=ffdbb5e3-0166-4b55-a31b-0fd051004de5)

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

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMew8QO-PjRNXrPve5Q%2F-MMfLbQ4dswFhtLUP3Wp%2FScreenshot_152.jpg?alt=media\&token=1dc36d7d-71cc-4938-a481-2cb7da42de4f)

* Is swatch color(image)

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMew8QO-PjRNXrPve5Q%2F-MMfLOFSP2DX5V3qRoWK%2FScreenshot_151.jpg?alt=media\&token=e020392e-fa87-4e38-afaa-16df00d9d5be)

* Style for option

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MMew8QO-PjRNXrPve5Q%2F-MMfKfZrntRsdBKHu1i0%2FScreenshot_150.jpg?alt=media\&token=6cf02542-0f68-4921-bd5f-a8ca089e6fcc)