Badges

Overview

Flair badges are text or image labels that display on your Shopify products. Merchants use them to highlight offers such as discounts and bundles, describe the product (new, limited edition, or a product claim), explain what buying involves (stock status, pre-order, dispatch times, or free shipping), and give shoppers a reason to buy now (best seller, only 3 left, or ends Friday).

Each badge has a type (text or image), its own content, styling, and display rules that control when it appears. Badges can be published immediately, scheduled for a future date, linked to any URL, given a priority, and tagged so groups of badges can be shown together.

Manage badges

On the Badges page, search, filter, and sort your badges, or switch between compact and expanded views. Click a preview to edit a badge. Learn more about the list controls and view options.

Type

Choose the badge type.

There are two Flair badge types available:

• Text
• Image

Text Content

This section only applies to text badges.

Enter the content for your badge. This supports text, emojis and dynamic text.

Translations

Translate your badge text into multiple languages. See the Translations guide for setup and details.

Image Content

This section only applies to image badges.

Upload your own custom image badges to promote products.

The image will be stored in your Shopify Files for fast delivery using the Shopify content delivery network.

Enter the image details:

• Image - Upload your image. Supports any PNG, JPG, GIF, Webp, or SVG image up to 2MB in size.
• Alt Text - (optional) Enter some descriptive text to help visually impaired customers and search engines (SEO).
• Width - Specify the width of the image in pixels.
• Height - Specify the height of the image in pixels.
• Aspect Ratio - If the aspect ratio is locked, the width and height ratio will match the original image dimensions. The aspect ratio must be locked for SVG images.

Style

This section only applies to text badges.

Background Color

Choose the badge background color.

Border

Select the badge border size:

• none
• small
• medium
• large

Border Color

Choose the badge border color.

Left Shape

Choose the left shape of the badge:

• round
• square
• ribbon
• arrow
• angle

Letter Spacing

Select the amount of space to use between the badge letters.

Padding

Select the amount of space to use inside of the badge.

Right Shape

Choose the right shape of the badge:

• round
• square
• ribbon
• arrow
• angle

Shadow

Select the badge shadow:

• none
• small
• medium
• large

Text Color

Choose the badge text color.

Text Size

Select the badge font size.

Text Style

Select the badge font style:

• normal
• bold
• italic
• bold / italic

Display rules

Control when your promotions are eligible to show, based on products, customers, cart contents, and more. Learn more about display rules.

Status

Set the badge status:

• Published - the badge is live
• Unpublished - the badge is not live
• Scheduled - the badge is scheduled to be published or unpublished in the future

Link

Add a link to make your badge interactive.

To add a link:

• Click + Add.
• Enter the URL.
• Select Open in new window to open the link in a new browser tab.

Flair supports the following link formats:

• http:, https:, / – Link to any page in your shop or beyond, e.g., /collections/sale.
• sms: – Open a pre-filled text message, e.g., sms:5551112222&body=Get 20% Off.
• mailto: – Open a pre-filled email, e.g., mailto:[email protected]?subject=Special Offer&body=Please send me the 20% OFF code.
• javascript: – Run custom JavaScript, e.g., javascript:dispatchEvent(new CustomEvent('flair-offer-click')).

Organization

• Priority - Control which badges show first. Set a number from 1 to 9999. Lower numbers mean higher priority.
• Tags - Group related badges to find them easily and include or exclude them in Layouts.

Learn more about organizing Flair promotions.

More actions

Open a badge, then click More actions at the top of the editor:

• Duplicate - create a copy of the badge.
• Delete badge - permanently remove the badge. Deletion can't be undone.

Frequently Asked Questions