Flair Developer Guide (Gen 3)

This guide contains everything you need to know to customize your Flair installation.

Flair badges

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

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

Options

You can specify these options 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="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

Flair banners

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

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

Options

• 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="clearance, preorder"); if supported in your Flair plan

CSS custom properties

CSS custom properties can be used to customize how Flair displays in your store.

Layouts

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

Flair badges

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-letter-spacing - set the letter spacing (e.g. - 0.025em)
• --flair-line-height - set the line height (e.g. - 1.5em)
• --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

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-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-padding - set the padding (e.g. - 5px 10px)

Flair actions

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)

Flair timers

These properties can be used to customize the display of a 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)

CSS examples

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: row; --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; }