> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Product Card

**Theme:** Blum · **Section type:** Theme setting

Product cards show a product's image, title, price, and badges wherever products appear in a list: collection pages, search results, and product sections. The Product card settings apply to all of them at once, so your products look the same across the store.

> **Note:** Some sections have their own card options, such as **Style** (Standard or Card) or **Image ratio**. Those section settings apply only to that section.
![Product cards with sale badges in a collection grid](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/card-1_1630xhu.png)

**What you can do**
- Choose the image shape and hover image
- Choose the product information on the card
- Show sale, sold out, new in, and pre-order badges
- Add custom badges from a metafield
- See what customers see
- Change the Product card settings
- Fix common problems

---

## Choose the image shape and hover image
1. In the theme editor, click **Theme settings** > **Product card**.
2. Under **Image**, choose an **Image ratio**.
3. Optional: select **Resize image to fit its container** to show the whole image instead of cropping it.
4. Optional: select **Show second image on hover**.
5. Click **Save**.

> **Tip:** Use product images with the same shape and background. Cards with mixed image shapes look uneven in a grid, especially with **Adapt to image**.

## Choose the product information on the card
1. Under **Information**, select what to show: **Show vendor**, **Show rating**, and **Show variant swatches**.
2. Optional: select **Enable quick shop**, so customers can pick a variant and add to cart from the card.
3. Click **Save**.

> **Note:** Ratings come from your review app. Choose it in **Theme settings** > **Product information** > **Rating**. Swatches use the rules in **Theme settings** > **Product information** > **Variant swatches**. The Quick shop popup is set up in **Theme settings** > **Quick shop**.

## Show sale, sold out, new in, and pre-order badges
1. Under **Product badge**, select the badges to show: **Show sold out badge**, **Show sale badge**, **Show new in badge**, and **Show custom badges**.
2. Choose the **Badges position**: **Image top left** or **Image top right**.
3. Choose the **Badges style**: **Default** or **Tilt**.
4. Click **Save**.

When each badge appears:
- **Sold out:** all variants of the product are sold out.
- **Sale:** the product has a compare-at price. The badge shows the discount, for example "Sale 20%", or "Sale up to 20%" when variants have different discounts.
- **New in:** the product was published within the **New in date limit** set in **Theme settings** > **Product information** > **Stock status**.
- **Pre-order:** pre-order applies to the product. The badge replaces the Sold out badge.

**Pre-order badge**
The pre-order badge is available in Blum 3.9 and later. You set it up with the other pre-order options:
1. Click **Theme settings** > **Product information**.
2. Under **Pre-order**, set **Enable pre-order** to **Yes, for products in scope** or **Only when out of stock**.
3. Select **Show pre-order badge on product cards**.
4. Choose the **Badge background** and **Badge text** colors.
5. Click **Save**.

The badge shows the pre-order **Button label**, for example "Pre-order". See the article "Pre-order" for the full setup.

## Add custom badges from a metafield
Custom badges highlight things like "Best seller" or "Limited edition".

1. In the Shopify admin, create a product metafield for the badge, for example `custom.badge`, and fill it on your products.
2. In the theme editor, click **Theme settings** > **Product card**.
3. Under **Custom badge**, enter the **Custom badge metafield**, for example `custom.badge`.
4. Choose the **Badge background color** and **Badge text color**.
5. Under **Product badge**, select **Show custom badges**.
6. Click **Save**.

The metafield can be:
- **Single line text** or a **list of single line text**: each value shows as a badge in the colors from the theme settings.
- **Metaobject** or a **list of metaobjects**: each entry shows as its own badge. Give the metaobject the fields `badge_text` (single line text), `badge_bg_color` (color), and `badge_text_color` (color). Empty colors use the theme settings.

> **Tip:** Use a metaobject list when different badges need different colors, for example a green "Eco" badge and a black "Limited" badge.

## What customers see
- **Image:** the card shows the product's featured image. With **Show second image on hover**, the second product image appears when customers hover over the card. Products with only one image keep the same image.
- **Badges:** badges appear in the chosen top corner of the image, in the order pre-order or sold out, sale, new in, then custom badges.
- **Quick shop:** with **Enable quick shop**, a quick shop button appears on the card. Customers pick a variant and add to cart in a popup, without opening the product page.
- **Mobile:** hover effects don't apply on touch screens. The quick shop button stays visible.
![Hovering a card shows the second product image and the quick shop button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/card-2_ri9ack.png)

## Settings reference
### Image
| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the card image shape: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
| Resize image to fit its container | Shows the whole image inside the card shape instead of cropping it to fill the shape. |
| Show second image on hover | Shows the product's second image when customers hover over the card. |

### Information
| Setting | What it does |
| ---- | ---- |
| Show vendor | Shows the product vendor on the card. |
| Show rating | Shows the product rating stars. Configure the rating app in Theme settings > Product information. |
| Star rating | Sets the star color. |
| Show variant swatches | Shows color or image swatches on the card. Configure them in Theme settings > Product information. |
| Enable quick shop | Adds a quick shop button that opens the product in a popup. |

### Custom badge
| Setting | What it does |
| ---- | ---- |
| Custom badge metafield | Sets the namespace and key of the badge metafield, for example custom.badge. |
| Badge background color | Sets the default badge background. |
| Badge text color | Sets the default badge text color. |

### Product badge
| Setting | What it does |
| ---- | ---- |
| Show sold out badge | Shows a badge when the product is sold out. |
| Show sale badge | Shows a badge with the discount when the product has a compare-at price. |
| Show new in badge | Shows a badge on recently published products. Set the number of days in Theme settings > Product information. |
| Show custom badges | Shows the badges from the custom badge metafield. |
| Badges position | Places the badges at the Image top left or Image top right. |
| Badges style | Shows the badges in the Default or Tilt style. |

### Theme settings > Product information > Pre-order (badge settings)
| Setting | What it does |
| ---- | ---- |
| Show pre-order badge on product cards | Shows the pre-order badge on cards of pre-order products. Replaces the Sold out badge. Appears when pre-order is turned on. |
| Badge background | Sets the pre-order badge background. Appears with the badge turned on. |
| Badge text | Sets the pre-order badge text color. Appears with the badge turned on. |

## Troubleshooting
**The hover image doesn't change.**
Check that **Show second image on hover** is selected and that the product has at least 2 images. On touch screens there is no hover.

**The custom badge doesn't show.**
Check that **Custom badge metafield** matches the metafield's namespace and key, that **Show custom badges** is selected, and that the product has a value in the metafield. For metaobjects, the text field key must be `badge_text`.

**The New in badge doesn't show.**
The badge appears only on products published within the **New in date limit** in **Theme settings** > **Product information**. With 0, no product gets the badge.

**A sold out product shows "Pre-order" instead of "Sold out".**
Pre-order applies to that product, so the pre-order badge replaces the sold out badge. Change the pre-order scope in **Theme settings** > **Product information** > **Pre-order**.

## Related articles
- [Blum Theme Settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/)
- [Blum Collection template](https://doc.ecomx.co/en/article/blum-collection-template-1tog81y/)
- [Blum Featured Product Carousel](https://doc.ecomx.co/en/article/blum-featured-product-carousel-t3g24r/)
- [Blum Product Template](https://doc.ecomx.co/en/article/blum-product-template-cv3oj3/)