> 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.
***
## Card Style
Pick how your product cards look — Standard or Card.
{% tabs %}
{% tab title="Standard" %}
{% endtab %}
{% tab title="Card" %}
{% endtab %}
{% endtabs %}
***
## Image Presentation
Sets how product images are cropped and sized in the card.
* **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.
***
## Layout & Spacing
* **Show price next to title on desktop** — Puts the price at the end of the title line on desktop. When a title runs long, the price moves to a line of its own. While this is on, card content aligns left and the **Alignment** setting is hidden.
* **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** — 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
* **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 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" %}
{% endtab %}
{% tab title="Variant image" %}
{% 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.
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}