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.
Once code is added save your code and publish. You should be able to see HSA/FSA ELigibility messaging on ELigible Product Pages.
HSA & FSA Eligible
HSA & FSA Eligible
Copy
{% 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
Save upto 40% - Horizontal
Copy
{% 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
Save upto 40% - Vertical
Copy
{% 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
HSA & FSA Accepted
Copy
{% 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
Pay with HSA/FSA Card
Copy
{% 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 %}
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.