Boardwalk Block Guide

Payment Icons Block

Everything you need to display accepted payment method icons on your storefront — from activating payment providers in your Shopify admin to adding the block in the theme editor.

About

Payment icons are small branded logos that represent the payment methods your store accepts — such as Visa, Mastercard, American Express, PayPal, Apple Pay, and others. Displaying these icons on your storefront reassures customers that they can check out with their preferred payment method and helps build trust at key decision points like the footer or cart page.

In the Boardwalk theme, the Payment Icons block automatically displays the payment methods you have activated in your Shopify admin. You don't need to upload images or select individual icons — the block reads directly from your store's active payment providers and renders each one as a full-color SVG icon. If you add or remove a payment method in your admin, the icons update automatically on your storefront.


How to Set Up the Payment Icons Block

Follow these steps to display payment method icons on your Shopify store using the Boardwalk theme.

1
Activate Your Payment Methods

Before the icons can appear, you need to have at least one payment provider turned on in your Shopify admin. Go to Settings → Payments and make sure your desired payment methods (credit cards, PayPal, Apple Pay, etc.) are activated. Only payment methods that are currently active will display as icons on your storefront.

Note: The Payment Icons block pulls directly from your store's active payment providers. If no payment methods are activated, the block will not display anything on your storefront.

2
Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find Boardwalk, and click Customize. Navigate to the page where you want to display payment icons using the page selector dropdown at the top center of the editor.

3
Add the Payment Icons Block

In the Theme Editor sidebar, find the section where you want the icons to appear (commonly the footer). Click Add block and choose Payment icons from the list. The block will appear with icons for all your active payment methods.

4
Position the Block

Drag the Payment Icons block to your preferred position within the section. In a footer layout, payment icons are typically placed in the bottom row alongside copyright text and policy links.

5
Save and Preview

Click Save in the Theme Editor. Preview your page to confirm the payment icons are displaying correctly and showing the payment methods you expect.


How It Works

The Payment Icons block is designed to stay in sync with your store's payment configuration automatically. Here's what happens behind the scenes.

Key Behaviors

Automatic icon display

The block reads your store's list of active payment methods and renders an icon for each one. You don't need to manually select or upload icons — they appear automatically based on your payment configuration.

Full-color SVG icons

Each payment icon is rendered as a crisp, full-color SVG graphic provided by Shopify. These icons look sharp on all screen sizes and resolutions, including high-density (Retina) displays.

Stays in sync with your admin

When you activate or deactivate a payment provider in your Shopify admin under Settings → Payments, the icons on your storefront update automatically. There's no need to edit the theme — the block always reflects your current payment setup.

Hidden when empty

If your store has no active payment methods, the block hides itself entirely. It won't leave behind any empty space or placeholder content on the page.

Responsive wrapping

The icons are displayed in a horizontal row that automatically wraps to multiple lines on smaller screens. This ensures the icons remain visible and well-spaced regardless of the device or number of payment methods.

Alignment follows the section

The icons align according to the text alignment setting of their parent section or group. For example, if the footer row is centered, the payment icons will also be centered.

Accessibility

The block includes a hidden label that reads "Payment methods" for screen readers, ensuring that assistive technologies can identify the purpose of the icon list even though it's entirely visual.


Block Settings

The Payment Icons block is intentionally simple and has minimal configuration. The icons are controlled entirely by your Shopify payment settings.

Payment Icons Block Settings

Active payment methods info

The block displays an informational note that reads: "Only activated payment methods will display." This is a reminder that the icons shown are determined by your payment provider settings in the Shopify admin, not by the theme editor. There are no additional settings to configure on this block.

Note: To control which icons appear, you need to manage your payment providers in the Shopify admin under Settings → Payments. Activating or deactivating a payment method there will automatically add or remove the corresponding icon from this block.


Admin Steps and Requirements

The Payment Icons block relies on your Shopify admin configuration. Make sure the following are in place before expecting icons to appear.

Before You Begin

Activate payment providers

The block only displays icons for payment methods that are currently activated. Go to Settings → Payments in your Shopify admin and ensure your desired payment providers are turned on. Common providers include Shopify Payments (which covers Visa, Mastercard, American Express, and more), PayPal, Apple Pay, Google Pay, and Shop Pay.

Shopify Payments required for some icons

Some payment method icons — such as Visa, Mastercard, and American Express — only appear when you have Shopify Payments activated as your payment provider. If you're using a third-party payment gateway, the available icons may be limited to what that gateway supports.

No manual icon selection

You cannot pick and choose which icons to show or hide from within the theme editor. The block displays all active payment types automatically. To remove a specific icon, you would need to deactivate that payment method in your Shopify admin.

Test mode considerations

If a payment provider is in test mode, its icon may still appear in the block. Make sure to check your payment settings before going live to confirm the icons accurately reflect your active checkout options.


Frequently Asked Questions

The Payment Icons block only displays icons for payment methods that are currently activated in your Shopify admin. Go to Settings → Payments and confirm that at least one payment provider is turned on. If no methods are active, the block hides itself entirely.
No. The block automatically shows icons for every active payment method on your store. You cannot selectively hide individual icons from the theme editor. If you want to remove a specific icon, you would need to deactivate that payment method in your Shopify admin under Settings → Payments.
No. The Payment Icons block uses Shopify's built-in SVG icons, which are generated automatically based on your active payment providers. Custom images or logos cannot be added to this block. If you need to display a custom icon for a payment method that isn't supported, consider using an Image block or a Custom Liquid block instead.
First, confirm that the new payment method is fully activated (not just in test mode) under Settings → Payments in your Shopify admin. If it is active and still not appearing, try opening the theme editor and clicking Save again. You can also preview your storefront in an incognito or private browser window to rule out caching issues.
The most common placement is in your store's footer, typically in the bottom row alongside copyright text and policy links. This is where most shoppers expect to find payment information. However, you can add the block to any section that supports it if you want payment icons to appear elsewhere on your store.