adding Afterpay icon into footer (or other icons)

Tourist
4 0 4

This is to add in new icons or payment methods into your footer (if not included in the default shopify payment settings)

for this example i have used AfterPay

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).

 

 

3 Likes
Tourist
5 0 3

It worked... Thanks for sharing!

All I had to do though is Step 1 and upload my AfterPay logo in Settings/files, then apply the code.

<li>

<img src="yourURL"/>

</li>  

And add my image URL in the'youURL' and it worked. Took me a few goes to get the size and alignment of the image right, but it looks really good now.

If anyone has the Debut theme.

Enter the code above in footer.liquid

directly under - {% endfor %}:

 <li class="payment-icon">
 {%- assign icon_name = type | prepend: 'icon-' -%}
 {% include icon_name %}
 </li>
 {% endif %}
 {% endfor %}


 {start code here]

 <li>

<img src="yourURL"/>

</li>  

 

2 Likes
New Member
3 0 0

Fabulous!  Worked with Poli icon.  Thanks

0 Likes
New Member
1 0 0

Hi,

Thanks for the instructions. I have managed to include the logo in the footer of my theme, but it looks blurry compared to the other logos.

I uploaded it as a jpg, should it be a different file format? Your help will be much appreciated, thanks!Screen Shot 2019-02-18 at 11.44.15 AM.png

0 Likes
New Member
1 0 0

PNG typically looks better. 

0 Likes
New Member
1 0 1

Hi,

 

I am struggling to add afterpay icon. I have followed your step by step but it shows like a credit card as generic. 

I have then added the code for the icon and it is massive underneath all other icons.

Can you please help?

 

Cheers

1 Like
New Member
1 0 0

In the end I email the support team at shopify and they were able to fix it for me.  Maybe give that a try.  All the best.

0 Likes
Highlighted
New Member
1 0 1

thanks this was lit. ALL DONE.

1 Like