Replace payment icons in the footer with custom .SVG icons

Store Design
1

Hi guys! How shall i replace the standard payment icons with other custom .svg icons?

Using Dawn theme.

2

Hi @nd500 ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > Add a new asset > Upload a file. Please upload payment files with the name structure: ‘payment-name.svg’, ex: payment-visa.svg

  • Step 3: Go to Sections > footer.liquid, find ‘payment_type_svg_tag’ and change code: https://i.imgur.com/DsjMg4I.png => https://i.imgur.com/cYvz0ip.png

{% capture icon %}payment-{{ type }}.svg{% endcapture %}

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

2 Likes
3

Hi @nd500 ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

4

Unfortunately it did not work. As I can see original Shopify .svg icons are written in the code.

I created one svg. file with all icons in one row, to make it simpler.

But they are not displayed.

5

@nd500 yeah, i totally agree with you. simple is the best

just open the svg file via a text editor then copy and paste the code to footer, that’s all

6

Hi @nd500 ,

Please note the steps, I have instructed you to upload custom icons in Assets with different names in step 2 and then guide you to change the code in step 3 to make it work.

So as long as you follow the right steps, you can change the payment icon according to the icon you created.

Hope it is clear to you.