How to customize Flair with CSS

Mar 20, 2026

This guide covers common CSS recipes for adjusting how Flair looks on your store.

For the full list of CSS custom properties, see Web Components.

How to add CSS to your Shopify theme

There are two common ways to add CSS:

Theme editor - add it to your theme's Custom CSS section. This is the simplest option and doesn't require editing any files.
Theme code - add it to your existing theme stylesheets or CSS files if you prefer to manage CSS in your theme code directly.

Adjust the 12px and 16px values to match your preferences.

Badges:

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

Banners:

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

Adjust the 12px and 16px values to match your preferences.

Badges:

flair-badges { --flair-font-size: 12px; --flair-line-height: 16px; }

Banners:

flair-banners { --flair-font-size: 12px; --flair-line-height: 16px; }

Badges in a row:

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

Badges in a column:

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

Badges in a row:

flair-badges { --flair-layout-direction: row; --flair-layout-justify-content: center; }

Badges in a column:

flair-badges { --flair-layout-direction: column; --flair-layout-align-items: center; }

Badges:

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

Banners:

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

Badges:

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

Banners:

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

For square and round badge shapes only:

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