Adding custom payment option icons to footer

New Member
3 0 1

I would like to add custom payment icons rather than the ones that are already set for my theme. I did some research and the only thing I could figure out was using this code to do it -

<li>{{ 'Shopify_Payment_Icons.png' |
                  asset_url | img_tag }}</li>

It works when I enter it but I dont know how to align it correctly and how to remove the current ones that are in place.

I could really use some help!

1 Like
Shopify Staff
Shopify Staff
555 4 87

Hi Milo!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to display the specific payment icons you would like, so let's see how you can get this sorted :) We have an amazing User Interface Elements Generator tool to generate payment icons, social media icons, line item properties, and different types of cart notes.

It's very easy to use and you can share it with merchants:

It looks like this:

https://screenshot.click/2016-10-25_10-12-53-2reex_.png

You just need to take the code it gives you, and for payment icons, comment out what is there now, and replace it with the code generated.

If you're not fully sure how to do this, you can contact our Theme Support on the regular Shopify Support channels here.

Hope this helps Milo, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru

0 Likes
Tourist
4 0 5

HI

I have found this and sucessfully used it - but how do i add in a icon for Afterpay? and or ZipPay when i have it?

 

thanks

1 Like
Tourist
10 0 1

+1 to this:

I have found this and sucessfully used it - but how do i add in a icon for Afterpay? and or ZipPay when i have it?

0 Likes
New Member
2 0 0

Hi Bobby! did you manage to do it?

I have the same issue. In the netherlands we use iDeal but I have no idea how the payment-icons.liquid is pulling each one.
 

0 Likes
Tourist
4 0 5

sorry - been offline having a baby!

And yes - i did finally figure it out by hacking the code.

EDIT CODE

  1. Open up and find the footer.liquid found in your Customize theme code sections.
  2. then find one of your loaded payment options (ie visa) in the code script
  3. here you will notice a string of text like this:

{% assign payment_icons_available = ',amazon_payments,american_express,apple_pay,bitcoin,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,litecoin,maestro,master,paypal,visa' | split: ',' %}

  • ADD IN TEXT: just ad in your text for the missing payment (in this case im using afterpay) so it now looks like this:

{% assign payment_icons_available = 'afterpay,amazon_payments,american_express,apple_pay,bitcoin,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,litecoin,maestro,master,paypal,visa' | split: ',' %}

Now this is just the "code part" that will tell your footer menue what to do with the icons etc. You will also need to load the footer icon for your missing payment option next

IMAGE ICON

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. To get your button on your site we are going to upload the social media icon image to your theme. Click the Assets folder to open it.
  4. Scroll down to and click the Add a new asset link.
  5. Choose the icons file on your computer and click Upload asset.
  6. Copy the source code - and put it aside into notepad or something (right click on the image displayed and click "copy source code"

ADJUST SOME MORE CODE

  1. Go back to your footer.liquid code and "find" "icon-fallback-text", and paste this code below the  {% endfor %} code,

   <li>

              <img src="yourURL"/>

            </li>   

  1. Delete the part between the quotes and paste the stored "source code" link your grabbed before
  • this will insert the image in the default size (which is sometimes huge)
    • i actually found it easier to "resave" and "re-upload" the logo at a reduced size - ie take a snapshop of your current footer icons and in paint or something resize your logo to the same one. You will have to delete and reupload to your assesets - and fix the pased URL code above to get the right sizing.

hopefully i have made sence (sorry is a bit of hacking and code from all over the place, i managed to sort of glue togheter).

 

 

0 Likes
New Member
6 0 0

Hey, thanks for your comment, I will do this directly. But can you give us an rough idea, what size fits best?

Thanks and all the best!

0 Likes
Tourist
4 0 5

Upload directly to shopify files - view the file, edit and “resize” using the edit function (mine is now set at 53 width x 36 height) im guessing its in pixels 

good luck!

0 Likes
New Member
1 0 0

Thanks 

I have done 5 steps but did understand 6 step, dont know how to get source code and where to paste it.I did  right click on the image but there is no source code option maybe i clicked on wrong image ( Copy the source code - and put it aside into notepad or something (right click on the image displayed and click "copy source code" )  plzz elborate Im using brooklyn theme Thanks 

0 Likes
Tourist
5 0 2

Hello Ajay_jangir,

If you have difficulties with changing payment icons in .liquid files, you can try to look for Shopify app that solves this problem. For example: Custom Payment Icons

0 Likes