Platform SetupShopify

Product page widget

The product page (PDP) widget is the highest-impact promotion you can add. It tells customers a product may qualify for HSA/FSA spending at the moment they’re deciding whether to buy.

PDP widget example on a product page

Install it after you’ve activated the payment app. See the setup guide if you haven’t done that yet.

Installation

  1. Get your Public Qualification ID. In the Truemed dashboard, click My Account in the top right, select Settings, and open the Public ID tab to view and copy it
  2. In Shopify, go to Online Store > Themes > Customize
  3. Open your product page template
  4. Add a Custom Liquid block where you want the widget, typically near the price or the “Add to Cart” button
  5. Paste the following, replacing YOUR_PUBLIC_QUALIFICATION_ID:
1<div id="truemed-instructions" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
2<script src="https://static.truemed.com/widgets/product-page-widget.min.js" defer></script>

The Truemed payment app works with all Shopify themes, and changing your theme will not affect the payment integration. If you switch themes, you may need to re-add this widget to your new template.

Dark mode

For pages with dark backgrounds, add the dark-mode attribute:

1<div dark-mode id="truemed-instructions" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
2<script src="https://static.truemed.com/widgets/product-page-widget.min.js" defer></script>

Show the widget only on eligible products

Use Shopify product tags to control where the widget appears:

  • Tag products as truemed-eligible and add shopify-tags="display-if-eligible" to the div
  • Or tag ineligible products as truemed-ineligible and add shopify-tags="display-unless-ineligible"
1<div shopify-tags="display-if-eligible" id="truemed-instructions" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
2<script src="https://static.truemed.com/widgets/product-page-widget.min.js" defer></script>

Tags are yours to maintain, so they can drift from the eligibility Truemed assigns. Check the Products tab of your Truemed dashboard for the current status of any product. See Eligibility for how categories are determined.

Style customizations

Where you put the CSS determines whether it needs <style> tags around it.

Where<style> tags
Online Store > Themes > Customize > Custom CSS (recommended)Not needed. Paste the rules on their own.
Your theme’s .css fileNot needed.
The same Custom Liquid block as the widget, or theme.liquidRequired. That context is HTML, so the rules need <style>…</style> around them.

Putting the CSS in the same Custom Liquid block as the widget keeps everything together:

1<div id="truemed-instructions" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
2<script src="https://static.truemed.com/widgets/product-page-widget.min.js" defer></script>
3
4<style>
5  .truemed-entry-text,
6  .truemed-entry-link {
7    font-size: 14px !important;
8  }
9</style>

Setting font-size or color in the div’s style attribute has no effect on the widget. It renders its own elements with their own font size and color, which win over anything inherited from the containing div. Older versions of this snippet included style="font-size: 14px;" — it was doing nothing, and it’s safe to remove. Use the CSS overrides below instead.

Text size

Target the two text elements directly. !important is required, because the widget ships its own stylesheet.

1.truemed-entry-text,
2.truemed-entry-link {
3  font-size: 14px !important;
4}

.truemed-entry-text covers “HSA/FSA eligible” and “Save an average of 30%”. .truemed-entry-link is the “Learn more” button.

To scale the logo alongside the text, use the icon-height attribute on the div. That one does work, since the widget reads it directly:

1<div id="truemed-instructions" icon-height="14" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>

Font family, weight, and style

The widget loads and applies Inter, so your theme’s font is not picked up automatically. Use inherit to adopt whatever font surrounds the widget:

1.truemed-entry-box,
2.truemed-entry-box * {
3  font-family: inherit !important;
4}

Or name a font and set weight or style at the same time:

1.truemed-entry-box,
2.truemed-entry-box * {
3  font-family: 'Your Theme Font', sans-serif !important;
4  font-style: normal !important;
5}

Weights are set per element, so override them individually:

ElementDefaultSelector
”HSA/FSA eligible”700.truemed-entry-text-bold
”Learn more” link600.truemed-entry-link

These rules style the line on your product page. The modal that opens when a customer clicks “Learn more” uses Truemed’s own typography and is not affected.

Colors and spacing

CustomizationCSS
Change “Learn more” link color.truemed-instructions-open { color: #7a7a7a !important; }
Change body text color.truemed-entry-text { color: #7a7a7a !important; }
Remove the link underline.truemed-entry-link { text-decoration-line: none !important; }
Adjust the gap between elements.truemed-entry-box { gap: 4px !important; }
Add spacing above/belowAdd margin-top or margin-bottom to the div’s style attribute