# Product cards

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Product cards**
3. Make necessary changes
4. **Save**
   {% endhint %}

## General settings

### Product cards

**Style:** There are 3 card styles to choose from: Standard, Card and Morden.

{% tabs %}
{% tab title="Standard style" %}

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FZ681PeM8g87SVQ9HpsVc%2Fimage.png?alt=media&#x26;token=64df6173-f1e9-436a-bc09-424211836231" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card style" %}

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FgTAgUjVgm2IMuyQbMz09%2Fimage.png?alt=media&#x26;token=057e4a2b-db07-41f7-82ed-395237c20dc0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Morden style" %}

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FOFqKvVY5EX6zDwWC1lFk%2Fimage.png?alt=media&#x26;token=aaffae91-fc76-4009-ac9b-768b1a8334a5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Product actions

There are several options for you to decide what to show inside products layout:

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FagDlzJpgWGhbWX5ymNAU%2Fimage.png?alt=media&#x26;token=9ea125fb-3abb-4cf9-b4f7-7b9a1c17d806" alt=""><figcaption></figcaption></figure>

| Setting                           | Description                                        |
| --------------------------------- | -------------------------------------------------- |
| **Show button "Quick view"**      | enable quick view button when hover a product      |
| **Show button "Add to cart"**     | enable add to cart button when hover a product     |
| **Show button "Add to wishlist"** | enable add to wishlist button when hover a product |
| **Show button "Add to compare"**  | enable add to compare button when hover a product  |

### Product info

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FWD5ipiB1CooLdvcWx2mS%2Fimage.png?alt=media&#x26;token=ee66e93b-4be4-4416-8fc6-411fac6a31e9" alt=""><figcaption></figcaption></figure>

| Setting                         | Description                                                                 |
| ------------------------------- | --------------------------------------------------------------------------- |
| **Alignment**                   | Specify the alignment for product info (left, center, right).               |
| **Product name text transform** | Define the transformation for product names (unset, capitalize, uppercase). |
| **Product name size**           | Set the font size for product names.                                        |
| **Price size**                  | Set the font size for price.                                                |
| **Show vendor**                 | Determine whether to display the vendor information.                        |
| **Show short description**      | Choose whether to display the short description.                            |
| **Show rate**                   | Decide whether to display rating stars.                                     |
| **Rate color**                  | Set the color for the rating stars.                                         |

### Product imageư

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FOz7b0d0FQpFcfQySt2vW%2Fimage.png?alt=media&#x26;token=fe111247-daf3-4066-8271-72dffa4e1ebd" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Setting</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Show secondary image</strong></td><td>Display the second image upon hovering.</td><td></td></tr><tr><td><strong>The Zoom and Glide Effect</strong> </td><td>The Zoom and Glide Effect works only when Show Secondary Image is off, applying smooth zoom and movement to the primary image without interference from a secondary image.</td><td></td></tr><tr><td><strong>Image ratio</strong></td><td>Specify the ratio for the images.</td><td></td></tr><tr><td><strong>Custom ratio</strong></td><td>Define a custom ratio instead of using the default image ratio.</td><td></td></tr><tr><td><strong>Hover effect</strong></td><td>Choose the effect for the hover image.</td><td></td></tr></tbody></table>

### Catalog mode and Mobile options

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FWobmFCmayLySFqAachCQ%2Fimage.png?alt=media&#x26;token=015ec92e-4016-45af-a2b8-a83b415f2084" alt=""><figcaption></figcaption></figure>

| Setting                            | Descrition                                                   |
| ---------------------------------- | ------------------------------------------------------------ |
| **Hidden add to cart button**      | Conceal the add to cart button.                              |
| **Hidden price**                   | Suppress the display of the price.                           |
| **Show product actions on mobile** | Choose whether to display product actions on mobile devices. |