Block: Logos
The Logos block displays a row of payment and shipping logos. It is most often used in the footer, where customers see which payment methods and carriers the store offers right before they make a decision.
Where to place the block
Logos is a block you place inside a Column section. It is available on most pages in the design builder — footer, front page, category page, product page, blog, static pages, and the 404 page.
How to add it to the footer:
- Open the design builder and go to Footer.
- Use an existing Column section, or add a new one.
- Add the Logos block to the column.
Nine slots for logos
The block has nine fixed slots. Eight of them retrieve logos from a built-in library, and the ninth is reserved for a logo you upload yourself.
Slots you don't fill out will not be displayed in the store. If you only have four logos, the customer will see four logos.
The spaces close up. If you have logos in spaces 1 to 4 and upload your own in space 9, your own logo will appear right after number 4. There will be no gap between them. The same happens if you turn off Show logo in a space in the middle of the row — the logos after it move up.
The order follows the space numbers. The space for your own logo is number nine, so your own logo always ends up last in the row.
Only one space accepts uploaded images
The ninth space is the only one that allows you to upload your own image. The other eight retrieve from the library and cannot be replaced with a custom file.
If you need two logos that are not in the library — for example, two local carriers — add another Logos block and use the custom space there as well. The new block will appear below the first one, and if you want them on the same line, set the width of both to half the column.
Settings for each space
Setting | What it does |
|---|---|
Show logo | Turns the space on or off without losing your setup |
Logo | Selects which logo to display, from the library |
Height | The height of the logo. Standard is 33 pixels |
Link | Makes the logo clickable. Leave the field empty for a logo that only displays information |
Open in new tab | Opens the link in a new tab. Requires you to have filled in Link |
Block conditions | Rules for when this specific logo should be displayed |
The space for your own logo also has an image selector for desktop, tablet, and mobile, as well as a field for alt text. Always set an alt text — it is read aloud by screen readers and describes the image if it fails to load.
Which logos are available in the library
Payment: Visa, Mastercard, Maestro, American Express, Klarna, Vipps, PayPal, Apple Pay, Google Pay, iDEAL, Mollie, Adyen, Avarda and Billie.
Shipping: Posten, Bring, PostNord, PostNL, DHL, Helthjem and Porterbuddy.
Several of the logos are available in two variants — a light and a dark — so you can choose the one that works with your background. If you need a logo that is not on the list, use the space for your own logo.
The library is a fixed list. It does not retrieve which payment methods or carriers your store has actually set up, so you select the logos manually. If you change your payment solution or shipping provider, remember to update the block.
Settings for the entire block
Setting | What it does |
|---|---|
Alignment | Places the logos to the left, centered, or to the right in the column |
Logo color | Standard, completely white, or completely black. See explanation below |
Width | How much of the column grid the block occupies, set separately for desktop, tablet, and mobile |
Visibility | Whether the block should be displayed on desktop, mobile, or both |
Custom CSS class | For those who want to style the block themselves |
Block conditions | Rules for when the entire block should be displayed |
Logo color, width for desktop and tablet, and custom CSS class are under Advanced mode. Turn it on in the block settings if you don't see them.
Logo color
Payment and shipping logos come in their own brand colors. On a dark footer, it can get messy — seven different colors in a row, and a couple of them disappear into the background.
Then you set the Logo color to completely white or completely black. All logos in the block are converted into single-color silhouettes in the color you choose, and the row looks calm and unified.
Two things to know: the setting applies to all logos in the block as a whole; you cannot set it per logo. And it also affects the logo you have uploaded yourself, so if you have your own logo in the block, it will also become single-colored.
Tips
- Give the logos the same height. Different heights are the most common reason a logo row looks uneven, and logos already have slightly different proportions.
- Only show what you actually offer. A Klarna logo in the footer when the store doesn't have Klarna at checkout creates support inquiries.
- Leave Link empty for payment logos. The customer is on their way to checkout, and a link out to Visa helps no one. Shipping logos, however, might be worth linking to tracking or to your shipping page.
- Use PNG with a transparent background for your own logo. A white square around the logo is clearly visible on a colored footer.
- Check the row on mobile. Logos break into multiple lines when space is tight, and with seven to eight logos, it can become three lines on a phone.