Avatar by Skup

Here are the instructions to install Flair on the Avatar theme made by Skup.

How to edit your theme

  • Visit Shopify Admin > Themes and click Actions > Edit code.

Install Flair product badges

On product pages

Edit sections/main-product.liquid:

There may be multiple h1 tags in this template. Edit the one with class 'd-md-block'

{%- when 'title' -%}
<h1 class="product-title mb-3 font-3 d-none d-md-block">
{{ product.title }}
</h1>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 5.

On collection pages

Edit snippets/product-card.liquid:

<h3 class="product-card-title tw-font-semibold tw-text-xl tw-leading-tight tw-font-base">
{{ product.title | link_to: link_url | replace: '<a', '<a class="focus-visible:tw-ring-2 focus-visible:tw-ring-btn-bg focus:tw-outline-none tw-text-color hover:tw-text-link"' }}
</h3>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 4.

Install Flair banners

Edit layout/theme.liquid:

<body>
<div data-flair-banner></div>

And add line 2.

Additional Resources