> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withgale.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Step 1 " stepNumber="1">
    1. In Shopify Admin, go to **Online Store** > Go to Activated Theme and Click **Edit Code.**

           <img src="https://mintcdn.com/galepaymentsinc/-tfqSxxNOR5RQPkA/images/Screenshot2025-04-11at5.05.55PM.png?fit=max&auto=format&n=-tfqSxxNOR5RQPkA&q=85&s=2f6485b2d002ec5067c1934130165c1a" alt="Screenshot2025 04 11at5 05 55PM Pn" width="552" height="329" data-path="images/Screenshot2025-04-11at5.05.55PM.png" />
  </Step>

  <Step title="Step 2 " stepNumber="2">
    From Sidebar choose approproate file \_(e.g product.liquid / product\_details.liquid) \_and open it.
  </Step>

  <Step title="Step 3" stepNumber="3">
    Copy any of following code snippets according to your preferences and paste code anywhere in file.

    <Accordion title="HSA/FSA Eligible (Text)" defaultOpen>
      <img src="https://mintcdn.com/galepaymentsinc/9IRMzcywQZu3WRSO/Screenshot2025-11-11at2.01.25AM.png?fit=max&auto=format&n=9IRMzcywQZu3WRSO&q=85&s=9b918c27ae49248a1de8df806fea9f76" alt="Screenshot2025 04 11at5 05 55PM Pn" width="574" height="76" data-path="Screenshot2025-11-11at2.01.25AM.png" />

      ```
      {% 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>

      ```
    </Accordion>

    <Accordion title="HSA/FSA Eligible (Icon)">
      <img src="https://mintcdn.com/galepaymentsinc/9IRMzcywQZu3WRSO/Screenshot2025-11-11at2.09.56AM.png?fit=max&auto=format&n=9IRMzcywQZu3WRSO&q=85&s=8c4706a6edcef96b189e1204dd381808" alt="Screenshot2025 04 11at5 05 55PM Pn" width="644" height="78" data-path="Screenshot2025-11-11at2.09.56AM.png" />

      ```
      {% 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>

      ```
    </Accordion>

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

### <Icon icon="brake-warning" iconType="solid" color="#dac02c" size="21" />  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.