Onsite messaging using Custom Code

Merchants using custom themes can integrate the Gale HSA/FSA widget manually using the snippets below. Choose the version that best fits your store’s design and copy it into your product template (like product.liquid or main-product.liquid).

Steps to add Widgets using Custom Code

Step 1

In Shopify Admin, go to Online Store > Go to Activated Theme and Click Edit Code.

Step 2

From Sidebar choose approproate file _(e.g product.liquid / product_details.liquid) _and open it.

Step 3

Copy any of following code snippets according to your preferences and paste code anywhere in file.

HSA/FSA Eligible (Text)

{% comment %} Gale HSA/FSA Widget {% endcomment %}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Gale Widget -->
<div id="gale-widget-eligible" class="gale-widget"
  style="
    display: flex;
    align-items: flex-start; /* icon stays top-aligned */
    flex-wrap: nowrap;
   
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    color: #000;
    background-color: transparent;
    line-height: 1.4;
  ">

  <!-- ✅ Left column: Check icon (always top aligned) -->
  <div style="flex-shrink: 0; margin-top: 3px; margin-right: 6px;">
    <img 
      src="https://cdn.withgale.com/osm_check_icon.png" 
      alt="Check Icon" 
      width="auto" height="auto"
      style="width: 19px; height: 19px;">
  </div>

  <!-- ✅ Right column: Text + Learn More -->
  <div style="display: flex; flex-direction: column; flex: 1;">

    <!-- Outer inline container for responsive wrapping -->
    <div style="
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      column-gap: 3px;
      row-gap: 4px;
    ">
      <!-- Line 1: Eligibility text -->
     <div class="gale-dynamic-text" style="font-weight: 500; white-space: nowrap;">
  {%- assign first_variant = product.selected_or_first_available_variant -%}
  {%- assign type = first_variant.metafields.gale_payments.gale_product_type -%}

  {%- if type == "medical_mcc" -%}
    HSA/FSA Accepted.
  {%- elsif type == "dual_purpose" -%}
    HSA/FSA Eligible for qualified customers.
  {%- else -%}
    HSA/FSA Eligible.
  {%- endif -%}
</div>

      <!-- Line 2 (inline if space, otherwise wraps under text) -->
      <a href="#" class="gale-learn-more"
        style="
          text-decoration: underline;
          font-size: 16px;
          color: #000;
          font-weight: 500;
          white-space: nowrap;
        "
      >
        Learn more
      </a>
    </div>
  </div>
</div>




<!-- Modal -->
<div id="with-gale-modal" class="gale-modal"
  style="display:none; position:fixed !important; inset:0 !important; width:100vw; height:100vh; background-color:rgba(0,0,0,0.5); z-index:2147483647 !important; justify-content:center; align-items:center; font-family:'Inter', Arial, sans-serif;">

  <div style="position:relative; background:#fff; width:90%; max-width:440px; height:90%; max-height:95vh; border-radius:12px; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,0.2); padding:24px;">

    <!-- Header -->
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:45px;">
      <img src="https://cdn.withgale.com/gale_logo_2.1.png" width="auto" height="auto" alt=" With Gale Logo" style="height:28px;">
      <button class="close-modal" style="background:none; border:none; cursor:pointer;">
        <img src="https://cdn.withgale.com/close_icon_2.1.png" width="20px" height="20px" alt="Close" style="width:20px; height:20px;">
      </button>
    </div>

    <!-- Headline -->
    <span style="font-size:25px; font-weight:550; color:#0F1112; line-height:1.3; margin:0;">
      Maximize your savings.<br>Pay with FSA &amp; HSA.
    </span>
    <p style="margin:8px 0 20px; color:#000000; font-size:15px;font-weight:500;">Here’s how to use your HSA/FSA funds.</p>


    <!-- Step 1 -->
    <div style="margin-bottom:28px;">
      <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px;border:1px solid #DFDCD7;">Step 1</span>
      <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px;  font-family: 'Inter', Arial, sans-serif !important;">Checkout as guest</h3>
      <div style="background:#F8F5Ef; border-radius:10px; padding:0px 25px 0px 25px; text-align:center;">
        <img src="https://cdn.withgale.com/modal_step1.png" width="auto" height="auto" alt="Step 1 - Guest Checkout" style="width:100%; height:auto; ">
      </div>
    </div>

    <!-- Step 2 -->
    <div style="margin-bottom:28px;">
      <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px;border:1px solid #DFDCD7;">Step 2</span>
      <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px;  font-family: 'Inter', Arial, sans-serif !important;">Select Gale at Checkout</h3>
      <div style="background:#F8F5Ef; border-radius:10px; padding:0px 25px; text-align:center;">
        <img src="https://cdn.withgale.com/modal_step2.png" width="auto" height="auto" alt="Step 2 - Gale Checkout" style="width:100%; height:auto; ">
      </div>
    </div>

    {%- assign first_variant = product.selected_or_first_available_variant -%}
{%- assign type = first_variant.metafields.gale_payments.gale_product_type -%}

