FROM CACHE - de_header

Specific Placement of Shopify Payment Methods Liquid

5 0 1

Hello everyone, 

I want to display my payment methods under my product directly. 

I have found this code from Shopify and it works, but not exactly how I want it to be. Let me show you; 

.icon {
  width: 3.125em;
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;

{%- unless shop.enabled_payment_types == empty -%}
  <span class="visuallyhidden">Supported payment methods</span>

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


And it looks like this; 


Bildschirmfoto 2022-08-01 um 18.26.51.png


My question to you; is there any way the payment methods are displayed efficiently? So horizontally instead of vertically and without the bullet points? 

Thank you so much! 


Shopify Expert
2006 417 718

@PaLa your going to have to add some CSS attributes to show the payment icons in a different way.


you could add following attributes to the visuallyhidden class


 But to help you more, I‘ll need more input about the desired design. 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
5 0 1

Hey Finer, something like that; 

(of course with all the payment options)

Design ohne Titel.png


could you tell me what to do? That would be amazing, thank you.