How to show Flair badges on product images

This guide shows how to overlay Flair badges on collection images and on the featured product image on product pages. Collection images appear on collection, home, search, and recommendation pages, and are sometimes called product cards.

Before you start

• Make sure Flair is enabled in your theme
• Duplicate your theme so you can safely make changes

To learn more, see How to edit your Shopify theme.

Create a badge layout

Flair uses layouts to control where badges appear. To overlay on images, create a layout with absolute positioning.

1. In Flair, go to Badges > Layouts and click Add Layout.
2. Give it a descriptive name like Overlay so you can reference it later.
3. Under Display Settings, change Position to absolute.
4. Pick the corner you want using the two Alignment dropdowns. The example below uses top and left.
5. Optionally adjust Margin to inset the badge from the edge, and Z-index if you need it to sit above other elements.
6. Click Save.

Apply the badge layout

Specify your overlay layout name when you install Flair, either through the Flair badges app block or by editing your theme code. For details on where to add the Flair code so the badge overlays the image, see How to install the Flair code for image badges below.

Apply the layout in an app block

When you install Flair on a page using the Flair badges block, set the Layout field to your overlay layout name (e.g. Overlay).

Apply the layout manually

When you install Flair manually, specify your overlay layout name (e.g. Overlay) as the layout attribute on the <flair-badges> web component:

<flair-badges product-id="{{ product.id }}" layout="Overlay"></flair-badges>

How to install the Flair code for image badges

To overlay a Flair badge on a product image, install the Flair code in the right part of your Shopify theme. The exact location depends on the theme and the page type.

How to install Flair in the product card

This approach works best for badges aligned to the top of the image.

Follow How to show Flair on collection, home, and search pages and apply your overlay layout. The default install places Flair next to the product card content, but with absolute positioning it ends up overlaying the image.

How to install Flair in the image container

This approach works best for any image alignment.

Your theme's built-in badges are already inside the image container, so the browser inspector is the easiest way to find it.

1. On your live store, right-click an existing badge on a product image and choose Inspect.

2. Find the class name on the badge element in the developer tools panel. For example, Horizon themes use product-badges.
3. Open the Shopify theme code editor and search every file for that class name.
4. Add the Flair code just before or after the matching block.
5. Click Save, then reload your store and confirm the badge appears on the image.

How to install Flair on the product page featured image

This approach is possible, but not recommended.

Badges usually perform better when placed near key product information like the title or Add to Cart button. They're more visible and give you more room for multiple promotions.

If you still want to add badges to the featured image, use the same approach as How to install Flair in the image container above:

1. Visit a product page on your store, right-click the featured image, and use Inspect to find a unique class name or code snippet.
2. Search your theme code for that class name or snippet.
3. Add the Flair code inside the featured image container.
4. Click Save, then reload your store and confirm the badge appears on the image.

Not working? Some product page image galleries don't allow additional elements inside the image container. If your theme's gallery is one of them, Flair badges can't be added in this location.

Related how-tos

• Show Flair on product pages
• Show Flair on collection, home, and search pages

Related features

• Layouts
• Web Components

Theme-specific image container instructions

The table below shows where to add the Flair code in popular Shopify themes so it lands inside the image container on collection, home, and search pages.