FROM CACHE - de_header

Specific Placement of Shopify Payment Methods Liquid

PaLa
Tourist
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; 

<style>
.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;
}
</style>

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

  <ul>
    {%- for type in shop.enabled_payment_types -%}
      <li>
        {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
      </li>
    {%- endfor -%}
  </ul>
{%- 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! 

2 ANTWORTEN 2

Finer
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

list-style-type:none;
display:flex;
flex-direction:row;

 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
PaLa
Tourist
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.