BigCommerce Widget Install Guide

Add the Medpaid HSA/FSA Widget to Product Pages (all themes)

This page teaches three reliable ways to place the Medpaid widget directly under the Add to Cart button on BigCommerce product pages—so shoppers see HSA/FSA options before checkout.

HTML block (Page Builder): fastest for a few products—no theme edits.
Script Manager: scale to many PDPs, add SKU targeting, easy rollback.
Theme code edit: pixel-perfect placement and custom-field gating (Stencil or headless).

Option A — Add via Page Builder (HTML block)

Fast demo on a few products (no theme edits)

Storefront → Customize (Page Builder) → open a product page.
Drag an HTML block under the Add to Cart area (or another prominent area nearby).
Paste the snippet below → Save/Publish.

<div class="mp-widget" style="margin-top:12px">
  <div class="mp-left">
    <span class="mp-icon" aria-hidden="true">i</span>
    <p class="mp-body"><strong>HSA | FSA Accepted.</strong> Save up to 40%.
      <a href="#" class="mp-link" id="mp-open"><strong>Learn more.</strong></a>
    </p>
  </div>
  <div class="mp-right">
    <img src="https://storage.googleapis.com/msgsndr/pXh31D2NTWV1zwyxqZNQ/media/68e0264e6fa5cabe2ac3dc94.png" alt="Powered by Medpaid" class="mp-badge-img"/>
  </div>
</div>

<div id="mp-modal" class="mp-modal" aria-hidden="true" role="dialog" aria-labelledby="mp-modal-title">
  <div class="mp-backdrop" data-close="true"></div>
  <div class="mp-card" role="document" tabindex="-1">
    <button class="mp-close" type="button" aria-label="Close" data-close="true">×</button>
    <h2 id="mp-modal-title" class="mp-h1">HSA | FSA Payment Options</h2>
    <p class="mp-lead"><strong>Take a quick medical assessment to receive a Letter of Medical Necessity (LMN).</strong></p>
    <p class="mp-sub">An LMN qualifies your purchase for HSA/FSA card payment or reimbursement. <a class="mp-inline-link" href="https://medpaid.com/pages/how-to-pay-with-hsa-fsa" target="_blank" rel="noopener">Learn more</a></p>
    <div class="mp-steps">
      <div class="mp-step"><div class="mp-step-num">1</div><div class="mp-step-text"><strong>Add eligible product to cart</strong></div></div>
      <div class="mp-step"><div class="mp-step-num">2</div><div class="mp-step-text"><strong>Choose “Pay with HSA/FSA” in cart</strong></div></div>
      <div class="mp-step"><div class="mp-step-num">3</div><div class="mp-step-text"><strong>Take Health Assessment to qualify</strong></div></div>
      <div class="mp-step"><div class="mp-step-num">4</div><div class="mp-step-text"><strong>Pay with HSA/FSA card & receive your LMN</strong></div></div>
    </div>
  </div>
</div>

Option B — Script Manager (all themes)

Scale to many PDPs without theme edits

Why choose this: centralized control, easy rollback, works across most themes. Use for broad rollouts or tests. If placement is a few pixels off on a custom theme, tweak the selector list.

Storefront → Script Manager → Create Script.
Placement: Footer · Location: Storefront pages · Category: Functional · Type: Script.
Paste one of the snippets below.

B1 — Inject on all product pages (under Add to Cart)

B2 — Inject only for specific SKUs (edit list)

