How to troubleshoot Flair

Mar 22, 2026
On this page

This guide helps you diagnose and fix common Flair issues.

Before you begin

Let's check the basics:

  • You've created at least one badge or banner
  • You've enabled Flair in your theme
  • You've added a Flair badge or banner to the page in question

If you're not sure about any of these, review the quick start guide.

We recommend installing the Flair Inspect tool, which is the same tool our support team uses. It will give you useful insights into how Flair is configured throughout your store as you work through this guide.

Flair is not showing on collection or search pages

  1. Verify Flair is added to collection pages. Flair must be added to collection pages separately from product pages. See how to show Flair on collection, home, and search pages.
  2. Check if another app is controlling your collections. Some search and filter apps replace the default collection page content, which may require an integration.

Flair is not showing on some products

  1. Verify conditions match. Open the badge or banner and verify the conditions match the products on that page. Check product tags, collections, sale price, inventory, and any other conditions you've set.
  2. Verify collection is published to Online Store. If you're using a collection condition, the collection must be published to the Online Store sales channel. Flair can only see collections that are published to Online Store.
  3. Verify metafield Storefront access. If you're using a metafield condition, the metafield must have Storefront API access enabled under Settings > Custom data.
  4. Verify it's not a theme CSS conflict. If Flair elements are on the page but badges aren't appearing, try adding the following CSS to your theme. See how to customize CSS.
    flair-badges { border: 1px solid transparent; }

Flair is not displaying correctly

If unexpected badges or banners are showing, or the wrong number of promotions appear, this is usually a layout configuration issue.

  1. Verify the correct layout is assigned. Run Flair Inspect to see which layout is applied to each element. If the wrong layout is showing, check your layout assignments.
  2. Check layout tag filtering. If the layout uses tags for badge or banner selection, verify the tags match your badges and banners.
  3. Check your layout display settings. Layouts control things like max badges and positioning.

Image badges are blurry or distorted

  1. Use an SVG image. SVGs scale to any size without losing quality.
  2. Upload at the correct dimensions. Upload your image at the same dimensions you've set in Flair. Scaling up or down can cause blurriness or artifacts.
  3. Match the aspect ratio. The width and height in Flair should match the aspect ratio of your source image (e.g., 16:9). A mismatch will cause the image to appear stretched or skewed.

Still not working?

If you've worked through the steps above and Flair still isn't behaving as expected, contact support and we'll help you diagnose the issue.

Navigation