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

{% raw %}
<!-- Gale HSA/FSA Widget - Version 1 -->

<!-- Gale Widget -->
<div id="gale-widget-1" class="gale-widget" style="display: flex; align-items: center; padding: 0px; background-color: transparent; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  <div style="margin-right: 10px; display: flex; align-items: center;">
    <img src="{{ 'gale_check_icon.png' | asset_img_url: '18x' }}" alt="Check Icon" style="width: 18px; height: auto;">
  </div>
  <div style="flex-grow: 1; font-size: 16px; font-weight: bold;">
   HSA & FSA Eligible.  <a href="#" class="info-icon1" style="text-decoration: underline; font-size: 16px;  margin-left: 1px; color:#000000;font-weight:500">learn more.</a>
  </div>
</div>

<!-- Modal -->
<div id="gale-modal-1" class="gale-modal" style="display: none; position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="position: relative !important; max-width: 530px; width: 90%; background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <button class="close-modal" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer;">
         <img src="{{ 'close_btn.png' | asset_img_url: '18x' }}" alt="Close" style="width: 18px; height: auto; margin-right: 8px;">
    </button>

    <div style="text-align: left;">
      <img src="{{ 'logo_new_modal.png' | asset_img_url: '80x' }}" alt="Gale Logo" style="width: 80px; margin-bottom: 12px;">
      <h2 style="margin: 0 0 10px; font-size: 26px; font-weight: bold;">Maximize your savings. <br/>Pay with HSA or FSA.</h2>

      <div style="margin-top: 15px;">
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon1.png' | asset_img_url: '40x' }}" alt="Step 1" style="width: 40px; margin-right: 12px;">
          <span style="font-size: 16px; font-weight: 600;">Add products to cart</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon2.png' | asset_img_url: '40x' }}" alt="Step 2" style="width: 40px; margin-right: 12px;">
          <span style="font-size: 16px; font-weight: 600;">Select "Gale HSA & FSA" at checkout</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px;">
          <img src="{{ 'gale_modal_list_icon3.png' | asset_img_url: '40x' }}" alt="Step 3" style="width: 40px; margin-right: 12px;">
          <span style="font-size: 16px; font-weight: 600;">Pay with HSA or FSA debit, or credit card</span>
        </div>
      </div>

      <button class="close-modal" style="background-color: #000; color: #fff; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; width: 100%; font-weight: bold; font-size: 17px; margin-top: 15px;">Close</button>
      <p style="font-size: 12px; text-align: center; margin-top: 10px;">Powered by <strong><a href="https://withgale.com" style="color:#0F1112;text-decoration:none;" target="_blank">Gale</a></strong></p>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    function updateGaleWidget(variant) {
      if (!variant) return;
      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      const widget = document.getElementById("gale-widget-1");
      if (widget) widget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
    }

    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 }}
          }
        }
        {% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ];

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

    document.addEventListener("change", (event) => {
      if (event.target.matches("select[name='id'], input[name='id']")) {
        const selectedId = event.target.value;
        const newVariant = productVariants.find(v => v.id == selectedId);
        if (newVariant) updateGaleWidget(newVariant);
      }
    });

    document.querySelectorAll(".info-icon1").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("gale-modal-1").style.display = "flex";
      });
    });

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

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

    const modal = document.getElementById("gale-modal-1");
    if (modal) document.body.appendChild(modal);
  });
</script>
{% endraw %}

Save upto 40% - Horizontal

{% raw %}
<!-- Gale HSA/FSA Widget - Version 2 -->

<!-- Gale Widget -->
<div id="gale-widget-2" class="gale-widget" style="display: flex; align-items: center; padding: 0px; background-color: transparent; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  <div style="font-size: 16px; font-weight: bold;">
    Save up to 40% with HSA or FSA. Pay with
  </div>
  <div>
    <img src="{{ 'gale_badge1.png' | asset_img_url: '60x' }}" style="margin-top:10px;margin-left:9px" alt="Gale Payment Badge">
  </div>
  <div style="display: flex; align-items: center; margin-left: 7px;">
    <a href="#" class="info-icon">
      <img src="{{ 'info_icon_new.png' | asset_img_url: '20x' }}" alt="Info Icon" style="width: 18px; height: auto; margin-top:10px;">
    </a>
  </div>
</div>

