How do I add a payment icon to my footer section? (Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I want to add Payoneer, Remitly, Xoom, and Wise payment icons to my footer section. I have used the code below. But only Wise icon is showing. How can I solve this? Please help me. Thank You.

Store: https://delicious-fruits-vegetables.myshopify.com/

Password; Admin

{% assign enabled_payment_types = 'remitly,xoom,wise,payoneer' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}

[topnewyork]

Hi @dreamtechzone_5 
Go to Online Store -> Theme -> Customize -> Footer section
Then follow these steps

If my reply is helpful, kindly click like and mark it as an accepted solution.

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow
Thanks!

[dreamtechzone_5]

I have done this. Maybe, I need to do some coding here to add this payment icon.

[topnewyork]

@dreamtechzone_5,

 Which theme are you working on?

[dreamtechzone_5]

Shopify Dawn Theme. Actually, I want to add Payoneer, Remitly, Xoom, and Wise payment icons.

[Guleria]

Hello @dreamtechzone_5 ,

Here you can find the list of available icons https://github.com/activemerchant/payment_icons/tree/master/app/assets/images/payment_icons

If the one you are looking for is not available then you need to hard code for it.

Regards
Guleria 

[dreamtechzone_5]

So it's not possible? Please help me. Thank you.

[Guleria]

Upload the icons in assets (.svg) format. I name should be remitly.svg, xoom.svg, wise.svg, payoneer.svg
Update your code with this one

{% assign enabled_payment_types = 'remitly,xoom,wise,payoneer' | remove: ' ' | split: ',' %}

<div class="payment-icons">
  {% for type in enabled_payment_types %}
    <div class="payment-icon">
      <!-- Call custom icon based on the payment type -->
      <img src="{{ 'icon-' | append: type | append: '.svg' | file_url }}" alt="{{ type | capitalize }} payment icon">
      <span>{{ type | capitalize }}</span>
    </div>
  {% endfor %}
</div>