> ## 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.

# Homepage

> Promote HSA/FSA acceptance with site banners and homepage spotlights.

Banners help educate customers early in their shopping journey by clearly communicating that HSA/FSA payments are accepted. Prominent placement at the top of your site increases awareness, encourages shoppers to explore eligible products, and keeps HSA/FSA top of mind throughout their purchase journey.

<div style={{display: 'flex', gap: '0.625rem', flexWrap: 'wrap', margin: '1.5rem 0'}}>
  <a href="#site-banner" style={{textDecoration: 'none', borderBottom: 'none', display: 'inline-block'}}>
    <div style={{backgroundColor: '#e8e6fd', border: 'none', borderRadius: '9999px', padding: '0.375rem 1rem', fontSize: '0.875rem', fontWeight: '500', color: '#171717', cursor: 'pointer', transition: 'opacity 0.2s'}} onMouseEnter={e => e.currentTarget.style.opacity='0.8'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
      Site Banner
    </div>
  </a>

  <a href="#homepage-spotlight" style={{textDecoration: 'none', borderBottom: 'none', display: 'inline-block'}}>
    <div style={{backgroundColor: '#e8e6fd', border: 'none', borderRadius: '9999px', padding: '0.375rem 1rem', fontSize: '0.875rem', fontWeight: '500', color: '#171717', cursor: 'pointer', transition: 'opacity 0.2s'}} onMouseEnter={e => e.currentTarget.style.opacity='0.8'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
      Homepage Spotlight
    </div>
  </a>

  <a href="#site-navigation" style={{textDecoration: 'none', borderBottom: 'none', display: 'inline-block'}}>
    <div style={{backgroundColor: '#e8e6fd', border: 'none', borderRadius: '9999px', padding: '0.375rem 1rem', fontSize: '0.875rem', fontWeight: '500', color: '#171717', cursor: 'pointer', transition: 'opacity 0.2s'}} onMouseEnter={e => e.currentTarget.style.opacity='0.8'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
      Site Navigation
    </div>
  </a>
</div>

***

<a id="site-banner" />

## Site Banner

A thin banner at the top of the homepage and collection pages is the fastest way to let every visitor know HSA/FSA is accepted before they reach checkout.

**Best practices:**

* Pin above navigation so it's visible site-wide
* Link directly to your HSA/FSA landing page or eligible product collection
* Use the official Flex logo and approved messaging for faster recognition
* Keep copy simple and to one line

***

<a id="homepage-spotlight" />

## Homepage Spotlight

A larger co-branded section on your homepage that explains the HSA/FSA benefit and drives customers to act. Best used at launch, paired with a promotional event or product launch for eligible categories, during Open Enrollment, or Q4 'use it or lost it'.

**Best practices:**

* Include the Flex badge and "Pay with HSA/FSA" lock-up in your creative
* Link to your HSA/FSA landing page or eligible product collection
* Pair with the site banner for full-page coverage

***

<a id="site-navigation" />

## Bonus: Site Navigation

Adding a dedicated navigation link makes it easy for customers to find eligible products without browsing your full catalog.

* Add an "HSA/FSA Eligible" link to your main navigation or as a top-level collection
* On Shopify, create a tagged collection (e.g. `hsa-fsa-eligible`) and link it from the nav **Suggested labels:**

```text theme={null}
HSA/FSA Eligible
Shop HSA/FSA
HSA/FSA Collection
```

<Note>
  For compliance-approved language and savings claim guidelines, see the [Brand & Messaging Hub](/merchant-success/marketing/brand-and-messaging-hub).
</Note>