Product cards

Badges

Custom badges

To add custom badges to your products

1. In your Shopify admin, go to Products

2. Click the product you want to edit

3. In the Tags section, add a tag using this format: badge:name

   Example: badge:Bestseller badge:super cool badge:Popular

   IMPORTANT

   You must use the exact format above, otherwise, the badge won't be applied.

4. Press Enter to add the tag

NOTE

You can add multiple badge tags, but use them in moderation, too many will clutter your product card.

IMPORTANT

Custom badges cannot be translated.

---

Style badges

If you want a specific product badge to use different colors, you can do that with CSS.

Built-in badges

To change the text color of the Sale badge:

product-card .product-badge.sale { color: red }

To change both the background and text color:

product-card .product-badge.sale { background: red; color: white; border-color: red; padding: 0.2em; }

You can use the same pattern for other badge types, such as: .product-badge.preorder product-badge.new product-badge.soldout

---

Custom badges

If you created a custom badge with a product tag like: badge:Coming soon

you can target that exact badge using its data-badge value:

product-card .product-badge.custom[data-badge="Coming soon"] { color: red }

You can also change the full badge style:

product-card .product-badge.custom[data-badge="Coming soon"] { background: red; color: white; border-color: red; padding: 0.2em }

TIP

When styling badges, it’s usually best to set all three together for a consistent result: background color border-color

Featured product

This feature lets you highlight a product and make it stand out by giving it more space in the grid. To use it, you need to create a product metafield and assign it to the product you want to feature.

1. Create Metafield

1. In your Shopify admin, go to Settings → Custom data
2. Click Products.
3. Click Add definition
4. Set the following:
   • Name: Featured product
   • Namespace and key: openthinking.featured_product
   • Type: Select True or false
5. Click Save

2. Add Metafield to Product

1. Go to Products
2. Click the product you want to highlight
3. Scroll down to the Metafields section
4. Find Featured product
5. Check the box (set it to True)
6. Click Save

The product will now appear as a featured item in the grid.

CAUTION

Improper use of this feature can break the grid layout.

• Do not apply it to the wrong products.
• Do not place two featured products next to each other.
• Avoid using it too frequently in the same collection.

WARNING

Solely you are responsible for using this feature correctly. Any layout issues caused by misuse are your responsibility.

TIP

If you experience layout issues, simply uncheck or disable the metafield on the affected product.