Why aren't all payment icons displaying in my website footer?

Fourteen
Visitor
2 0 0

@PeanutButter This one is best for you I think - others are welcome to help me out!

I've got my store here but the payment icons aren't working correctly. Please see my code below in the footer-1.liquid file:

 

  <div class="t-center p-l-15 p-r-15">
    {% unless shop.enabled_payment_types == empty %}
	{% assign enabled_payment_types = 'visa,amex,paypal,apple_pay,google_pay' | remove: ' ' | split: 'apple_pay' %}
	{% for type in enabled_payment_types %}
    <a class="f-payment h-size2 icon fa fa-cc-{{ type }} fa-2x" aria-hidden="true"></a>
    {% endfor %}
    {% endunless %}
    <div class="t-center s-text7 p-t-20">

 

The problem is, it is only displaying the Visa, American  Express and PayPal icons at the footer of my website. I'm wanting to display 3 more but they aren't showing up. What could be causing this issue?

Screenshot 2021-07-12 at 16.16.25.png

 

Best Regards,

Fourteen.

Reply 1 (1)

Zworthkey
Shopify Partner
5581 642 1567

@Fourteen 
hi,

Buddy 

Add this code to make changes in your site.

<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' }}
{% assign enabled_payment_types = 'visa,amex,paypal,apple_pay,google_pay' | remove: ' ' | split: 'apple_pay' %}
      </li>
    {%- endfor -%}
  </ul>
{%- endunless -%}