adding Afterpay icon into footer (or other icons)

[Bobby_Van_Beek]

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

[Alycia_Osborne]

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>  

[Shack]

Fabulous!  Worked with Poli icon.  Thanks

[lucym]

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!

[shopify-ninja]

PNG typically looks better. 

[wavefit_nz]

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

[luma]

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.

[iamcizzle]

thanks this was lit. ALL DONE.

[jeecaleeca]

im using brooklyn theme, and i cannot find a list of existing payment icons... 

<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">

<div class="grid-uniform">

{% comment %}
Default to 1 footer column (copyright/powered_by/payment_types)
{% endcomment %}
{% assign num_footer_columns = 1 %}

{% comment %}
Create an extra menu column if link list has more than 5 links
{% endcomment %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
{% comment %}
We have a Footer menu that isn't empty, we will need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% assign extra_footer_linklist_column = false %}
{% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
{% if footer_linklist_count > 5 %}
{% assign extra_footer_linklist_column = true %}
{% comment %}
We split the links so we'll need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
If we have an odd amount of links, we need to show 1 more link in 1st column
{% endcomment %}
{% assign extra_link = footer_linklist_count | modulo: 2 %}
{% comment %}
We start with a 2nd column after first column is filled up.
{% endcomment %}
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
{% endif %}

{% comment %}
Determine whether there are social links
{% endcomment %}
{% assign footer_social_enable = false %}
{% if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_google_plus_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_fancy_link != blank
or settings.social_snapchat_link != blank
%}
{% assign footer_social_enable = true %}
{% endif %}

{% comment %}
Calculate the number of footer columns shown. Default to 1.
{% endcomment %}
{% if footer_social_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}

{% case num_footer_columns %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = '' %}
{% when 2 %}
{% assign footer_column_width = 'one-half small--one-whole' %}
{% when 3 %}
{% assign footer_column_width = 'one-third small--one-whole' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter medium--one-half' %}
{% endcase %}

{% if linklists[section.settings.footer_link_list].links.size > 0 %}
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets site-footer__linklist">
{% for link in linklists[section.settings.footer_link_list].links %}

{% comment %}
Create a second column
{% endcomment %}
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
</ul>
</div>
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets site-footer__linklist">
{% endif %}

<li><a href="{{ link.url }}">{{ link.title }}</a></li>

{% endfor %}
</ul>
</div>
{% endif %}

{% if footer_social_enable %}
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets social-icons">
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}

<div class="grid__item {{ footer_column_width }} {% if num_footer_columns == 1 %}text-center{% else %}large--text-right{% endif %}">
<p>&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}<br>{{ powered_by_link }}</p>
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
</div>
</div>

</div>
</footer>

{% schema %}
{
"name": {
"da": "Sidefod",
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fi": "Alatunniste",
"fr": "Pied de page",
"hi": "फुटर",
"it": "Footer",
"ja": "フッター",
"ko": "바닥글",
"ms": "Pengaki",
"nb": "Footer",
"nl": "Voettekst",
"pt-BR": "Rodapé",
"pt-PT": "Rodapé",
"sv": "Sidfot",
"th": "ส่วนท้าย",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"settings": [
{
"type": "link_list",
"id": "footer_link_list",
"label": {
"da": "Sidefodsmenu",
"de": "Fußzeilenmenü",
"en": "Footer menu",
"es": "Menú inferior",
"fi": "Alatunniste-valikko",
"fr": "Menu pied de page",
"hi": "फुटर मेनू",
"it": "Menu footer",
"ja": "フッターメニュー",
"ko": "바닥글 메뉴",
"ms": "Menu kaki",
"nb": "Bunntekstmeny",
"nl": "Voettekstmenu",
"pt-BR": "Menu de rodapé",
"pt-PT": "Menu do rodapé",
"sv": "Sidfotsmeny",
"th": "เมนูส่วนท้าย",
"zh-CN": "页脚菜单",
"zh-TW": "頁尾選單"
},
"default": "footer"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": {
"da": "Vis betalingsikoner",
"de": "Zahlungssymbole anzeigen",
"en": "Show payment icons",
"es": "Mostrar iconos de pago",
"fi": "Näytä maksukuvakkeet",
"fr": "Afficher les icônes de paiement",
"hi": "भुगतान आइकन दिखाएं",
"it": "Mostra le icone di pagamento",
"ja": "支払いアイコンを表示する",
"ko": "결제 아이콘 표시",
"ms": "Tunjukkan ikon pembayaran",
"nb": "Vis betalingsikoner",
"nl": "Betalingspictogrammen weergeven",
"pt-BR": "Exibir ícones de pagamento",
"pt-PT": "Mostrar ícones de pagamento",
"sv": "Visa betalningsikoner",
"th": "แสดงไอคอนการชำระเงิน",
"zh-CN": "显示付款图标",
"zh-TW": "顯示付款圖示"
},
"default": true
}
]
}
{% endschema %}

pls help?

[deeee021]

I have the same issue 

did u find a solution?

[wavefit_nz]

No, I haven't found a solution yet. I have tried a number of options and
only 1 sort of worked but icon was huge compared to others and did not look
good at all

[deeee021]

i'll play around with it today let you know if i find a solution

[deeee021 · Accepted solution]

OK I found a solution

1. Please go to the editor > footer.liquid 

2.  Find this bit of code :

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
<div class="grid__item site-footer__payment-icons">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{%- for type in shop.enabled_payment_types -%}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}