{%- if type == "dual_purpose" -%}
  <!-- ✅ Conditional Step 3 for Dual-Purpose products -->
  <div style="margin-bottom:28px;">
    <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px; border:1px solid #DFDCD7;">Step 3</span>
    <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px; font-family:'Inter', Arial, sans-serif !important;">Complete a health assessment</h3>
    <div style="background:#F8F5Ef; border-radius:10px; padding:22px 25px; text-align:center;">
      <img src="https://cdn.withgale.com/osm_health_survey.png" width="auto" height="auto" alt="Step 3 - Health Assesment" style="width:100%; height:auto;">
    </div>
  </div>
{%- endif -%}

<!-- ✅ Step 3 (or Step 4 if dual-purpose) -->
<div style="margin-bottom:32px;">
  <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px; border:1px solid #DFDCD7;">
    {%- if type == "dual_purpose" -%}
      Step 4
    {%- else -%}
      Step 3
    {%- endif -%}
  </span>
  <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px; font-family:'Inter', Arial, sans-serif !important;">Pay with HSA/FSA or credit card</h3>
  <div style="background:#F8F5Ef; border-radius:10px; padding:12px 25px; text-align:center;">
    <img src="https://cdn.withgale.com/modal_step3.png" width="auto" height="auto" alt="Step 3 - Pay" style="width:100%; height:auto;">
  </div>
</div>

<hr style="margin:15px;"/>
    <!-- CTA Button -->
    <button class="close-modal"
      style="width:100%; background:#000; color:#fff; font-weight:700; font-size:16px; border:none; border-radius:8px; padding:14px 0; cursor:pointer;">
      Close
    </button>

   
  </div>
</div>

<!-- JavaScript -->


<script>
  document.addEventListener("DOMContentLoaded", () => {
    const modal = document.getElementById("with-gale-modal");
    if (modal && modal.parentNode !== document.body) {
      document.body.appendChild(modal); // 👈 move it back to body
    }
  });
</script>


<script>
  document.addEventListener("DOMContentLoaded", () => {
    if (window.Shopify && window.Shopify.country !== "US") {
      console.log("Country :",window?.Shopify?.country)
      const galeWidget = document.getElementById("gale-widget-eligible");
      if (galeWidget) {
        galeWidget.style.display = "none";
      }
      return; // ⛔ Stop script if not US visitor
    }



    function updateGaleWidget(variant) {
      if (!variant) return;

      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      const productType = variant.metafields?.gale_product_type || "";
      console.log(`Eligibility:`, eligibilityMetafield, `Type:`, productType);

      // Show or hide the widget based on eligibility value
      var galeWidget = document.getElementById("gale-widget-eligible");


      if (galeWidget) {
        galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
      }

      // ✅ NEW: Track eligible variants locally for cart page use
      try {
        let eligibleList = JSON.parse(localStorage.getItem("galeEligibleVariants") || "[]");

        // Remove if exists
        eligibleList = eligibleList.filter(item => item.id !== variant.id);

        // Add back only if eligible
        if (eligibilityMetafield === "1") {
          eligibleList.push({
            id: variant.id,
            type: productType
          });
        }

        localStorage.setItem("galeEligibleVariants", JSON.stringify(eligibleList));
        console.log("🧩 Updated Gale eligible variants:", eligibleList);
      } catch (err) {
        console.error("Failed to update galeEligibleVariants:", err);
      }

      
    }


    var productVariants = [
      {%- for variant in product.variants -%}
        {
          "id": {{ variant.id | json }},
          "title": {{ variant.title | json }},
          "barcode": {{ variant.barcode | json }},
          "metafields": {
            "gale_eligibility": {{ variant.metafields.gale_payments.gale_eligibility | json }},
            "gale_product_id": {{ variant.metafields.gale_payments.gale_product_id | json }},
            "gale_product_type": {{ variant.metafields.gale_payments.gale_product_type | json }}
            
          }
        }
        {% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ];


    var selectedVariant = {{ product.selected_or_first_available_variant.id | json }};
    var initialVariant = productVariants.find(v => v.id == selectedVariant);
    updateGaleWidget(initialVariant);

setTimeout(() => {
  const lensButton = document.querySelector('lensadvizor-btn');
  const isVisible = lensButton && lensButton.offsetParent !== null;

  if (isVisible) {
    const galeWidget = document.getElementById("gale-widget-eligible");
    if (galeWidget) {
      galeWidget.style.display = "flex";
    }
  }
}, 500);

    // ✅ Listen for variant selection changes
    document.addEventListener("change", (event) => {
      if (event.target.matches("select[name='id'], input[name='id']")) {
        const selectedVariantId = event.target.value;
        const newVariant = productVariants.find(v => v.id == selectedVariantId);

        if (newVariant) {
          updateGaleWidget(newVariant);
          
        }
      }
    });

    // ✅ Modal Functionality
    document.querySelectorAll(".gale-learn-more").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("with-gale-modal").style.display = "flex";
      });
    });

    document.querySelectorAll(".close-modal").forEach(btn => {
      btn.addEventListener("click", () => {
        document.getElementById("with-gale-modal").style.display = "none";
      });
    });

    document.getElementById("with-gale-modal").addEventListener("click", (event) => {
      if (event.target === document.getElementById("with-gale-modal")) {
        document.getElementById("with-gale-modal").style.display = "none";
      }
    });

    // Move modal to body to prevent theme restrictions
    const modal = document.getElementById("with-gale-modal");
    if (modal) {
      document.body.appendChild(modal);
    }
  });
