How to add Payment Logos to your Shopify store footer

The default payment logos that come with most themes do not cater for displaying the South African logos in the footer of your store.  These instructions show how to add the relevant logos to your Shopify store by editing the footer of your theme.  

Before proceeding with the instructions below, make sure that your PayFast account is able to accept all of the payment methods shown in the images below.  These instructions may vary slightly depending on the theme you are using.


Step 1: Choose whether you want to use the grey or colour version of the payment logos based on the supported payment gateway on your store:




Right click on the image you want to use and select Save image as.  Save a copy of the image on your computer's local hard drive. 


Step 2: Log into your Shopify admin and go to Online Store > Themes using the main admin navigation.  


Step 3: Make a backup of your theme by clicking on the button with the three dots (...) and select Download Theme file.  You will receive an email with a link to download your theme file.  Click the link and save the zip file.  You can use this file to restore your theme to its original state should you make any mistakes with the subsequent steps below.


Step 4: Click the button with the three dots (...) and select Edit HTML/CSS.  In the left navigation panel, scroll down to Assets. Click on add a new asset.  Browse to the payments logo file that you saved to your computer earlier and click Open.


Step 5: On the same left panel under Layouts click on theme.liquid.  The code for this file will load in the panel on the right.


Step 6: Scroll down through the code in the panel on the right and look for a section towards the bottom that looks like the following.  Please bear in mind that different themes might have slightly different wording or be in a different template:

                  {% unless shop.enabled_payment_types == empty %}


Step 7: Replace all the code between the 'unless' and 'endunless' tags with the following new code (copy all the brackets too) depending on which version of the logos you saved:


 <div style="text-align:center; margin-left:5%; width:100%;
display:inline;"> {{ 'image name_colour.png' | asset_url |img_tag }}


e.g. <div style="text-align:center; margin-left:5%; width:100%; 

display:inline;"> {{ 'payfast_colour.png' | asset_url |img_tag }}




 <div style="text-align:center; margin-left:5%; width:100%;
display:inline;"> {{ 'image name_grey.png' | asset_url |img_tag }}


e.g. <div style="text-align:center; margin-left:5%; width:100%;
display:inline;"> {{ 'payfast_grey.png' | asset_url |img_tag }}


Depending on your theme you might need to replace something that looks like all of the below code with one of the above sets of code i.e. all of the following code between the payment methods "div" tags needs to be removed:


<div id="footer-payment-methods">

<p>Payment methods we accept</p>

{% if settings.show_amex %} {{ 'cc-amex.png' | asset_url | img_tag }} {% endif %}
{% if settings.show_discover %} {{ 'cc-discover.png' | asset_url | img_tag }} {% endif %}
{% if settings.show_visa %} {{ 'cc-visa.png' | asset_url | img_tag }} {% endif %}    
{% if settings.show_mastercard %} {{ 'cc-mastercard.png' | asset_url | img_tag }} {% endif %}    
{% if settings.show_maestro %} {{ 'cc-maestro.png' | asset_url | img_tag }} {% endif %}
{% if settings.show_cirrus %} {{ 'cc-cirrus.png' | asset_url | img_tag }} {% endif %} 
{% if settings.show_paypal %} {{ 'cc-paypal.png' | asset_url | img_tag }} {% endif %}
{% if settings.show_google %} {{ 'cc-google.png' | asset_url | img_tag }} {% endif %}    


Step 8: Save your changes (click on Save on the top right). Check your site by refreshing the page to see that the changes to your footer are as expected.