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

# Product cards

Product cards control how products look in lists and grids. Clear, consistent cards help shoppers scan info, compare items, and decide faster.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FQwaBsJ0u6c8adBG1Ez18%2FCapture%20d'%C3%A9cran%202026-02-19%20190035.png?alt=media&amp;token=6d9e846a-4c0f-4740-8622-d8de2ad5a067" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### How to set it up

* Go to **Online Store** > **Themes** > **Customize**.
* Open **Theme settings** > **Product cards**.
* Make your changes, preview live, then click **Save**.
  {% endhint %}

### Settings

#### Layout

* **Style**: Switch between Standard or Card layouts. Card adds a framed look; Standard is lighter.
* [**Color scheme**](/docs/theme-settings/colors.md#schemes): Applies a preset color combination to cards. Keeps backgrounds and text consistent.
* **Show second image on hover**: Swaps to the next product image when hovering. Great for showing another angle.

#### Content

* **Text alignment**: Align product text Left or Center. Choose what reads best with your images.
* **Text size**: Sets the size of product titles and info.
* **Price size**: Sets the size of product prices.
* **Price font weight**: Choose between normal or bold font weight.
* **Rating style**: Choose Classic Stars, Emoji Stars, or Hearts. Pick a style that matches your brand. (Requires a reviews app.)
* **Show rating count**: Displays the number of reviews next to ratings. Builds trust and social proof.
* **Variants and metafields items style**: Choose Sharp or Rounded for variant/metafield chips. Match the look to your brand.
* **Variants and metafields items style**: set the Variants and metafields items border style.
* **Variants border radius**:  Choose the variants border radius.
* **Buttons size**: Sets the size of **quick add** and **quick view** buttons.
* **Quick add button icon:** Choose the quick add button style (simple plus, plus in a circle or plus in a square).
* **Quick view button icon**: Choose between an eye or a magnifying glass icon.
* **Quick view color scheme**: color scheme for the quick view button.
* **Buttons size**: choose the button size (quick view and quick add).
* **Divider thickness**: Adjusts the thickness of the divider between the top and bottom sections of the product card.&#x20;

#### Border

* **Thickness**: Controls the border weight. Thicker increases emphasis; thinner feels minimal.
* **Corner radius**: Rounds the card corners. More rounding feels softer; zero is crisp.

***

### **Tips**

* Keep text size and alignment consistent across sections.
* Use hover image only if the second image adds value (e.g., lifestyle or alternate angle).
* Pick one rating style and stick with it; show rating count for credibility.
* Test on mobile: ensure text wraps nicely and tap targets stay clear.