How to set up the Payment Icon block

What the Payment Icon block does

The block shows a line of payment method logos, such as Visa, Mastercard, PayPal and Klarna, under an optional title like “We Accept”. The logos are Shopify’s own payment icons, in their brand colours. They’re display only: they don’t change which payment methods the buyer can use.

When to use it

• Show accepted methods before the payment step, so buyers know early that they can pay their preferred way.
• Highlight buy-now-pay-later options such as Klarna, Afterpay or Affirm on higher-priced carts.
• Surface local methods like iDEAL or Bancontact for buyers in a specific country, using visibility conditions.

Before you start

• List the payment methods your store actually offers. The block doesn’t check your payment settings, so only add icons for methods buyers can use.

Set it up

1. In Checkout Ninja, go to Blocks and click Create New Block. Then click Start Fresh, or open an existing block you want to add it to.
2. Click Add block and choose Payment Icon.
3. Under Title, edit the Title Text, or clear it to show the icons without a title.
4. Under Payment Icons, add a row and choose a method in Payment Method Icon. Repeat for each method, in the order you want them shown.
5. Set Alignment and Icon Spacing.
6. Click Done. Check that Status is Active, then click Save and copy the Block ID.
7. Click Open Checkout Editor. Add the Custom Block app block where you want the icons. Paste the Block ID and save.

Settings reference

Title

Setting	What it does	Default
Title Text	Optional line above the icons. Leave empty to hide it.	We Accept
Advanced Options → Size	Extra Small, Small, Medium, Large or Extra Large. Only Small and Extra Small change how it looks.	Medium
Advanced Options → Bold	Shows the title in bold.	On
Advanced Options → Color	Default (Black), Accent (Blue), Subdued (Gray), Success (Green), Warning (Yellow), Critical (Red), Info (Blue) or Decorative.	Default (Black)
Advanced Options → Alignment	Left, Center or Right.	Center
Title Alignment	Left, Center or Right. Used only when the title has no alignment of its own under Advanced Options.	Center

Icons

Setting	What it does	Default
Payment Icons → Payment Method Icon	One payment method per row, chosen from 400+ icons: cards, wallets, buy-now-pay-later, local bank methods and crypto.	—
Alignment	Left, Center or Right placement of the icon row.	Center
Icon Spacing	Gap between icons: None, Extra Tight, Tight, Base, Loose or Extra Loose.	Base

Verify it worked

1. Open your checkout with any product in the cart. The title and icons show in the order you added them.
2. Check each logo is the brand you picked.
3. Remove every icon, save and reload checkout. The whole block, title included, should disappear. Add the icons back.

Limitations

• Shopify Plus only for placement in the checkout steps. That’s a Shopify rule for all checkout apps.
• Manual list. The block doesn’t read your store’s payment settings. Keep it in sync yourself.
• No custom logos. Icons come from Shopify’s payment icon set, so their size and style are set by Shopify.
• Accent (Blue) and Decorative title colours show in your default text colour, and Italic isn’t available.

Troubleshooting

The block doesn’t show in checkout. Check that Payment Icons has at least one row with a method selected. The block hides itself, title included, when there are no icons. Then run through the general checklist.

The title stays centred when I change Title Alignment. Open the title’s Advanced Options and change Alignment there. It overrides Title Alignment.

An icon shows the wrong brand or is blank. Some methods appear more than once in the list under different names. Remove the row and choose another entry for that brand, then check it in checkout.