Follow

How to add PayFast payment logos to your 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 }}
</div>

 

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

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

 

OR 

 

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

 

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

 

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 %}    
</div>

 

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. 

 

If you have any problems with adding these logos please contact our support team in the office on 012 940 1060 or email support@uafrica.com and we'll be happy to help you out.

 

Comments

  • Avatar
    Anthony Terblanche

    I am using the "Supply" Shopify theme.
    I am fairly computer literate and have followed the instructions verbatim but do not find any code that looks like that in the editor.

    How do I change the footer payment logos to reflect the payfast logos?
    Please can you assist - I am driving myself dilly with this

Powered by Zendesk