Many stores paste one wide PNG of card logos under the checkout button. It ends up blurry when scaled down, has empty space above and below, and you can't add gaps between the cards. Shopify already ships official SVG payment icons. Use them.
The Liquid
<ul class="payment-icons-list" role="list">
{%- for type in shop.enabled_payment_types -%}
<li>{{ type | payment_type_svg_tag }}</li>
{%- endfor -%}
</ul>shop.enabled_payment_types shows the methods your store actually accepts. For a fixed list, use 'visa,master,american_express' | split: ',' instead.
The CSS
.payment-icons-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; line-height: 0;
}
.payment-icons-list svg { width: 46px; height: 29px; display: block; }Make it editable
Add a "Payment icons" group to config/settings_schema.json with a source select (automatic / custom list), a text field for the custom list, and range sliders for icon height and gap. The store owner can then change everything from the theme editor.
One place for the CSS
If the same icons appear in the cart drawer and the cart page, keep the CSS in one stylesheet (e.g. assets/base.css), not in two inline <style> blocks. Otherwise fixing one place breaks the other.
Want it done for you? I add editable SVG payment icons to your cart drawer, cart page and product page. See the fixed-price service or get a free video audit.