Onsite messaging using Custom Code
Get Started
Integrations
Changelog
Onsite messaging using Custom Code
Copy-paste the appropriate widget snippet into your Shopify theme based on your design choice.
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
1
Step 1
-
In Shopify Admin, go to Online Store > Go to Activated Theme and Click Edit Code.
2
Step 2
From Sidebar choose approproate file _(e.g product.liquid / product_details.liquid) _and open it.
3
Step 3
Copy any of following code snippets according to your preferences and paste code anywhere in file.
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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.
On this page