</script>

HSA/FSA Eligible (Icon)

{% comment %} Gale HSA/FSA Widget {% endcomment %}

<!-- Gale Widget -->
<div id="gale-osm-widget-icon" class="gale-widget"
style="
display: flex;
align-items: flex-start; /* icon top-aligned with first line */
flex-wrap: nowrap;
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;
color: #000;
background-color: transparent;
line-height: 1.4;
">

<!-- ✅ Left column: Check icon -->
<div style="flex-shrink: 0; margin-top: 3px; margin-right: 6px;">
<img 
 src="https://cdn.withgale.com/osm_check_icon.png" 
 alt="Check Icon" 
 width="auto"
 height="auto"
 style="width: 19px; height: 19px;">
</div>

<!-- ✅ Right column: Eligibility + Pay with Gale -->
<div style="display: flex; flex-direction: column; flex: 1;">

<!-- ✅ Inline container with baseline alignment -->
<div style="
 display: flex;
 flex-wrap: wrap;
 align-items: baseline; /* key: keeps text and logo visually aligned */
 column-gap: 3px;
 row-gap: 4px;
">
 <!-- Line 1: Eligibility text -->
 <div style="font-weight: 500; white-space: nowrap;">
     {%- assign first_variant = product.selected_or_first_available_variant -%}
{%- assign type = first_variant.metafields.gale_payments.gale_product_type -%}

{%- if type == "medical_mcc" -%}
HSA/FSA Accepted.
{%- elsif type == "dual_purpose" -%}
HSA/FSA Eligible for qualified customers.
{%- else -%}
HSA/FSA Eligible.
{%- endif -%}
 </div>

 <!-- Line 2: Pay with Gale -->
 <div style="
   display: inline-flex;
   align-items: center; /* ensures same line alignment with text */
   gap: 6px;
   white-space: nowrap;
 ">
   <span style="font-weight: 500;">Pay with</span>
   <img 
     src="https://cdn.withgale.com/osm_badge_2.1.png" 
     alt="Gale Badge" 
     width="auto"
     height="auto"
     style="height: 22px; width: auto; vertical-align: middle; transform: translateY(0px);">
   <img 
     src="https://cdn.withgale.com/osm_info_icon_2.1.png" 
     alt="Info Icon" 
     width="auto"
     height="auto"
     class="gale-info-icon-v"
     style="width: 16px; height: 16px; cursor: pointer; vertical-align: middle;">
 </div>
</div>
</div>
</div>


<!-- Modal -->
<div id="with-gale-modal-icon-variant" class="gale-modal"
style="display:none; position:fixed; inset:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.5); z-index:99999; justify-content:center; align-items:center; font-family:'Inter', Arial, sans-serif;">