/* reuse of B1 injector (anchor list + widget) */
  var ATC_ANCHORS=['.form--addToCart [data-button-type="add-cart"]','.form--addToCart .form-action','.form--addToCart','.productView-actions','.productView .add-to-cart','form[action*="/cart.php"] [type="submit"]','form[action*="/cart.php"]','button[name="add"]','.productView'];
  function findAnchor(){for(var i=0;i<ATC_ANCHORS.length;i++){var n=document.querySelector(ATC_ANCHORS[i]);if(n) return n} return null;}
  var widgetHTML='<div class="mp-widget" style="margin-top:12px"><div class="mp-left"><span class="mp-icon" aria-hidden="true">i</span><p class="mp-body"><strong>HSA | FSA Accepted.</strong> Save up to 40%. <a href="#" class="mp-link" id="mp-open"><strong>Learn more.</strong></a></p></div><div class="mp-right"><img src="https://storage.googleapis.com/msgsndr/pXh31D2NTWV1zwyxqZNQ/media/68e0264e6fa5cabe2ac3dc94.png" alt="Powered by Medpaid" class="mp-badge-img"/></div></div><div id="mp-modal" class="mp-modal" aria-hidden="true" role="dialog" aria-labelledby="mp-modal-title"><div class="mp-backdrop" data-close="true"></div><div class="mp-card" role="document" tabindex="-1"><button class="mp-close" type="button" aria-label="Close" data-close="true">×</button><h2 id="mp-modal-title" class="mp-h1">HSA | FSA Payment Options</h2><p class="mp-lead"><strong>Take a quick medical assessment to receive a Letter of Medical Necessity (LMN).</strong></p><p class="mp-sub">An LMN qualifies your purchase for HSA/FSA card payment or reimbursement. <a class="mp-inline-link" href="https://medpaid.com/pages/how-to-pay-with-hsa-fsa" target="_blank" rel="noopener">Learn more</a></p><div class="mp-steps"><div class="mp-step"><div class="mp-step-num">1</div><div class="mp-step-text"><strong>Add eligible product to cart</strong></div></div><div class="mp-step"><div class="mp-step-num">2</div><div class="mp-step-text"><strong>Choose “Pay with HSA/FSA” in cart</strong></div></div><div class="mp-step"><div class="mp-step-num">3</div><div class="mp-step-text"><strong>Take Health Assessment to qualify</strong></div></div><div class="mp-step"><div class="mp-step-num">4</div><div class="mp-step-text"><strong>Pay with HSA/FSA card & receive your LMN</strong></div></div></div></div></div><style>.mp-widget{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px 14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.35}.mp-left{display:flex;align-items:center;gap:8px;flex:1}.mp-icon{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#374151;border:1.5px solid #374151;font-weight:700;font-size:12px}.mp-body{margin:0;font-size:14px;color:#0f172a}.mp-link{color:#0f172a;text-decoration:underline;cursor:pointer}.mp-right .mp-badge-img{height:18px}.mp-modal[aria-hidden=true]{display:none}.mp-modal{position:fixed;inset:0;z-index:2147483647}.mp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55)}.mp-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:24px 20px;width:90%;max-width:560px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-height:calc(100vh - 60px);overflow-y:auto}.mp-h1{text-align:center;font-size:24px;font-weight:700;margin-bottom:10px}.mp-lead,.mp-sub{text-align:center;font-size:14px;color:#111827;margin:0 0 8px}.mp-steps{margin-top:18px;background:#f9f9fb;border:1px solid #e5e7eb;border-radius:14px;display:flex;flex-direction:column;gap:10px;padding:14px}.mp-step{display:flex;align-items:center;gap:10px}.mp-step-num{width:28px;height:28px;border-radius:50%;background:#776594;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.mp-step-text{font-size:14px}.mp-close{position:absolute;top:14px;right:14px;font-size:22px;border:none;background:transparent;cursor:pointer}</style>';
  function inject(a){ if(document.getElementById('mp-modal')) return; var w=document.createElement('div'); w.className='mp-widget-wrap'; w.innerHTML=widgetHTML; var row=a.closest && a.closest('.form-action'); (row||a).parentNode.insertBefore(w,(row||a).nextSibling);
    var m=w.querySelector('#mp-modal'); if(m && m.parentElement!==document.body) document.body.appendChild(m);
    var btn=w.querySelector('#mp-open'); function open(e){e.preventDefault();m.setAttribute('aria-hidden','false');document.body.classList.add('mp-modal-open')} function close(){m.setAttribute('aria-hidden','true');document.body.classList.remove('mp-modal-open')}
    btn && btn.addEventListener('click',open); m && m.addEventListener('click',e=>{ if(e.target.matches('[data-close], .mp-backdrop')) close(); }); document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&m.getAttribute('aria-hidden')==='false') close(); });
  }
  function start(){ var a=findAnchor(); if(a) inject(a); }
  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',start); else start();
  new MutationObserver(start).observe(document.documentElement,{subtree:true,childList:true,characterData:true});
})();</script>

Option C — Edit theme code (Stencil & headless)

Maximum control & the most robust long-term install

Why choose this: rock-solid placement, fastest runtime, and easy product-level gating via custom fields. Ideal when you maintain a dev pipeline (Stencil CLI) or a custom/headless storefront.

C1 — Stencil themes

Storefront → Themes → Advanced → Download Current Theme.
Install Stencil CLI locally → run stencil start.
Create partial: templates/components/medpaid/widget.html → paste widget HTML.
Include near Add to Cart in templates/components/products/product-view.html (or page-level): {{> components/medpaid/widget}}
(Optional) Gate by custom field on products: {{#each product.custom_fields}} {{#if (and (eq name "medpaid_eligible") (eq value "true"))}} {{> components/medpaid/widget}} {{/if}} {{/each}}
stencil bundle → upload ZIP → Apply.

C2 — Non-Stencil / Headless

Make a reusable component (React/Vue/etc.) with the widget HTML/CSS.
Render it directly below your PDP’s Add to Cart component.
Show conditionally:
- By SKU allowlist (read from PDP data), or
- By CMS flag, e.g. medpaidEligible: true.

Recommended: keep the modal root mounted in <body> for z-index & focus control.

Widget partial — copy source

<div class="mp-widget" style="margin-top:12px">
  <div class="mp-left">
    <span class="mp-icon" aria-hidden="true">i</span>
    <p class="mp-body"><strong>HSA | FSA Accepted.</strong> Save up to 40%.
      <a href="#" class="mp-link" id="mp-open"><strong>Learn more.</strong></a></p>
  </div>
  <div class="mp-right">
    <img src="https://storage.googleapis.com/msgsndr/pXh31D2NTWV1zwyxqZNQ/media/68e0264e6fa5cabe2ac3dc94.png" alt="Powered by Medpaid" class="mp-badge-img"/>
  </div>
</div>

Back to Merchant Resources

Add the Medpaid HSA/FSA Widget to Product Pages (all themes)

Option A — Add via Page Builder (HTML block)

Option B — Script Manager (all themes)

Option C — Edit theme code (Stencil & headless)

C1 — Stencil themes

C2 — Non-Stencil / Headless

Widget partial — copy source

Customer Service

Get in Touch

Quick Links

Information

Account

Disclaimer

Your cart

Energy Support

Stress Support

Sleep Support

Brain Support

Nutritional Support

Men's Support

Joint Support

Gut Support

Immune Support

Heart Support

Eye Support

Women's Support

Add the Medpaid HSA/FSA Widget to Product Pages (all themes)

Option A — Add via Page Builder (HTML block)

Option B — Script Manager (all themes)

Option C — Edit theme code (Stencil & headless)

C1 — Stencil themes

C2 — Non-Stencil / Headless

Widget partial — copy source

Customer Service

Get in Touch

Your cart (0)

Energy Support

Stress Support

Sleep Support

Brain Support

Nutritional Support

Men's Support

Joint Support

Gut Support

Immune Support

Heart Support

Eye Support

Women's Support

Product Comparison

Your cart