3. and add this line of code after the endfor 

<li class="payment-icon" >
<img src="https://cdn.shopify.com/s/files/1/1693/6097/t/136/assets/icon-afterpay.svg?v=4891203826450230660" alt="afterpay">
</li>

4. Now you may see that the image is small so we now have to make it bigger with CSS, go to the themeliquid

5.

Copy below

#shopify-section-footer > footer > div:nth-child(3) > div > div.grid__item.small--hide.one-half.site-footer-item-center-vertically > div > ul > li:nth-child(6) > img{

width: 100px;
height: 70px;

}

6. change width and height to your liking

[Ria1]

Hi, 

This works! Thanks so much 🙂

However, I am unable to configure the height/width of the afterpay icon. Where do i put the code 

#shopify-section-footer > footer > div:nth-child(3) > div > div.grid__item.small--hide.one-half.site-footer-item-center-vertically > div > ul > li:nth-child(6) > img{

width: 100px;
height: 70px;

} -

in the theme liquid?

[deeee021]

Yes that correct

in the theme.scss.liquid

[misssgray]

Hi I am really having trouble changing the size of the afterpay icon. I have NO coding experience but finally managed to add the icon but can you show me exactly how the code needs to look in theme.liquid after the below as I have tried a few things but cant seem to change its size. All see attached my payment icons so you cans see how small Afterpay is showing.

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

[Reuben_Tarran]

ok, ive solved mine, apart from alignment. no scss code.

in footer.liquid find (line 57 in mine)

 <div class="grid medium-up--grid--table sub-footer small--text-center">
    <div class="grid__item medium-up--one-half">
      <small>{{ 'layout.footer.copyright' | t }} &copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</small>
    </div>
    {%- if section.settings.show_payment_icons -%}
      {%- unless shop.enabled_payment_types == empty -%}
        <div class="grid__item medium-up--one-half medium-up--text-right">
          <span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
          <ul class="list--inline payment-icons">
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
              </li>
            {%- endfor -%}

after endfor, add...

<li class="payment-icon" >
<img src="{{ 'AP-RGB-sm.png' | file_img_url : '10%' }}" alt="" />
</li>

AP-RBG-sm.png is the name of the image file i have uploaded to files. change this to suit your own logo file name.

Change sizing with the 10%, i.e. 20% or 100% but my icon size doesnt change below 10%.

now to align it down a bit. If anyone can help with alignment down a bit to make it look in line that would be great.

[Mike-AU]

In some theme versions, you can add in the Afterpay reference in Theme > Edit code > Sections > footer.liquid

            <span class="methods-of-payment">
              <img src="{{ 'apple_pay' | payment_type_img_url }}" height="30" alt="apple pay" />
              <img src="{{ 'american_express' | payment_type_img_url }}" height="30" alt="american express" />
              <img src="{{ 'master' | payment_type_img_url }}" height="30" alt="master" />
              <img src="{{ 'paypal' | payment_type_img_url }}" height="30" alt="paypal" />
              <img src="{{ 'visa' | payment_type_img_url }}" height="30" alt="visa" />
              <img src="{{ 'shopify_pay' | payment_type_img_url }}" height="30" alt="shopify" />
              <img src="{{ 'afterpay' | payment_type_img_url }}" height="30" alt="afterpay" />
            </span>