<div style="position:relative; background:#fff; width:90%; max-width:440px; height:90%; max-height:95vh; border-radius:12px; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,0.2); padding:24px;">

<!-- Header -->
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:45px;">
 <img src="https://cdn.withgale.com/gale_logo_2.1.png" width="auto" height="auto" alt=" With Gale Logo" style="height:28px;">
 <button class="close-modal" style="background:none; border:none; cursor:pointer;">
   <img src="https://cdn.withgale.com/close_icon_2.1.png" width="auto" height="auto" alt="Close" style="width:20px; height:20px;">
 </button>
</div>

<!-- Headline -->
<span style="font-size:25px; font-weight:550; color:#0F1112; line-height:1.3; margin:0;">
 Maximize your savings.<br>Pay with FSA &amp; HSA.
</span>
<p style="margin:8px 0 20px; color:#000000; font-size:15px;font-weight:500;">Here’s how to use your HSA/FSA funds.</p>


<!-- Step 1 -->
<div style="margin-bottom:28px;">
 <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px;border:1px solid #DFDCD7;">Step 1</span>
 <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px;  font-family: 'Inter', Arial, sans-serif !important;">Checkout as guest</h3>
 <div style="background:#F8F5Ef; border-radius:10px; padding:25px 25px 15px 25px; text-align:center;">
   <img src="https://cdn.withgale.com/modal_step1.png" width="auto" height="auto" alt="Step 1 - Guest Checkout" style="width:100%; height:auto; ">
 </div>
</div>

<!-- Step 2 -->
<div style="margin-bottom:28px;">
 <span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px;border:1px solid #DFDCD7;">Step 2</span>
 <h3 style="font-size:22px; font-weight:400; margin:4px 0 10px;  font-family: 'Inter', Arial, sans-serif !important;">Select Gale at Checkout</h3>
 <div style="background:#F8F5Ef; border-radius:10px; padding:25px 25px; text-align:center;">
   <img src="https://cdn.withgale.com/modal_step2.png" height="auto" width="auto" alt="Step 2 - Gale Checkout" style="width:100%; height:auto; ">
 </div>
</div>

{%- assign first_variant = product.selected_or_first_available_variant -%}
{%- assign type = first_variant.metafields.gale_payments.gale_product_type -%}

{%- if type == "dual_purpose" -%}
<!-- ✅ Conditional Step 3 for Dual-Purpose products -->
<div style="margin-bottom:28px;">
<span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px; border:1px solid #DFDCD7;">Step 3</span>
<h3 style="font-size:22px; font-weight:400; margin:4px 0 10px; font-family:'Inter', Arial, sans-serif !important;">Complete a health assessment</h3>
<div style="background:#F8F5Ef; border-radius:10px; padding:22px 25px; text-align:center;">
 <img src="https://cdn.withgale.com/osm_health_survey.png" width="auto" height="auto" alt="Step 3 - Health Assesment" style="width:100%; height:auto;">
</div>
</div>
{%- endif -%}

<!-- ✅ Step 3 (or Step 4 if dual-purpose) -->
<div style="margin-bottom:32px;">
<span style="display:inline-block; background:#F8F5Ef; border-radius:20px; padding:3px 13px; font-size:12px; font-weight:500; color:#000000; margin-bottom:8px; border:1px solid #DFDCD7;">
{%- if type == "dual_purpose" -%}
 Step 4
{%- else -%}
 Step 3
{%- endif -%}
</span>
<h3 style="font-size:22px; font-weight:400; margin:4px 0 10px; font-family:'Inter', Arial, sans-serif !important;">Pay with HSA/FSA or credit card</h3>
<div style="background:#F8F5Ef; border-radius:10px; padding:25px; text-align:center;">
<img src="https://cdn.withgale.com/modal_step3.png" width="auto" height="auto" alt="Step 3 - Pay" style="width:100%; height:auto;">
</div>
</div>

<hr style="margin:15px;"/>
<!-- CTA Button -->
<button class="close-modal"
 style="width:100%; background:#000; color:#fff; font-weight:700; font-size:16px; border:none; border-radius:8px; padding:14px 0; cursor:pointer;">
 Close
</button>


</div>
</div>



<!-- JavaScript -->


