Flair product badge snippet options

The Flair product badge snippet includes several options so you can get your product badges showing exactly the way you'd like.

Multiple badge support

You can show multiple Flair badges by adding the optional flair_badge_max setting when you include the Flair snippet.

By default, Flair will only show one badge at a time.

Here is how you can configure Flair to show up to 3 badges:

{% include 'flair-product-badges', with flair_badge_max: 3 %}

Position your badges by specifying CSS classes

You can customize the alignment and spacing of your Flair badges by specifying additional CSS classes that will be applied to your badges using the flair_css_class option.

Flair includes a number of built-in CSS classes you can use, or you can specify your own CSS classes for complete control.

Built-in badge alignment CSS classes

You can customize how your badges line up using one of these built-in Flair CSS classes:

  • flair-inline — show badges on the same line; by default badges show on separate lines
  • flair-center — center the badges horizontally; this can't be combined with flair-inline

You can combine this alignment with the multiple badge option above.

Here is an example of showing up to 3 badges on the same line:

{% include 'flair-product-badges', with flair_badge_max: 3, flair_css_class: 'flair-inline' %}

Built-in badge spacing CSS classes

You can customize how much space (aka - margin) shows around each badge.

For example, to add a 10px margin around each badge you would specify the flair-space-md CSS class like so:

{% include 'flair-product-badges', with flair_css_class: 'flair-space-md' %}

Here is a list of the most commonly used spacing options:

  • flair-space-sm — 5px margin on all sides
  • flair-space-md — 10px margin on all sides
  • flair-space-lg — 20px margin on all sides
  • flair-space-sm — 5px margin on all sides
  • flair-space-tb-sm — 5px margin on top and bottom
  • flair-space-tb-md — 10px margin on top and bottom
  • flair-space-tb-lg — 20px margin on top and bottom
  • flair-space-lr-sm — 5px margin on left and right
  • flair-space-lr-md — 10px margin on left and right
  • flair-space-lr-lg — 20px margin on left and right

For the full list, you can look in your snippets/flair-product-badges.liquid file.

Badge positioning using custom CSS

You can also apply custom CSS to your Flair badges by using the flair_css option.

NOTE: Passing in the flair_css will clear any default spacing options for Flair badges.

Example: Setting a custom margin

For example, if you wanted to manually specify a 3px margin on the top and bottom you could pass this in like so:

{% include 'flair-product-badges', with flair_css: 'margin-top: 3px; margin-left: 3px;' %}

Example: Positioning your badges on top of your product

Top Left

To position your badges on the top left of your product images you could try this:

{% include 'flair-product-badges', with flair_css: 'position: absolute; top: 0; left: 0; z-index: 1000;' %}

Top Centered

To position your badges on the top of your product images centered horizontally you could try this:

{% include 'flair-product-badges', with flair_css: 'position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1000;' %}

You can read more about how to position your badges on top of your product images here.

Still need help? Contact Us Contact Us