> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Style product cards across your Facet store

> Set the picture shape, text alignment and optional border of every product card in Facet, on collection pages, search results and product sections.

The **Product cards** settings style every product card in Facet: the cards on collection and search pages and in sections such as **Featured collection**, **Tabbed collections**, related products and recently viewed products. This page explains the picture shape, the text alignment and the card border.

## What these settings control

* The shape of the product picture on every card.
* The alignment of the title, price and color swatches under the picture.
* An optional thin border around each card.

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Product cards**

Expand **Product cards**. Open a collection page in the preview to see every change.

![The theme editor with Theme settings open and the Product cards group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/product-cards/product-cards-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=f978e4840c3feced9218d705d33875c5)

## Product card settings

![Theme editor sidebar showing the Product cards theme settings: Product cards, Product card image ratio, Product card text alignment, Show card borders.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/product-cards/product-cards-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=627c63d09230f385b8ddf4e68efaf7a2)

> [accordion] Product card image ratio
>
> The shape of the picture area. Pictures are cropped to fill it.
>
> * **Adapt to image**: no fixed shape. The picture area stretches with the card.
> * **Square (1:1)** (default)
> * **Portrait (4:5)**
> * **Portrait (3:4)**
> * **Portrait (2:3)**
> * **Landscape (4:3)**
> * **Landscape (3:2)**

> [accordion] Product card text alignment
>
> **Left** (default), **Center** or **Right**. Aligns the product title, price and the row of color swatches under the picture.

> [accordion] Show card borders
>
> Off by default. Draws a thin line around each card, picture included, in the **Border** color of the section's color scheme. The text under the picture moves in from the edge by 16 pixels so it doesn't touch the line. The border's corners follow the **Cards** setting in [Corner radius](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md).

> [!NOTE]
>
> The color swatches on a card come from the [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md) settings. A card shows up to four swatches, then a count of the rest, such as "+2".

## Best practices

* **Match the ratio to your photos.** Pick the ratio your product photos are shot in, so nothing important is cropped. Portrait (4:5) or (3:4) suits clothing on a model.
* **Avoid Adapt to image with mixed photos.** When photos come in different shapes, a fixed ratio keeps every row of cards level.
* **Use borders on busy backgrounds.** A border helps cards stand apart when pictures have a background close to the page color.

## Related guides

> [card] [Collection page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-page.md)
>
> Set up the product grid where cards appear.

> [card] [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md)
>
> Choose which options show as swatches on cards.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.