Seventh > Theme settings > Product badges

Seventh has a couple of default badges, but also gives you the ability to create a custom, unique badge for your products.

Product badges settings

Corner roundness

Changes the corner roundness of all the badges.

Badges for product thumbnail

These settings will only affect badges over product thumbnails. Even if you turn off badges from here, you can still add them as separate blocks inside the product card.

Show badges

Toggle product badges display on or off, over product thumbnails inside the product card.

Vertical position

Align the badges either at the very top or at the very bottom of the product thumbnail.

Horizontal position

Align the badges horizontally, either at the left or at the right of the product thumbnail.

Display badges inline

By default, badges are displayed one under the other, but you can also choose to display them in the same line (if space permits).

Stretch badges horizontally

Only when displaying badges inline, you can choose to show them near each other, or stretch the space between them, to show a badge in a corner and the other badge in the opposite corner. Works best when there are no more than 2 badges per product.

Sold out badge

Change the background & text color of the "sold out" badge.

This badge appears automatically when a product (all of it's variants) are sold out.

Discount badge

Change the background & text color of the "discount" badge.
You can choose to show the discount as:
- Text - will display a (translatable) text lable: "On sale"
- Percentage - will display how much you are saving in a percentage
- Amount - will display the exact amount you are saving

The saving amount or percentage is most accurate when all product options share the same price.

If the product includes options with different prices, the badge highlights the highest possible saving available, shown as a “Save up to” amount or percentage.

Settings up the custom badge

The custom badge is set up through a metafield and allows you to show one custom badge for each of your products.

To set this up you need to:

Create a "single line" type metafield, under your store's Settings > Metafields and metaobjects > Products
Copy the namespace and key of the metafield you've created and paste it in the "Custom badge metafield" setting.
For each product that needs a custom badge, write some text in the new metafield you've created and it will appear in product badges.

Don't try to connect the metafield in this text setting! Because we are outside the product page or grid, we cannot connect metafields in the traditional way, that is why you need to copy & paste the namespace.key value of your metafield manually.