How to show Flair on collection, home, and search pages
On this page
This guide shows how to display Flair on pages that show product grids, including collection pages, home page featured collections, search results, and recommendation sections.
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.
Add Flair using app blocks (recommended)
Some newer Shopify themes (such as Horizon-based themes) support adding Flair to collection pages using app blocks. New to app blocks? Check out our app block guide.
- Open the theme editor and navigate to a collection, home, or search page.
- Click Add block and select Flair badges or Flair banners.
- Drag the block to the position where you want it to appear.
- Click Save.
- Verify Flair is working on your live store.
If your theme doesn't support app blocks on collections, use the manual method below.
Add Flair manually
In most Shopify themes, these pages use the same (or very similar) product card snippet. This means you usually only need to make one code edit to cover all of them.
This section uses badges as the example, but the same approach works for banners using the <flair-banners> element.
Find the product card snippet
Open the Shopify theme code editor. Look for your product card snippet. The most common files:
snippets/card-product.liquidsnippets/product-card.liquidsnippets/product-grid-item.liquidsnippets/product-block.liquidsnippets/product-item.liquidsnippets/product-listing.liquidsnippets/product-thumbnail.liquid
See our theme-specific instructions for popular themes.
Insert the Flair code snippet
Search the snippet for product.title. This is the most reliable way to find where the product title is rendered. Add the following tag near the product title, typically right after the closing </h3> or </h2> tag:
<flair-badges product-id="{{ product.id }}"></flair-badges>Some themes use a different product variable. Check what your snippet uses for the title and adjust the product-id value accordingly. For example:
<flair-badges product-id="{{ card_product.id }}"></flair-badges>Save and test
Click Save. Then visit a collection page on your store to verify the badges are displaying correctly.
Looking for Gen 2 instructions? See How to show Flair on Gen 2.
Related guides
Check out these guides for more options to customize Flair.
- Layouts - control count, position, and orientation
- Web Components - advanced placement and styling options
Theme-specific instructions
See the table below for details on adding Flair to popular themes.
| Theme | File | Notes |
|---|---|---|
| Dawn, Colorblock, Craft, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste, Trade | snippets/card-product.liquid | Find the line containing card-information and add the Flair code before it. |
| Prestige | snippets/product-card.liquid | Find the line containing show_title and add the Flair code before it. |
| Impulse, Motion, Streamline | snippets/product-grid-item.liquid | Find the line containing grid-product__title and add the Flair code after it. |
| Empire | snippets/product-grid-item.liquid | Find the line containing </h2> and add the Flair code after it. |
| Warehouse | snippets/product-item.liquid | Find the line containing product-item__title and add the Flair code after it. |
| Symmetry | snippets/product-block.liquid | Find the line containing product-block__title and add the Flair code after it. |
| Debut | snippets/product-block.liquid | Find the line containing product-card__title and add the Flair code after it. |
| Focal | snippets/product-item.liquid | Find the line containing product-item-meta__title and add the Flair code after it. |
| Broadcast | snippets/product-grid-item.liquid | Find the line containing product-item__title and add the Flair code after it. |
| Expanse | snippets/product-grid-item.liquid | Find the line containing vendor_enable and add the Flair code before it. |
| Reformation | snippets/product-card.liquid | Find the line containing product-card-info and add the Flair code after it. |
| District | snippets/product-card.liquid | Find the line containing show_vendor and add the Flair code before it. |
| Impact | snippets/product-card.liquid | Find the line containing product-card__info and add the Flair code after it. |
| Superstore | snippets/product-grid-item.liquid | Find the line containing </h2> and add the Flair code after it. |
| Venue | snippets/product-card.liquid | Find the line containing </h3> and add the Flair code after it. |
| Supply | snippets/product-grid-item.liquid | Find the line containing product-item--price and add the Flair code before it. |
| Turbo | snippets/product-info.liquid | Find the line containing display_vendor and add the Flair code before it. |
| Canopy | snippets/product-card.liquid | Find the line containing card__title and add the Flair code before it. |
| Brooklyn | snippets/product-grid-item.liquid | Find the line containing product.title and add the Flair code after it. |
| Flex | snippets/product-thumbnail.liquid | Find the line containing product-thumbnail__title and add the Flair code after it. |
| Blockshop | snippets/product-card.liquid | Find the line containing product--title and add the Flair code before it. |
| Ella | snippets/product-card.liquid | Find the line containing card__heading and add the Flair code after it. |
| Pipeline | snippets/product-grid-item.liquid | Find the line containing product_grid_show_rating and add the Flair code before it. |
| Testament | snippets/product-listing.liquid | Find the line containing product-info and add the Flair code after it. |
| Showcase | snippets/product-block.liquid | Find the line containing class="title" and add the Flair code after it. |
| Envy | snippets/product-grid--indiv-product.liquid | Find the line containing indiv-product-title-text and add the Flair code after it. |
| Minimal | snippets/product-grid-item.liquid | Find the line containing grid-link__title and add the Flair code after it. |
| Boost | snippets/product-block.liquid | Find the line containing show_vendor and add the Flair code before it. |
| Mr Parker | snippets/product-listing.liquid | Find the line containing prod-title and add the Flair code after it. |
| Grid | snippets/product-list-item.liquid | Find the line containing </h2> and add the Flair code after it. |
| Retina | snippets/product-thumbnail.liquid | Find the line containing display_vendor_collection and add the Flair code before it. |
| Fashionopolism, Icon | snippets/product-listing.liquid | Find the line containing </h3> and add the Flair code after it. |
| Flow | snippets/grid-view-item.liquid | Find the line containing product-grid--price and add the Flair code before it. |
| ShowTime | snippets/product-card.liquid | Find the line containing </h3> and add the Flair code after it. |
| Responsive | snippets/product-thumbnail.liquid | Find the line containing </h3> and add the Flair code after it. |
| Atlantic | snippets/product-item.liquid | Find the line containing </h2> and add the Flair code after it. |
| Venture | snippets/product-card.liquid | Find the line containing product-card__name and add the Flair code before it. |
| Wokiee | snippets/product-grid-item-design-1.liquid | Find the line containing </h2> and add the Flair code after it. |