How to Add Payment Method Icons to Your Squarespace Footer

Squarespace Tutorial
Written By Walid Hasan

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

  1. Navigate to Pages → Custom code → Custom CSS → Manage Custom Files

  2. 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:

Copied!

<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:

Copied!

.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:

Copied!

<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

Copied!

<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

Copied!

.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 (FAQ)

1. Do I need an entrepreneur's plan or a business plan to add payment icons in the footer?

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).

2. Which image-based icons are best, or FontAwesome icons?

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.

3. Can I integrate other payment methods like Apple Pay, Google Pay, or even Stripe?

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).

4. What do symbols look like? Do you want to know the appearance of symbols on the site?

Absolutely. The image and FontAwesome icons are all fully responsive and will scale perfectly to suit all device resolutions, including mobile and tablet.

5. Is it possible to set a different size or color for the icons?

Yes. Apply a height for image icon or font-size/color for FontAwesome icon of your choice on the container.

6. Where exactly does the HTML go?

You can place the HTML in:

  • The Footer Code Injection area (via Settings → Advanced → Code Injection)

  • A Code Block inside your site's Footer or any section of your page

7. How can I make the icons clickable - (link them to a policy or a payment info page)?

Wrap each icon inside an anchor tag (<a href="your-link">...</a>) to make it clickable.

Example:

Copied!

<a href="/payment-policy"><i class="fab fa-cc-visa"></i></a>

8. This will not harm my site or SEO, correct?

Not at all. Both methods are lightweight. FontAwesome loads quickly from CDN, and if you leave it small (40–60px height), images can be light. This also engenders more trust, and for many, that can result in higher conversion rates.

9. Is it possible to make these icons animate when scrolling or hovering over them?

Yes! You can create a custom CSS transition or use some JavaScript libraries like AOS.js for scroll animations. You can also use hover effects like scale, color change, or shadow.