<!-- Modal -->
<div id="gale-modal-2" class="gale-modal" style="display: none; position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="position: relative !important; max-width: 530px; width: 90%; background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <button class="close-modal" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer;">
      <img src="{{ 'close_btn.png' | asset_img_url: '18x' }}" alt="Close Icon" style="width: 18px; height: auto;">
    </button>

    <div style="text-align: left;">
      <img src="{{ 'logo_new_modal.png' | asset_img_url: '80x' }}" alt="Gale Logo" style="width: 80px; margin-bottom: 12px;">
      <h2 style="margin: 0 0 10px; font-size: 26px; font-weight: bold;">Maximize your savings. <br/>Pay with HSA or FSA.</h2>

      <div style="margin-top: 15px;">
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon1.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Add products to cart</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon2.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Select "Gale HSA & FSA" at checkout</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px;">
          <img src="{{ 'gale_modal_list_icon3.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Pay with HSA or FSA debit, or credit card</span>
        </div>
      </div>

      <button class="close-modal" style="background-color: #000; color: #fff; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; width: 100%; font-weight: bold; font-size: 17px; margin-top: 15px;">Close</button>
      <p style="font-size: 12px; color: #0F1112; text-align: center; margin-top: 10px;">Powered by <strong><a style="color:#0F1112;text-decoration:none;" href="https://withgale.com" target="_blank">Gale</a></strong></p>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    function updateGaleWidget(variant) {
      if (!variant) return;

      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      var galeWidget = document.getElementById("gale-widget-2");
      if (galeWidget) {
        galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
      }
    }

    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 }}
          }
        }
        {% 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);

    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);
      }
    });

    document.querySelectorAll(".info-icon").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("gale-modal-2").style.display = "flex";
      });
    });

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

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

    const modal = document.getElementById("gale-modal-2");
    if (modal) {
      document.body.appendChild(modal);
    }
  });
</script>
{% endraw %}

Save upto 40% - Vertical

{% raw %}
<!-- Gale HSA/FSA Widget - Version 3 -->

<!-- Gale Widget -->
<div id="gale-widget-3" class="gale-widget" style="display: flex; align-items: center; padding: 0px; background-color: transparent; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  <div style="margin-right: 8px;">
    <img src="{{ 'gale_badge.png' | asset_img_url: '80x' }}" style="margin-top:12px;" alt="Gale Payment Badge" >
  </div>
  <div style="display: flex; flex-direction: column; align-items: flex-start; margin: 0;">
    <span style="font-size: 16px; font-weight: bold; line-height: 1.5;">Pay with HSA or FSA.</span>
    <span style="font-size: 14px; line-height: 1;">Save up to 40%. <a href="#" class="info-icon" style="text-decoration: underline; font-weight: 500;color:#000000">Learn more.</a></span>
  </div>
</div>

<!-- Modal -->
<div id="gale-modal-3" class="gale-modal" style="display: none; position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="position: relative !important; max-width: 530px; width: 90%; background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <button class="close-modal" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer;">
      <img src="{{ 'close_btn.png' | asset_img_url: '18x' }}" alt="Close Icon" style="width: 18px; height: auto;">
    </button>

    <div style="text-align: left;">
      <img src="{{ 'logo_new_modal.png' | asset_img_url: '80x' }}" alt="Gale Logo" style="width: 80px; margin-bottom: 12px;">
      <h2 style="margin: 0 0 10px; font-size: 26px; font-weight: bold;">Maximize your savings. <br/>Pay with HSA or FSA.</h2>

      <div style="margin-top: 15px;">
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon1.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Add products to cart</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon2.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Select "Gale HSA & FSA" at checkout</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px;">
          <img src="{{ 'gale_modal_list_icon3.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Pay with HSA or FSA debit, or credit card</span>
        </div>
      </div>

      <button class="close-modal" style="background-color: #000; color: #fff; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; width:100%; font-weight:bold; font-size:17px; margin-top: 15px;">Close</button>
      <p style="font-size: 12px; color: #0F1112; text-align: center; margin-top: 10px;">Powered by <strong><a style="color:#0F1112;text-decoration:none;" href="https://withgale.com" target="_blank">Gale</a></strong></p>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    function updateGaleWidget(variant) {
      if (!variant) return;

      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      var galeWidget = document.getElementById("gale-widget-3");
      if (galeWidget) {
        galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
      }
    }

    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 }}
          }
        }
        {% 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);

    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);
        }
      }
    });

    document.querySelectorAll(".info-icon").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("gale-modal-3").style.display = "flex";
      });
    });

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

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

    const modal = document.getElementById("gale-modal-3");
    if (modal) {
      document.body.appendChild(modal);
    }
  });
</script>
{% endraw %}

HSA & FSA Accepted

{% raw %}
<!-- Gale HSA/FSA Widget - Version 4 -->

<!-- Gale Widget -->
<div id="gale-widget-11" class="gale-widget" style="display: flex; align-items: center; padding: 0px; background-color: transparent; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  <div style="margin-right: 10px; display: flex; align-items: center;">
    <img src="{{ 'gale_check_icon.png' | asset_img_url: '18x' }}" alt="Check Icon" style="width: 18px; height: auto;">
  </div>
  <div style="flex-grow: 1; font-size: 16px; font-weight: bold;">
   HSA & FSA accepted  <a href="#" class="info-icon1" style="text-decoration: underline; font-size: 16px; margin-left: 1px; color:#000000;font-weight:500">learn more.</a>
  </div>
</div> 

