Where you can achieve what your competitors can’t

Shopify Make Footer Payment Icons Interactive

Benefits of Making Footer Payment Icons Interactive in Shopify

Transforming static payment badges into lively, hover‑responsive elements at the bottom of every page delivers a robust mix of advantages:

Visual Engagement

  • Adds a subtle pulse, slide, or glow that draws the eye to the end of page real estate
  • Breaks footer monotony with motion‑based “micro celebrations” of accepted payment brands
  • Introduces modern polish interactive cues signal a thoughtfully crafted storefront
  • Provides rhythmic visual anchors that balance the header’s primary motion elements
  • Keeps visitors visually engaged during the natural pause before exit or next‑page click

Trust & Credibility

  • Reinforces security by spotlighting well‑known financial logos in a dynamic, confidence‑building way
  • Showcases breadth of options (Visa, PayPal, Apple Pay, Klarna, etc.) through recognizable animated marks
  • Signals professional legitimacy major brands seldom appear animated on low‑trust sites
  • Leverages motion to emphasize compliance cues (e.g., PCI‑DSS, SSL) within tooltips or popovers
  • Strengthens brand transparency by letting users hover for quick info on fees, instalments, or guarantees

Brand & Marketing

  • Signals a forward thinking, customer‑centric brand that sweats small UX details
  • Aligns on‑site visuals with campaign creative that may feature animated payment badges in emails or ads
  • Encourages social sharing screenshots or screen recordings showcase polished store interactions
  • Supports seasonal storytelling (e.g., holiday themed glows or snow‑fall overlays on icons) without redesigns
  • Differentiates the storefront from competitors whose footers remain static, reinforcing a premium, trustworthy image

CODE for DAWN & Other Old Themes : Footer.liquid {%- if section.settings.payment_enable -%}

{%- if section.settings.payment_enable -%}
  <div class="footer__payment">
    <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
    {% style %}
      .onhow-payment-icons {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 15px; 
        margin-bottom: 15px;
        flex-wrap: wrap;
        perspective: 1000px;
      }
      .onhow-payment-icon-wrapper {
        width: 42px;
        height: 26.25px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.4s ease-in-out, box-shadow 0.3s ease;
      }
      
      .onhow-payment-icon {
        width: 100%;
        height: 100%;
        padding: 3px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
        background: linear-gradient(145deg, #ffffff, #f5f5f5);
        transform-style: preserve-3d;
        transition: all 0.3s ease-in-out;
        font-family: var(--font-body-family);
        font-weight: var(--font-body-weight);
      }
      {% comment %}
      <!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
      {% endcomment %}
      
      .onhow-payment-icon-wrapper:hover {
        transform: translateY(-4px) rotateX(10deg) rotateY(10deg) scale(1.1);
        z-index: 2;
      }
      
      .onhow-payment-icon-wrapper:hover .onhow-payment-icon {
        box-shadow: 0 10px 16px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
      }
      
      .onhow-payment-icon-wrapper:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
        border-radius: 6px;
        z-index: 2;
        transform: translateZ(0.1px);
      }
      
      .onhow-payment-icon-wrapper:hover:before {
        opacity: 1;
      }
      
      .onhow-payment-icon-wrapper:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 5%;
        width: 90%;
        height: 6px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
        filter: blur(3px);
        opacity: 0.6;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        z-index: -1;
      }
      
      .onhow-payment-icon-wrapper:hover:after {
        opacity: 0.9;
        filter: blur(5px);
        bottom: -6px;
        width: 95%;
        height: 8px;
      }
      @media screen and (max-width: 750px) {
        .onhow-payment-icons {
          gap: 8px;
          margin-top: 15px;
        }
        
        .onhow-payment-icon-wrapper {
          width: 36px;
          height: 22.5px;
        }
        
        .onhow-payment-icon {
          padding: 2px;
        }
      }
      {% comment %}
      <!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
      {% endcomment %}
    {% endstyle %}
    
    <div class="onhow-payment-icons">
      {%- for type in shop.enabled_payment_types -%}
        <div class="onhow-payment-icon-wrapper">
          {{ type | payment_type_svg_tag: class: 'onhow-payment-icon' }}
        </div>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}

CODE for HORIZON & Other New Variants : ⚠️ Replace the whole code in blocks/payment-icons.liquid with the code below ⚠️

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

<div
  class="
    payment-icons
    spacing-style
  "
  style="
    {% render 'spacing-padding', settings: block.settings %}
    --icon-gap: {{ block.settings.gap }}px;
    --alignment: {{ block.settings.horizontal_alignment }};
  "
  {{ block.shopify_attributes }}
>
  <span class="visually-hidden">{{ 'blocks.payment_methods' | t }}</span>
  <ul
    class="payment-icons__list"
    role="list"
  >
    {%- for type in shop.enabled_payment_types -%}
      <li class="payment-icons__item">
        <div class="onhow-payment-icon-wrapper">
          {{ type | payment_type_svg_tag: class: 'onhow-payment-icon' }}
        </div>
      </li>
    {%- endfor -%}
  </ul>
</div>

{% style %}
  .payment-icons {
    width: 100%;
  }
  
  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
    perspective: 1000px;
  }
  
  .payment-icons__item {
    display: flex;
    align-items: center;
  }
  
  .onhow-payment-icon-wrapper {
    width: 42px;
    height: 26.25px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease-in-out, box-shadow 0.3s ease;
  }
  
  .onhow-payment-icon {
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    transform-style: preserve-3d;
    transition: all 0.3s ease-in-out;
    font-family: var(--font-body-family);
    font-weight: var(--font-body-weight);
  }
  
  .onhow-payment-icon-wrapper:hover {
    transform: translateY(-4px) rotateX(10deg) rotateY(10deg) scale(1.1);
    z-index: 2;
  }
  
  .onhow-payment-icon-wrapper:hover .onhow-payment-icon {
    box-shadow: 0 10px 16px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
  }
  
  .onhow-payment-icon-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    border-radius: 6px;
    z-index: 2;
    transform: translateZ(0.1px);
  }
  
  .onhow-payment-icon-wrapper:hover:before {
    opacity: 1;
  }
  
  .onhow-payment-icon-wrapper:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 5%;
    width: 90%;
    height: 6px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
    filter: blur(3px);
    opacity: 0.6;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: -1;
  }
  
  .onhow-payment-icon-wrapper:hover:after {
    opacity: 0.9;
    filter: blur(5px);
    bottom: -6px;
    width: 95%;
    height: 8px;
  }
  
  @media screen and (max-width: 750px) {
    .onhow-payment-icon-wrapper {
      width: 36px;
      height: 22.5px;
    }
    
    .onhow-payment-icon {
      padding: 2px;
    }
  }
{% endstyle %}

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

{% schema %}
{
  "name": "t:names.payment_icons",
  "tag": null,
  "settings": [
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "flex-start"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 10
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.payment_icons",
      "category": "t:categories.footer"
    }
  ]
}
{% endschema %}