# Cards

The **Cards settings** allow you to customize how products, collections, and blogs are displayed within their respective sections. Adjust fonts, content alignment, hover effects, and additional elements to enhance user experience and maintain a cohesive design.

<figure><img src="/files/ynPJXqLdxnt7FxysaneF" alt=""><figcaption></figcaption></figure>

### **1. Product cards**

Customize the display of individual product cards in sections like Featured collection, Collection tabs, Shop the look, Product grid, etc.

* **Content alignment**: Adjust the alignment of product content, including title, price, and description: Left, Center, Right.
* **Heading font**: Choose whether the product title adopts the font style from the Heading or Body typography settings.
* **Image hover effect**: Define the effect applied when users hover over product images:
  * None: Zoom-in effect applied to the product image.
  * Show second image: Displays the second product image when hovered.
* **Product image border:** Define the border style for product images with three options: **None**, **Subtle**, and **Solid**.
* **Show short description**: Displays a short product description below the product title on product cards. The short description is managed via metafields.

<details>

<summary><strong>How to add a short description?</strong></summary>

*Short descriptions enhance product cards by giving concise, relevant details, improving discoverability.*

**Step 1: Create a custom metafield**:

* From your **Shopify admin > Settings > Metafields and metaobjects**.

<figure><img src="/files/5Icje0KukbpqrZwBZkoG" alt=""><figcaption></figcaption></figure>

* Select **Products** from the options > Click **Add definition**.&#x20;

<figure><img src="/files/LPGqDf7yuIBIqIf7QViX" alt=""><figcaption></figcaption></figure>

* Enter **Name** your field, for example, "Short description" or "Product summary".
* Enter **Namespace and key**: `custom.short_description`

**Note:** The **Namespace and key** must be exactly `custom.short_description` for the short description to appear on product cards.

* Set the **Type** to Multiline text or Rich text so you can enter a description.&#x20;

<figure><img src="/files/yMNQDBJzl8lSwaj7cORo" alt=""><figcaption></figcaption></figure>

* **Click Save** the new metafield definition.&#x20;

**Step 2: Add the metafield to the product**:

* From your **Shopify admin**, navigate to **Products**, and select a product.&#x20;
* Scroll to the bottom of the product page to find Product metafileds, select your new metafield.&#x20;
* Enter your short description in the metafield.&#x20;
* **Click Save**.

<figure><img src="/files/MumDUAVsLqcjo7Zg10e4" alt=""><figcaption></figcaption></figure>

**Step 3: Enable Show short description in Product cards in the theme editor.**

<figure><img src="/files/2Wqgh6OZOQTpnVZRqT40" alt=""><figcaption></figcaption></figure>

</details>

### **2. Collection cards**

Control the appearance of collection cards in Collection list section and on the Collections page.

<figure><img src="/files/e9stDwtCoVB8SMldhfAQ" alt=""><figcaption></figcaption></figure>

* **Heading size:** Adjust the font size of the collection title.
* **Content position:** Define whether the collection content appears:
  * **Overlay image:** Displayed on top of the collection image with a semi-transparent background for readability.
  * **Below image:** Positioned under the collection image.
* **Content alignment:** Adjust the alignment of the collection title and product count: Left, Center or Right.
* **Show product counts:** If checked, displays the number of products within the collection under the collection title.
* **Collection image border:** Define the border style for collection images with three options: **None**, **Subtle**, and **Solid**.

### **3. Blog cards**

Blog cards are used in the Blog posts section and on the Blog page to highlight posts attractively.

<figure><img src="/files/TSKdbOk2DMnv1YcFR7bR" alt=""><figcaption></figcaption></figure>

* **Heading size:** Adjust the font size of the blog title.
* **Content alignment:** Set the alignment of blog content, including title, date, author, and excerpt.
* **Show author:** Displays the author's name below the blog title.
* **Show date:** Shows the published date of the blog post.
* **Show excerpt:** Displays a summary of the blog content provided by the author. Ideal for enticing readers with a brief overview of the blog post.
* **Show "Read more" button:** Adds a "Read more" button beneath the post. Clicking it directs users to the full blog content.
* **Blog post image border:** Define the border style for blog post images with three options: **None**, **Subtle**, and **Solid**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/theme-settings/cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.