How to Add Payment Method Icons to Your Squarespace Footer
In today’s cluttered, competitive eCommerce market, it is important that trust and transparency in checkouts are implemented. Featuring payment method logos in your website footer, it’s amazing how such a simple little trust-building element of detail can be so inexpensive yet so incredibly effective.
These visual cues not only reassure customers that their preferred method is accepted, but also make your site look more professional and finished.
This simple guide walks you through two easy methods to add payment icons on your Squarespace 7.1 site, image-based or FontAwesome based without a developer.
What are the Payment Icons in the Footer?
They are familiar visual badges such as Visa, MasterCard, PayPal, and American Express, that typically show up in the footer of an online store to signal accepted methods of payment.
Why Add Them?
Adding Payment Method Icons to Your Squarespace Footer. About why adding payment method icons to your Squarespace would help:
Make sure your checkout is a place of trust and transparency
Enhance your site's professional appearance
Meet industry-standard UX practices
Support SEO and brand consistency
Limit cart abandonment by immediately driving user confidence
How It Works
There are two main ways of adding payment icons to your Squarespace website:
With custom image icons (for having design control)
With FontAwesome icons (faster loading, no images)
Both can be done by using native Squarespace features such as Code Injection and Custom CSS.
Method 1: Insert Image-based Payment Icons (Easy + Sleek)
Step 1: Prepare Your Icons
Get or create small PNG/SVG icons for each payment you'd like to add:
Visa
MasterCard
PayPal
American Express
(Alternatively, any others such as Apple Pay, Discover, etc.)
Recommended size: 40–60px in height
Step 2: Add Icons in Squarespace
Navigate to Pages → Custom code → Custom CSS → Manage Custom Files
Upload each payment icon image
Once uploaded, right-click each file name to get the direct link.
Step 3: Insert HTML into Your Footer or Code Block
Paste the following into a Code Block or the Footer Code Injection area:
<div class="payment-icons">
<img src="https://yourdomain.squarespace.com/s/visa.png" alt="Visa">
<img src="https://yourdomain.squarespace.com/s/mastercard.png" alt="MasterCard">
<img src="https://yourdomain.squarespace.com/s/paypal.png" alt="PayPal">
</div>
Replace the src URLs with the actual URLs of your uploaded icons.
Step 4: Style with CSS
Go to Pages → Custom code → Custom CSS and paste:
.payment-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 20px;
}
.payment-icons img {
height: 40px;
width: auto;
transition: transform 0.3s ease;
}
.payment-icons img:hover {
transform: scale(1.1);
}
This creates a centered, responsive row of icons with a subtle hover effect.
Method 2: Add FontAwesome Payment Icons (Lightweight + Scalable)
Step 1: Load FontAwesome in the Header
Go to Settings → Advanced → Code Injection → Header and paste:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Step 2: Insert HTML in Footer or Page Code Block
<div class="payment-icons">
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-paypal"></i>
<i class="fab fa-cc-amex"></i>
</div>
These icons are vector-based, responsive, and load fast without any images.
Step 3: Style the Icons
Paste this CSS into Pages → Custom code → Custom CSS
.payment-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
font-size: 30px;
color: #555;
}
.payment-icons i:hover {
color: #000;
transform: scale(1.1);
transition: 0.3s ease;
}
How to Use It
Choose either the image-based or the FontAwesome-based method
Add the HTML to your footer or a specific Code Block
Add the CSS in the Custom CSS panel
Upload images if using image icons
Customize size, spacing, and hover effects as needed
Customization Options
| Option | Description |
|---|---|
| Icon Size | Adjust height or font-size |
| Spacing | Change gap or add padding/margin |
| Hover Effects | Add scale, color, shadow, or even rotate animations |
| Click Behavior | Wrap in <a> tags to link icons to terms or policies |
| Scroll Animation (Optional) | Animate icons as they scroll into view (using CSS or JS) |
Final Thoughts
Payment method icons in your Squarespace footer can be a quick, easy, but powerful upgrade. It gives peace of mind, establishes brand professionalism, and builds trust at checkout.
Frequently Asked Questions
-
It is not, however, you can use some payment icons with the built-in Code Injection and Custom CSS features available to most Squarespace 7.1 plans (including Business and Commerce).
-
It depends on your needs:
Use image-based icons if you want full design control and custom branding.
Use FontAwesome icons for a lightweight, scalable, and faster-loading solution.
-
Yes! Additional Payment Icons You can use - You can add any additional payment icons using images (your own.png/.svg file) or use FontAwesome if the icon is available (e.g., fab fa-cc-apple-pay).
-
Absolutely. The image and FontAwesome icons are all fully responsive and will scale perfectly to suit all device resolutions, including mobile and tablet.
-
Yes. Apply a height for image icon or font-size/color for FontAwesome icon of your choice on the container.
