Ride by Shopify

Here are the instructions to install Flair on the Ride theme made by Shopify.

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:

{%- when 'title' -%}
<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 9.

On collection pages

Edit snippets/card-product.liquid:

<h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"{% if card_product.featured_media or settings.card_style == 'card' %} id="title-{{ section_id }}-{{ card_product.id }}"{% endif %}>
<a href="{{ card_product.url }}" id="CardLink-{{ section_id }}-{{ card_product.id }}" class="full-unstyled-link" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}">
{{ card_product.title | escape }}
</a>
</h3>
<div data-flair-product-badge data-product-id={{ card_product.id }}></div>

And add line 6.

Install Flair banners

Edit layout/theme.liquid:

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

And add line 2.

Additional Resources