Web Components

Overview

Flair web components let you show Flair badges and banners anywhere in your Shopify theme, for manual placement, custom integrations, and more.

• Flair badges - show badges on any page or template with <flair-badges>.
• Flair banners - show banners on any page or template with <flair-banners>.
• Flair layout CSS - customize how badges and banners are positioned and displayed.
• Common custom CSS examples - copy common customizations, such as hiding badges on mobile.

Flair badges

The <flair-badges> element adds Flair badges to products in your shop.

<flair-badges product-id="123" layout="my layout"></flair-badges>

Badge attributes

You can specify these attributes to customize your Flair badges:

• product-id - the product id; set to auto (default) to use the current product
• layout - the badge layout name
• maximum - the maximum number badges to show; if supported on your Flair plan
• tags - show badges with tags (e.g. - tags="sale, bogo"); if supported on your Flair plan
• tags-not - show badges without tags (e.g. - tags-not="clearance, preorder"); if supported in your Flair plan
• variant-id - the variant id; set to auto to use the current variant; if supported in your Flair plan

Badge CSS properties

These properties can be used to customize the display of Flair badges:

• --flair-background - set the background color (e.g. - white)
• --flair-border - set the border (e.g. - 1px solid gray)
• --flair-border-radius - set the border radius (e.g. - .75em); only used for round badge shapes
• --flair-color - set the text color (e.g. - black)
• --flair-drop-shadow - set the drop shadow (e.g. - drop-shadow(2px 2px))
• --flair-font-family - set the font family (e.g. - Arial)
• --flair-font-size - set the font size (e.g. - 12px)
• --flair-font-style - set the font style (e.g. - italic)
• --flair-font-weight - set the font weight (e.g. - bold)
• --flair-image-object-fit - set the image object fit; defaults to scale-down
• --flair-image-object-position - set the image object position; defaults to initial
• --flair-letter-spacing - set the letter spacing (e.g. - 0.025em)
• --flair-line-height - set the line height (e.g. - 1.5em)
• --flair-max-height - set the max height; defaults to 100%
• --flair-max-width - set the max width; defaults to 100%
• --flair-padding - set the padding (e.g. - 5px 10px); vertical padding is only supported for square and round badge shapes; use line-height to add vertical space for other badge shapes.
• --flair-white-space - set the white space (e.g. - nowrap, normal); only supported for square and round badge shapes.

Flair banners

The <flair-banners> element adds Flair banners in your shop.

<flair-banners product-id="123" layout="my layout"></flair-banners>

Banner attributes

• product-id - the product id; set to auto (default) to use the current product
• layout - the banner layout name
• maximum - the maximum number banners to show; if supported on your Flair plan
• tags - show banners with tags (e.g. - tags="sale, bogo"); if supported on your Flair plan
• tags-not - show banners without tags (e.g. - tags-not="clearance, preorder"); if supported in your Flair plan
• variant-id - the variant id; set to auto to use the current variant; if supported in your Flair plan

Banner CSS properties

These properties can be used to customize the display of Flair banners:

• --flair-background - set the background color (e.g. - white)
• --flair-border - set the border (e.g. - 1px solid gray)
• --flair-border-radius - set the border radius (e.g. - .75em)
• --flair-color - set the text color (e.g. - black)
• --flair-direction - set the flex direction (e.g. - row, column)
• --flair-drop-shadow - set the drop shadow (e.g. - drop-shadow(2px 2px))
• --flair-font-family - set the font family (e.g. - Arial)
• --flair-font-size - set the font size (e.g. - 12px)
• --flair-font-style - set the font style (e.g. - italic)
• --flair-font-weight - set the font weight (e.g. - bold)
• --flair-gap - set the inner gap (e.g. - 10px)
• --flair-letter-spacing - set the letter spacing (e.g. - 0.025em)
• --flair-line-height - set the line height (e.g. - 1.5em)
• --flair-link-hover-brightness - set the value of the brightness when hovering banners with a link (e.g. - 1.05)
• --flair-max-height - set the max height; defaults to 100%
• --flair-max-width - set the max width; defaults to 100%
• --flair-padding - set the padding (e.g. - 5px 10px)

