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.

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.

Settings reference

Image

Information

Custom badge

Product badge

Theme settings > Product information > Pre-order (badge settings)

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
• Blum Collection template
• Blum Featured Product Carousel
• Blum Product Template

Updated on: 23/10/2026