<!-- Modal -->
<div id="gale-modal-11" class="gale-modal" style="display: none; position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="position: relative !important; max-width: 530px; width: 90%; background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <button class="close-modal" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer;">
      <img src="{{ 'close_btn.png' | asset_img_url: '18x' }}" alt="Check Icon" style="width: 18px; height: auto; margin-right: 8px;">
    </button>

    <div style="text-align: left;">
      <img src="{{ 'logo_new_modal.png' | asset_img_url: '80x' }}" alt="Gale Logo" style="width: 80px; margin-bottom: 12px;">
      <h2 style="margin: 0 0 10px; font-size: 26px; font-weight: bold;">Maximize your savings. <br/>Pay with HSA or FSA.</h2>

      <!-- Steps -->
      <div style="margin-top: 15px;">
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon1.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Add products to cart</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon2.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Select "Gale HSA & FSA" at checkout</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px;">
          <img src="{{ 'gale_modal_list_icon3.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Pay with HSA or FSA debit, or credit card</span>
        </div>
      </div>

      <button class="close-modal" style="background-color: #000; color: #fff; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; width:100%; font-weight:bold; font-size:17px; margin-top: 15px;">Close</button>
      <p style="font-size: 12px; color: #0F1112; text-align: center; margin-top: 10px;">Powered by <strong><a style="color:#0F1112;text-decoration:none;" href="https://withgale.com" target="_blank">Gale</a></strong></p>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    function updateGaleWidget(variant) {
      if (!variant) return;

      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      var galeWidget = document.getElementById("gale-widget-11");
      if (galeWidget) {
        galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
      }
    }

    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 }}
          }
        }
        {% 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);

    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);
      }
    });

    document.querySelectorAll(".info-icon1").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("gale-modal-11").style.display = "flex";
      });
    });

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

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

    const modal = document.getElementById("gale-modal-11");
    if (modal) {
      document.body.appendChild(modal);
    }
  });
</script>
{% endraw %}

Pay with HSA/FSA Card

{% raw %}
<!-- Gale HSA/FSA Widget - Version 5 -->

<!-- Gale Widget -->
<div id="gale-widget-5" class="gale-widget" style="display: flex; align-items: center; padding: 0px; background-color: transparent; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  <div style="margin-right: 8px;">
    <img src="{{ 'gale_badge1.png' | asset_img_url: '60x' }}" style="margin-top:10px;" alt="Gale Payment Badge" >
  </div>
  <div style="font-size: 16px; font-weight: bold;">
    Pay with your HSA/FSA card.
  </div>
  <div style="display: flex; align-items: center; margin-left: 6px;">
    <a href="#" class="info-icon">
      <img src="{{ 'info-icon.png' | asset_img_url: '20x' }}" alt="Info Icon" style="margin-top:7px;width: 18px; height: auto;">
    </a>
  </div>
</div>

<!-- Modal -->
<div id="gale-modal-5" class="gale-modal" style="display: none; position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="position: relative !important; max-width: 530px; width: 90%; background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <button class="close-modal" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer;">
      <img src="{{ 'close_btn.png' | asset_img_url: '18x' }}" alt="Close Icon" style="width: 18px; height: auto;">
    </button>

    <div style="text-align: left;">
      <img src="{{ 'logo_new_modal.png' | asset_img_url: '80x' }}" alt="Gale Logo" style="width: 80px; margin-bottom: 12px;">
      <h2 style="margin: 0 0 10px; font-size: 26px; font-weight: bold;">Maximize your savings. <br/>Pay with HSA or FSA.</h2>

      <!-- Steps -->
      <div style="margin-top: 15px;">
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon1.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Add products to cart</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;">
          <img src="{{ 'gale_modal_list_icon2.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Select "Gale HSA & FSA" at checkout</span>
        </div>
        <div style="display: flex; align-items: center; background-color: #f0f8f5; padding: 12px 16px; border-radius: 8px;">
          <img src="{{ 'gale_modal_list_icon3.png' | asset_img_url: '40x' }}" alt="Step Icon" style="width: 40px; margin-right: 12px;">
          <span style="color:#0F1112;font-size: 16px; font-weight: 600; flex-grow: 1;">Pay with HSA or FSA debit, or credit card</span>
        </div>
      </div>

      <!-- Close Button -->
      <button class="close-modal" style="background-color: #000; color: #fff; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; width:100%; font-weight:bold; font-size:17px; margin-top: 15px;">Close</button>
      <p style="font-size: 12px; color: #0F1112; text-align: center; margin-top: 10px;">Powered by <strong><a style="color:#0F1112;text-decoration:none;" href="https://withgale.com" target="_blank">Gale</a></strong></p>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    function updateGaleWidget(variant) {
      if (!variant) return;

      const eligibilityMetafield = variant.metafields?.gale_eligibility || "0";
      var galeWidget = document.getElementById("gale-widget-5");
      if (galeWidget) {
        galeWidget.style.display = eligibilityMetafield === "1" ? "flex" : "none";
      }
    }

    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 }}
          }
        }
        {% 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);

    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);
      }
    });

    document.querySelectorAll(".info-icon").forEach(icon => {
      icon.addEventListener("click", () => {
        document.getElementById("gale-modal-5").style.display = "flex";
      });
    });

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

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

    const modal = document.getElementById("gale-modal-5");
    if (modal) {
      document.body.appendChild(modal);
    }
  });
</script>
{% endraw %}

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