<script>
document.addEventListener("DOMContentLoaded", () => {
const modal = document.getElementById("with-gale-modal-icon-variant");
if (modal && modal.parentNode !== document.body) {
 document.body.appendChild(modal); // 👈 move it back to body
}
});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
if (window.Shopify && window.Shopify.country !== "US") {
 console.log("Country :",window?.Shopify?.country)
 const galeWidget = document.getElementById("gale-osm-widget-icon");
 if (galeWidget) {
   galeWidget.style.display = "none";
 }
 return; // ⛔ Stop script if not US visitor
}



function updateGaleWidget(variant) {
 if (!variant) return;

 const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
 const productType = variant.metafields?.gale_product_type || "";
 console.log(`M:`, eligibilityMetafield);

 // Show or hide the widget based on eligibility value
 var galeWidget = document.getElementById("gale-osm-widget-icon");
 if (galeWidget) {
   galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
 }

 // ✅ NEW: Track eligible variants locally for cart page use
 try {
   let eligibleList = JSON.parse(localStorage.getItem("galeEligibleVariants") || "[]");

   // Remove if exists
   eligibleList = eligibleList.filter(item => item.id !== variant.id);

   // Add back only if eligible
   if (eligibilityMetafield === "1") {
     eligibleList.push({
       id: variant.id,
       type: productType
     });
   }

   localStorage.setItem("galeEligibleVariants", JSON.stringify(eligibleList));
   console.log("🧩 Updated Gale eligible variants:", eligibleList);
 } catch (err) {
   console.error("Failed to update galeEligibleVariants:", err);
 }

 
}


var productVariants = [
 {%- for variant in product.variants -%}
   {
     "id": {{ variant.id | json }},
     "title": {{ variant.title | json }},
     "barcode": {{ variant.barcode | json }},
     "metafields": {
       "gale_eligibility": {{ variant.metafields.gale_payments.gale_eligibility | json }},
       "gale_product_id": {{ variant.metafields.gale_payments.gale_product_id | json }},
       "gale_product_type": {{ variant.metafields.gale_payments.gale_product_type | json }}
     }
   }
   {% unless forloop.last %},{% endunless %}
 {%- endfor -%}
];



// ✅ Initial setup (On Page Load)
var selectedVariant = {{ product.selected_or_first_available_variant.id | json }};
var initialVariant = productVariants.find(v => v.id == selectedVariant);
updateGaleWidget(initialVariant);


// ✅ Also show widget if Lensadvizor button is present
setTimeout(() => {
const lensButton = document.querySelector('lensadvizor-btn');
const isVisible = lensButton && lensButton.offsetParent !== null;

if (isVisible) {
const galeWidget = document.getElementById("gale-osm-widget-icon");
if (galeWidget) {
 galeWidget.style.display = "flex";
}
}
}, 500);



// ✅ Listen for variant selection changes
document.addEventListener("change", (event) => {
 if (event.target.matches("select[name='id'], input[name='id']")) {
   const selectedVariantId = event.target.value;
   const newVariant = productVariants.find(v => v.id == selectedVariantId);

   if (newVariant) {
     updateGaleWidget(newVariant);
     
   }
 }
});

// ✅ Modal Functionality
document.querySelectorAll(".gale-info-icon-v").forEach(icon => {
 icon.addEventListener("click", () => {
   document.getElementById("with-gale-modal-icon-variant").style.display = "flex";
 });
});

document.querySelectorAll(".close-modal").forEach(btn => {
 btn.addEventListener("click", () => {
   document.getElementById("with-gale-modal-icon-variant").style.display = "none";
 });
});

document.getElementById("with-gale-modal-icon-variant").addEventListener("click", (event) => {
 if (event.target === document.getElementById("with-gale-modal-icon-variant")) {
   document.getElementById("with-gale-modal-icon-variant").style.display = "none";
 }
});

// Move modal to body to prevent theme restrictions
const modal = document.getElementById("with-gale-modal-icon-variant");
if (modal) {
 document.body.appendChild(modal);
}
});
</script>

Once code is added save your code and publish. You should be able to see HSA/FSA ELigibility messaging on ELigible Product Pages.

Disclaimer

We strongly recommend that you take a full backup of your theme before implementing any custom code.
These snippets are intended for use by developers or technically experienced users.
Always test changes in a duplicate or unpublished theme before going live.

Get Started

Integration

Promotional Resources

Onsite messaging using Custom Code

Steps to add Widgets using Custom Code

Disclaimer

Get Started

Integration

Promotional Resources

​Steps to add Widgets using Custom Code

​ Disclaimer

Steps to add Widgets using Custom Code

Disclaimer