Medpaid

Shopify Merchants: Add the Medpaid HSA/FSA Widget to Your Product Pages

Placing clear HSA/FSA payment instructions directly on the product page is the most effective way to boost conversions and help shoppers realize they can use pre-tax dollars. Showing HSA/FSA card or reimbursement options before checkout meaningfully increases purchase completion.

This guide adds the Medpaid widget via the product page template using a Custom Liquid block—no theme file editing required.

Step 1. Set Metafield Definition

Medpaid flags eligible products via a boolean metafield. When it’s True, your theme can automatically apply widgets and/or badges to products based on eligiblity.

Watch: Configure the Medpaid metafield & widget

1

Prerequisites

  1. Install the Medpaid app from the Shopify App Store and connect your account.
  2. Then push your products you want approved to the Medpaid back office through the Medpaid app. Approved items will be marked in your store with the HSA/FSA badge once display settings are live in your theme code.
Installing the app automatically creates an unstructured product metafield that we’ll update into a proper structured definition.
2

Update the Medpaid metafield into a structured definition

  1. In Shopify admin go to Settings → Metafields and Metaobjects → Products → View unstructured metafields.
  2. Find the metafield named Medpaid or contains medpaid.isHsaApproved and click "add definition."
    Then set:
    • Name: Medpaid HSA/FSA
    • Namespace & key (if missing): (copy below)
    • Type: True or false (One)
  3. Under Options, toggle ON:
    • ✅ Use as a condition in smart collections
    • ✅ Storefront API access
  4. Click Save and confirm to Publish. This updates it from unstructured to the main Product metafield definitions.
  5. Go back to Settings → Metafields and Metaobjects → Products, refresh, and verify the definition appears.

Namespace & key

If you don’t see the definition under unstructured metafields, the definition may not exist yet and needs to be set up. Check Settings → Metafields and Metaobjects → Products → Unstructured product metafields. If it’s not listed, click Add definition under Metafields → Products, enter the fields above exactly, and Save.
3

Verify your metafield settings (screenshot)

Your settings should match the example below: boolean True/False type, and both Storefront API access and Use as a condition in smart collections enabled.

Shopify metafield definition settings showing boolean True/False with Storefront API and Smart collection toggles enabled.

Step 2. Install the Medpaid widget on your product pages

Follow these short steps to add the HSA/FSA eligibility widget to your Shopify product pages.

  1. 1
    Add the Medpaid widget with a Custom Liquid block
    In Online Store → Themes → Customize, open your product template, add a Custom liquid block beneath the Add to cart block, then paste one of the scripts below and save.

    Reimbursement Style Widget

    Pay with HSA/FSA Style Widget

  2. 2
    Test and verify
    Eligible

    On a product with medpaid.isHsaApproved true, the banner shows under Add to cart and the modal opens.

    Ineligible

    On a product without that metafield set to true, the banner and modal are not rendered.

    QA

    Check both mobile and desktop. Ensure the modal overlays content and scrolling is smooth.

Back to Merchant Resources

Customer Service

Mon-Sat, 10am-4pm MST

Get in Touch

support@medpaid.com

1575 S River Rd, St. George, UT 84790

Home Cart Products
PP-DEBUG: Current path: /pages/shopify-merchants-add-the-medpaid-hsa-fsa-widget-to-your-product-pages-no-code-editor