Button CSS properties

These properties can be used to customize the display of Flair banner actions (aka - buttons or links):

• --flair-action-background - set the background color (e.g. - white)
• --flair-action-border-radius - set the border radius (e.g. - .75em)
• --flair-action-color - set the text color (e.g. - black)
• --flair-action-font-size - set the font size (e.g. - 12px)
• --flair-action-font-style - set the font style (e.g. - italic)
• --flair-action-font-weight - set the font weight (e.g. - bold)
• --flair-action-letter-spacing - set the letter spacing (e.g. - 0.025em)
• --flair-action-line-height - set the line height (e.g. - 1.5em)
• --flair-action-padding - set the padding (e.g. - 5px 10px)
• --flair-action-text-decoration - set the text decoration (e.g. - underline)

Countdown timer CSS properties

These properties can be used to customize the display of Flair banner countdown timers:

• --flair-timer-background - set the background color (e.g. - white)
• --flair-timer-border-radius - set the border radius (e.g. - .75em)
• --flair-timer-color - set the text color (e.g. - black)
• --flair-timer-font-family - set the font family (e.g. - Arial)
• --flair-timer-font-size - set the font size (e.g. - 12px)
• --flair-timer-font-style - set the font style (e.g. - italic)
• --flair-timer-font-weight - set the font weight (e.g. - bold)
• --flair-timer-gap - set the gap between timer items (e.g. - 10px)
• --flair-timer-letter-spacing - set the letter spacing (e.g. - 0.025em)
• --flair-timer-line-height - set the line height (e.g. - 1.5em)
• --flair-timer-padding - set the padding (e.g. - 5px 10px)
• --flair-timer-text-decoration - set the text decoration (e.g. - underline)

Flair layout CSS

These properties can be used to customize the display of the <flair-badges> and <flair-banners> elements:

• --flair-layout-align-items - align items on the cross-axis (e.g. - start, center, end)
• --flair-layout-bottom - set the bottom position
• --flair-layout-display - set the display (e.g. - block, inline-block, etc)
• --flair-layout-direction - set the flex direction (e.g. - row, column)
• --flair-layout-gap - set the gap between items (e.g. - 10px)
• --flair-layout-justify-content - justify content around the main axis (e.g. - start, center, end)
• --flair-layout-left - set the left position
• --flair-layout-margin - set the margin (e.g. - 10px 5px)
• --flair-layout-position - set the position (e.g. - absolute, relative)
• --flair-layout-right - set the right position
• --flair-layout-top - set the top position
• --flair-layout-transform - set the transform (e.g. - translateX(50%))
• --flair-layout-wrap - set the flex wrap (e.g. - wrap, nowrap)
• --flair-layout-zindex - set the z-index

Common custom CSS examples

These examples use flair-badges. Replace it with flair-banners to apply them to banners.

Set the mobile font size and line height

@media only screen and (max-width:480px) {
  flair-badges { --flair-font-size: 12px; --flair-line-height: 16px; }
}

Set direction to row and center badges on mobile

@media only screen and (max-width:480px) {
  flair-badges { --flair-layout-direction: row; --flair-layout-justify-content: center; }
}

Set direction to column and center badges on mobile

@media only screen and (max-width:480px) {
  flair-badges { --flair-layout-direction: column; --flair-layout-align-items: center; }
}

Hide badges on mobile

@media only screen and (max-width:480px) {
  flair-badges { --flair-layout-display: none; }
}

Hide badges on desktop

@media only screen and (min-width:480px) {
  flair-badges { --flair-layout-display: none; }
}

Allow badge text to wrap

flair-badges { --flair-white-space: normal; }

Frequently Asked Questions