Turn your Shopify footer payment icons into interactive, clickable elements that boost trust and enhance user experience. This guide walks you through transforming static icons into links that provide secure payment details and useful information for customers.
What You’ll Learn:
How to Make Your Shopify Footer Payment Icons Interactive
Your Shopify footer is more than just the bottom of your store – it’s a powerful trust-building space where customers often look for payment information. By customizing your footer payment icons, you can make your store look more professional, engaging, and user-friendly. Let’s walk through how to enhance these icons step by step.
1. Locating and Editing the Footer Code
To begin, log in to your Shopify admin and go to Online Store > Themes > Edit Code. From there, locate your theme’s footer file (usually named footer.liquid). This is where you can edit or insert custom code for your payment icons. Always duplicate your theme before making changes to avoid breaking your live site.
2. Adding Hover Effects to Payment Icons
Hover effects make your store feel more interactive. For example, you can apply simple CSS such as changing icon colors, adding a shadow, or using smooth animations when customers hover over the payment icons. This small touch adds a modern and professional feel.
3. Making Icons Clickable
Instead of keeping icons static, link them to useful pages. For example, the Visa icon could link to your Payment Methods page, or the PayPal icon could redirect customers to a FAQ or Security Page. This not only looks professional but also helps customers quickly find answers about payments and security.
4. Ensuring Mobile Responsiveness
Since most shoppers browse on mobile, ensure your footer icons resize and align correctly on smaller screens. Use CSS flexbox or grid layouts to make the design responsive. Test your changes on different devices to confirm everything looks smooth.
Final Thoughts
By the end of this process, your Shopify footer will be more engaging, clickable, and mobile-friendly. This builds trust, improves navigation, and enhances the overall customer experience.
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 -%}