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

# Product cards

Change layout, content and display variant options

{% hint style="success" %}
Steps

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

## General settings <a href="#id-1.-layout-and-image" id="id-1.-layout-and-image"></a>

### Product actions

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-6ed428f21ab8b26ba5b62c22f171012743278b76%2Fimage%20(1277).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card style" %}

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-53618aff3400b66849f8c43b8810153135536bc3%2Fimage%20(1276).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Morden style" %}

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-87b05d2d93b4452ef2fed21830d18061d3332e90%2Fimage%20(1278).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2a54508be16d549e9e9c90e3675bee46c4b41d3d%2Fimage%20(457).png?alt=media" alt=""><figcaption></figcaption></figure>

### Product info

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-6d1d09f0946c3cb002978c62a2e902fecb242e50%2Fimage%20(13).png?alt=media" alt=""><figcaption></figcaption></figure>

### Product image

**Show secondary image:** Display the second image upon hovering.

**Image ratio:** Specify the ratio for the images.

**Custom ratio:** Define a custom ratio instead of using the default image ratio.

**Hover effect:** Choose the effect for the hover image.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-e3d90f2341d1313ce4a175a2c328d7b6c5256afb%2Fimage%20(459).png?alt=media" alt=""><figcaption></figcaption></figure>

### Catalog mode and Mobile options

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-ef938dbdf8f0b11f360e4c3e9a46048bf48af244%2Fimage%20(461).png?alt=media" alt=""><figcaption></figcaption></figure>