In other themes, the payment list loops through enabled payment methods as Afterpay's svg logo exists in the payment methods library. By using this method, you do not have to locally store the image asset which is a preferred method to handle updates and changes.

Hope that help.

- Mike

[tdillon]

Did you ever solve this? Stuck at the same place.

[Reuben_Tarran]

In theme.scss.liquid where did you paste the section of code? is there a line# is should go in? or relates section?

#shopify-section-footer > footer > div:nth-child(3) > div > div.grid__item.small--hide.one-half.site-footer-item-center-vertically > div > ul > li:nth-child(6) > img{

width: 100px;
height: 70px;

}

Ive done this and size is not changing. hmm..

[tdillon]

were you able to resize? I am stuck at the same spot.

[Reuben_Tarran]

Yeah kind of. Had to do some codeing.

under Sections

in footer.liquid I modified it to this.

 {% if section.blocks.size > 0 %}
    <hr>
  {% endif %}

  <div class="grid medium-up--grid--table sub-footer small--text-center">
    <div class="grid__item medium-up--one-half">
      <small>{{ 'layout.footer.copyright' | t }} &copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</small>
    </div>
    {%- if section.settings.show_payment_icons -%}
      {%- unless shop.enabled_payment_types == empty -%}
        <div class="grid__item medium-up--one-half medium-up--text-right">
          <span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
          <ul class="list--inline payment-icons">
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
              </li>
            {%- endfor -%}
            <li class="payment-icon" >
<img src="{{ 'AP-RGB-sm.png' | file_img_url : '10%' }}" alt="" />
</li>
          </ul>
        </div>
      {%- endunless -%}
    {%- endif -%}
  </div>
</footer>

 the 10% is the resize to make it look similar. Positioning was hard an still have got it right.

[Daniela12]

Hi, 

Wondering if you could please help me? I have followed your instructions - below is a snippet of my code. I have also uploaded the Afterpay.png file into assets but the icon is still not showing on my page. What am I doing wrong?

{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<div class="grid-item large--three-fifths large--text-right">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
<li class="payment-icon" >
<img src="{{ 'Afterpay.png' | file_img_url : '10%' }}" alt="" />
</li>
</ul>
</div>
{%- endunless -%}
{%- endif -%}

[luma]

Hi, 

sorry I can't help you with code. when I wanted to add the afterpay logo to my site I sent a request to the support team in shopify and someone help me set it up. It was about 2 years ago, so I can remember what I did. Your best bet is to contact the shopify support team. Good luck

[tdillon]

Where do I add

#shopify-section-footer > footer > div:nth-child(3) > div > div.grid__item.small--hide.one-half.site-footer-item-center-vertically > div > ul > li:nth-child(6) > img{

width: 100px;
height: 70px;

}

thanks

[StephLShop]

Anyway i can pay you to do this for me? 

[aflywentby]

Watch this video - https://www.youtube.com/watch?v=l4JIFhZxovA

[LaraFG]

Hey, Thanks alot.
I am searching a icon code into footer to add on my shopify store page
Plus guide how to boost store speed?

[rawacefexes]

Hello @Bobby_Van_Beek

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

[BRIpothecary]

Upon looking for that code section in my theme in Liquid, I see nothing for payment icons. Is there another option? I'd love to add the Afterpay icon to my list of MOPs. We're using a custom theme that's older, so I assume that's why this is more of an issue, but any insight would be amazing. Thank you! 

[Wildwood-Eco]

For anyone visiting here more recently than the published solution (which no longer works (at least for me)), I managed to make this work by adding the following:

              <li class="list-payment__item">
                <img
                  src="https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/assets/afterpay-B5PfoQU9nQrK.svg"
                  alt="Afterpay"
                  loading="lazy"
                  width="{{ block.settings.image.width }}"
                  height="{{ block.settings.image.height }}"
                >
              </li>

in your footer.liquid file, after the %endfor% that iterates over the enabled payment methods, which will render like so:

Hope that helps! Greetings from the future!