Enhance your Shopify store’s user experience by making footer payment icons interactive! This guide will walk you through the steps to transform static payment method icons in your footer into clickable elements that provide additional information or redirect customers to secure payment details.
What You’ll Learn:
✅ How to locate and edit the footer code in your Shopify theme
✅ Adding hover effects (e.g., color changes, animations) to payment icons
✅ Making icons clickable with links to payment method, FAQ,s or security pages
✅ Best practices for mobile responsiveness to ensure a seamless experience
By the end of this tutorial, you’ll have a more engaging and professional-looking footer that reassures customers about payment options while improving site interactivity.
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 %}
.foysalahmed-payment-icons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
perspective: 1000px;
}
.foysalahmed-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;
}
.foysalahmed-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 foysalahmed YouTube Channel -->
{% endcomment %}
.foysalahmed-payment-icon-wrapper:hover {
transform: translateY(-4px) rotateX(10deg) rotateY(10deg) scale(1.1);
z-index: 2;
}
.foysalahmed-payment-icon-wrapper:hover .foysalahmed-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);
}
.foysalahmed-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);
}
.foysalahmed-payment-icon-wrapper:hover:before {
opacity: 1;
}
.foysalahmed-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;
}
.foysalahmed-payment-icon-wrapper:hover:after {
opacity: 0.9;
filter: blur(5px);
bottom: -6px;
width: 95%;
height: 8px;
}
@media screen and (max-width: 750px) {
.foysalahmed-payment-icons {
gap: 8px;
margin-top: 15px;
}
.foysalahmed-payment-icon-wrapper {
width: 36px;
height: 22.5px;
}
.foysalahmed-payment-icon {
padding: 2px;
}
}
{% comment %}
<!-- Designed by foysalahmed YouTube Channel - -->
{% endcomment %}
{% endstyle %}
<div class="foysalahmed-payment-icons">
{%- for type in shop.enabled_payment_types -%}
<div class="foysalahmed-payment-icon-wrapper">
{{ type | payment_type_svg_tag: class: 'foysalahmed-payment-icon' }}
</div>
{%- endfor -%}
</div>
</div>
{%- endif -%}