> 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

{% 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="/files/wcRCL0QnBInLxQVuAY2G" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card style" %}

<figure><img src="/files/auZVXIhLKDFDuWl8Yqrl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Morden style" %}

<figure><img src="/files/I2XGzSFUVeBekMa7SqNe" 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="/files/AQPP7WhOfj76buAwWPRU" 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="/files/Kzb5Raw2BxpHN3s8ZhQe" 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="/files/KEIKx1qQP6qnPoR1yA73" 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="/files/TRfq7r7vzQYKwqU38kLu" alt=""><figcaption></figcaption></figure>