Added payment providers in footer - now dots appear

Store Design

Topic summary

A user manually added payment provider icons to their Shopify footer using custom code in footer.liquid and CSS styling to set a max height of 35px. This implementation caused three unwanted green dots to appear next to the icons.

Technical Details:

  • Icons were added using a combination of image uploads and Shopify’s payment_type_svg_tag filter
  • Custom CSS classes (.klarnaicon, .vippsicon, .visasicon) were applied for height control

Solution:
The issue was resolved by adding CSS to remove list styling:

.list-payment {
   list-style: none;
}

The dots appeared because the payment icons were rendered as list items with default bullet points. Removing the list-style property eliminated the unwanted visual elements. Status: Resolved

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello

Manually added icons for payment providers in the footer.

Added the following in footer.liquid:


              - ![Wordmark_Transparent_And_Black.png?v=1748800568|765x372](upload://5pULBZGCTDCs4BzDYiucmgCSV4C.png)

              - ![90ccde4b1d9e551f210628642fee292e.png?v=1748800568|1921x778](upload://bwVrP2omUAX3XXZN0hzuxosorfD.png)

              - ![c274cd7960aa99c999d688c39ffc8d70.png?v=1748801314|2048x2048](upload://br80awv0v20KSSmd8KEXazjUkVw.png)

              {%- for type in shop.enabled_payment_types -%}
                - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                
              {%- endfor -%}

And then changed the custom CSS for the page to have max height of 35 px

.klarnaicon {
  height: 35px !important;
}
.vippsicon {
  height: 35px !important;
}
.visasicon {
  height: 35px !important;
}

And now I get 3 green dots appearing besides the icons.

Settepotet_0-1748802004067.png
Settepotet_0-1748802004067.png390Ă—119 4.46 KB

Any idea how to fix this? Thanks in advance :slightly_smiling_face:

1 Like
2

Hey @Settepotet

Share your Store URL and Password if enabled.

Best,

Moeed

3

Hi @Settepotet

You have a different class for those 3 “icon–payment” and other are “list-payment__item” but maybe that is ok, to have different styles.

So maybe that could help to have same look, even you did not show others.

But for your question, about dots, try this CSS:

.list-payment {
   list-style: none;
}
1 Like
4

Well Laza, that did the trick! Thanks!

1 Like