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

# Product cards

The product card shows a product in collection grids, carousels, search, and recommendations. These settings control how it looks.

![Product cards setting panel](/files/MZjF2elBeJEUFMAz98eb)

***

## Card Style

Pick how your product cards look — Standard or Card.

{% tabs %}
{% tab title="Standard" %}
![Standard product card style](/files/Mltfp4g3UeywGlEW7HnA)
{% endtab %}

{% tab title="Card" %}
![Card product card style](/files/afF79eiTG1gPw4tjizyo)
{% endtab %}
{% endtabs %}

***

## Image Presentation

Sets how product images are cropped and sized in the card.

![Image ratio comparison — Original vs Square vs Portrait vs Landscape](/files/J9vdEkSUfkAtaLZ5DeqB)

* **Original** — Keeps each image's original proportions. Best when all photos share the same ratio; mixed ratios make card heights uneven.
* **Square / Portrait / Landscape fill** — Crops all images to one ratio for a uniform grid. The "fill" variants crop to fill the frame; the plain variants add letterbox or pillarbox bars.

{% hint style="info" %}
**Portrait fill is a good starting point for most stores.** It gives a tall card and keeps the grid consistent.
{% endhint %}

***

## Title Line Limit

Sets the maximum number of lines a product title can use, so the grid stays consistent when titles vary in length.

![Title line limit — long title capped at two lines](/files/iHL4fEvLcGe9aMcX3qZo)

***

## Layout & Spacing

* **Content alignment** — Aligns the title, price, and metadata to the left, center, or right.
* **Gap & Spacing** — Set separately for desktop and mobile. Controls the spacing between the image and content, between content rows, and between metadata lines.

***

## Quick Add & Quick View

Both let customers act without leaving the collection page.

![Quick Add button styles — Icon vs Text, full-width vs default](/files/D8HCmLVVj3BH0hn3aGaT)

* **Quick Add** — Adds an Add to Cart action to the card. Choose an icon or text button; the text button can be full-width, which works well on mobile.
* **Quick View** — Opens a product overlay to view images, read the description, and pick variants without leaving the page.

***

## Display Options

![Display options — second image on hover, badges, vendor, and type on a product card](/files/m58WwATDerB4eryd1yp8)

* **Show second image on hover:** Enable this to display the product's second image when a customer hovers the card.
* **Show sale badge:** Show a sale badge on discounted products.
* **Show sold out badge:** Display a sold-out badge on out-of-stock products.
* **Show vendor:** Display the product's vendor name on the card.
* **Show type:** Show the product type on the card.

***

## Swatches on Product Cards

Swatches on the card let customers browse variants without opening a product page.

![Swatch display on product cards — color swatches vs variant image swatches](/files/fIrcGMw3nWPo4ZVmXo0P)

### Swatch Appearance on Cards

Controls how each swatch looks:

* **Position** — Show swatches above or below the product info.
* **Swatch type** — Show each swatch as a **Color** or a **Variant image**.
* **Swatch limit** — Maximum number of swatches shown before an overflow indicator appears.
* **Item gap** — Space between swatches.
* **Desktop width / Mobile width** — Swatch width on each screen size.
* **Height ratio** — Swatch shape. Only available for Color swatches.
* **Selected variant style** — Mark the selected swatch with a **Border** or an **Underline**.

{% tabs %}
{% tab title="Color" %}
![Color swatches on a product card](/files/FfJaTZAxSuH8FtL5p3U4)
{% endtab %}

{% tab title="Variant image" %}
![Variant image swatches on a product card](/files/26kumzBfIlJYR7IbNwwr)
{% endtab %}
{% endtabs %}

> Global swatch appearance (shape, color mapping, product-page behavior) is configured under [Swatches](/helix/theme-settings/swatches.md). These settings control only the card-level display.