> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withflex.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Extensions App

> The Shopify app that syncs your catalog to Flex, keeps HSA/FSA eligibility current on your products, and adds eligibility badges to your storefront.

The [Flex Extensions app](https://apps.shopify.com/flex-marketing) (formerly Flex Marketing) works alongside the Shopify Flex Payments app to bring HSA/FSA to your store. It:

* **Syncs your products to Flex**, so Flex can classify your catalog
* **Syncs HSA/FSA eligibility back into your Shopify admin** as a read-only product metafield you can filter and build collections on
* **Runs the Flex checkout pixel**, which attributes HSA/FSA orders back to your store
* **Adds storefront blocks**: the product page eligibility badge, a landing page builder, and checkout and reimbursement messaging

> [!WARNING]
>
> The Flex Extensions app is required for HSA/FSA checkout. Install it alongside the [Shopify Flex Payments app](/developer-guides/integration/shopify/overview.md). Without it, HSA/FSA checkout on your store may stop working.

**Why it matters**

* **Increase awareness:** Visible, trustworthy badges catch attention earlier in the journey.
* **Educate customers:** Built-in pop-ups walk shoppers through paying with HSA/FSA.
* **Boost conversion:** Customers are more likely to buy when they can use pre-tax dollars.
* **Increase AOV:** Customers spend more when they can use pre-tax dollars.
* **Improve SEO:** Pre-written HSA/FSA content helps you rank for HSA/FSA terms.
* **Save time:** Everything installs through the Shopify theme editor, no custom code.

## Getting Started

Take a tour of the Flex Extensions app and learn how to optimize your storefront. The video covers setting up product eligibility, creating collections, adding a dynamic eligibility badge, and launching an HSA/FSA landing page.

[Flex Extensions app walkthrough](https://www.youtube.com/embed/MKLTWzIokHI)

### Jump to a Section

> **[Eligibility & Collections](#eligibility--collections)**
>
> Sync product eligibility to your Shopify admin and build smart collections.

> **[Product Badge](#product-badge)**
>
> Add the dynamic HSA/FSA eligibility badge to your product pages.

> **[Landing Page Builder](#landing-page-builder)**
>
> Build a full HSA/FSA landing page in minutes with drop-in blocks.

## Eligibility & Collections

> [!NOTE]
>
> Eligibility sync timing depends on your catalog size and other factors. It can be near-instant for small catalogs, but may take longer for larger catalogs with hundreds or thousands of products. Keep checking your metafields.

 [Watch this chapter (1:39)](https://www.youtube.com/watch?v=MKLTWzIokHI\&t=99s)

When you reinstall the app, Flex begins syncing each product's HSA/FSA eligibility directly into your Shopify admin as a read-only product metafield. You can use that data to filter products, build collections, and see eligibility at a glance, with no manual tagging required.

### View a product's eligibility

### 1. Open a product

In your Shopify admin, go to **Products** and open any product.

### 2. Open its metafields

Scroll to the **Metafields** section, click **View all**, then **More actions → Show read-only metafields**.

### 3. Find the Flex eligibility field

Look for the **Flex HSA/FSA eligibility** metafield. It's populated with one of three values:

* **LMN:** Eligible with a Letter of Medical Necessity (dual-purpose)
* **IIAS:** Always eligible
* **Ineligible:** Not HSA/FSA eligible

This field is read-only. The classification comes directly from Flex and can't be edited in Shopify.

![The Flex HSA/FSA eligibility metafield on a Shopify product](https://mintcdn.com/flex-87/rGaL7q6jfVg986Qc/images/shopify/marketing/find-metafields.png?fit=max\&auto=format\&n=rGaL7q6jfVg986Qc\&q=85\&s=5d8cb0b2b75608ca050b44f530e28bf2)

### Create an HSA/FSA smart collection

Because eligibility lives on each product, you can build a **smart collection** that automatically includes every eligible product, perfect for featuring on an HSA/FSA landing page.

### 1. Create a collection

Go to **Products → Collections → Create collection**, and name it (e.g. *HSA/FSA*).

### 2. Choose Smart collection

Select **Smart collection** and set the conditions to match **any** condition.

### 3. Add the eligibility conditions

Search for the **Flex HSA/FSA eligibility** field and add two conditions:

* `Flex HSA/FSA eligibility` **is equal to** `LMN`
* `Flex HSA/FSA eligibility` **is equal to** `IIAS`

This covers every eligible product and automatically excludes ineligible ones.

### 4. Save

Click **Save**. Your collection now stays up to date automatically as Flex syncs eligibility.

![A Shopify smart collection using the Flex HSA/FSA eligibility conditions](https://mintcdn.com/flex-87/rGaL7q6jfVg986Qc/images/shopify/marketing/smart-collection.png?fit=max\&auto=format\&n=rGaL7q6jfVg986Qc\&q=85\&s=6b72ef1704d744f473434a0fac7814bb)

***

## Product Badge

 [Watch this chapter (4:40)](https://www.youtube.com/watch?v=MKLTWzIokHI\&t=280s)

The Flex badge shows shoppers that a product is HSA/FSA eligible and educates them on how to pay, right on the product page.

### 1. Open your theme editor

In your Shopify admin, go to **Online Store → Themes** and click **Customize** on your live theme.

### 2. Choose a product template

Use the top dropdown to select **Products**, then choose the template to edit (e.g. *Default product*). Because the badge shows correctly per product, you can use a single shared template across all products.

### 3. Add the Flex badge block

In the **Product information** section, click **Add block**, open the **Apps** section, and add the **Flex badge**.

### 4. Configure the badge

> [!NOTE]
>
> **Default eligibility is no longer used.** This setting only applies to merchants on the legacy Flex Marketing app. If you installed or reinstalled the Flex Extensions app after July 7, 2026, you can ignore this field or set it to ineligible as a fallback.

In the right-hand settings, adjust:

* **Default Eligibility:** Legacy setting; you can ignore this or set to ineligible as a fallback
* **Show subscriptions tab:** Adds a Subscription tab to the pop-up
* **Style:** Light or Dark
* **Badge Alignment:** Left, center, or right
* **Badge Width:** 250–350px (the badge text scales with the width)
* **Custom font size:** Override the auto-scaled text (10–32px)
* **Custom letter spacing:** Fine-tune spacing (0–5px)

### 5. Preview and Save

Preview the product page, then click **Save**.

![The Flex badge on a Shopify product page](https://mintcdn.com/flex-87/rGaL7q6jfVg986Qc/images/shopify/marketing/product-badge.png?fit=max\&auto=format\&n=rGaL7q6jfVg986Qc\&q=85\&s=18dcba8bcc9610931577c645aa561351)

> [!WARNING]
>
> If you don't sync product eligibility to Shopify, you'll need to create separate product templates for each eligibility type. We don't recommend this, as it's more manual to manage.

### Educational Pop-up

When a shopper clicks the badge, a pop-up explains how to pay with HSA/FSA. The correct experience is shown based on each product's eligibility.

**Subscription tab**

If you use [Flex's Shopify Subscription Reimbursement Solution](https://docs.withflex.com/developer-guides/integration/shopify/shopify-subscriptions.md), enable the **Show subscriptions** tab. This adds a second tab to the pop-up with steps for subscription customers to get reimbursed. We recommend all subscription merchants turn this on.

![The Flex badge educational pop-up and subscription tab shown to shoppers](https://mintcdn.com/flex-87/rGaL7q6jfVg986Qc/images/shopify/marketing/popups.png?fit=max\&auto=format\&n=rGaL7q6jfVg986Qc\&q=85\&s=912f4ef4448f91f35209e858f75c70c7)

***

## Landing Page Builder

 [Watch this chapter (8:35)](https://www.youtube.com/watch?v=MKLTWzIokHI\&t=515s)

The Flex Extensions app includes pre-built blocks so you can quickly create a complete HSA/FSA landing page. Customize styles to match your theme and publish in minutes.

### 1. Create the page

In your admin, go to **Online Store → Pages → Add page**. Give it a title (e.g. *HSA/FSA*) and set the URL handle (e.g. `hsa-fsa`). Keep it **hidden** for now. You'll make it visible once the template is ready.

### 2. Create a page template

Go to **Online Store → Themes → Customize**. From the top dropdown, select **Pages → Create template**, name it (e.g. *HSA-FSA*), and base it on your **Default page**.

### 3. Add Flex blocks

With the page hidden, click **Add section**, open the **Apps** section, and add the Flex blocks below. Most blocks include an **extra padding** toggle you can turn off to make sections full-width.

* Flex Hero
* Flex Checkout Walkthrough
* Featured collection (standard Shopify block)
* Flex HSA/FSA FAQ
* Flex Subscriptions
* Flex Banner

### 4. Publish the page

Save your changes and exit the editor. Go to **Online Store → Pages**, open your HSA/FSA page, set the **template** you created, set it to **Visible**, and click **Save**.

### 5. Review your live store

Visit your store to confirm everything is displaying correctly.

![A finished HSA/FSA landing page built with Flex blocks](https://mintcdn.com/flex-87/rGaL7q6jfVg986Qc/images/shopify/marketing/landing-page.png?fit=max\&auto=format\&n=rGaL7q6jfVg986Qc\&q=85\&s=0a31d2c222894065cf0daab1de2f666a)

***

## Block Library

Details for each block you can add from the **Apps** section of the theme editor. Every block is fully styleable: colors, fonts, sizes, and padding.

> **Flex Banner**
>
> An announcement banner to highlight HSA/FSA on your store. Choose from preset messages or add your own, and customize colors, links, and display settings.

> **Flex Hero**
>
> A full-width hero section with a "Powered by Flex" badge. Customize the image, colors, text sizes, and layout to match your brand.

> **Flex Checkout Walkthrough**
>
> A step-by-step guide showing customers how to check out with Flex. Adjusts based on product eligibility, with options to customize text, alignment, colors, and spacing.

> **Flex HSA/FSA FAQ**
>
> Pre-written FAQs to help customers understand HSA/FSA and build trust. Includes built-in content to improve SEO, with options to customize styling and add more sections as needed.

> **Flex Subscriptions**
>
> Explains how subscription reimbursement works for customers. Customize colors, text, and layout to match your store.

## Compliance

> [!WARNING]
>
> Any surface that promotes HSA/FSA eligibility carries the applicable disclaimer from [Compliant Marketing](/merchant-success/overview/compliant-marketing.md), on the same screen as the claim, at a readable size, and on screen long enough to be read in video.
>
> The disclaimer hyperlinks [withflex.com/legal/disclosures](https://www.withflex.com/legal/disclosures). In images and video, the URL on its own is fine.
>
> The Flex eligibility badge is an eligibility claim. A page carrying the badge carries the disclaimer, even where no other HSA/FSA copy appears.

***

## Not on Shopify?

For non-Shopify merchants, explore the rest of the Flex Merchant Success resources to implement HSA/FSA marketing solutions on your site.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.