Adding image or logo in footer (For old themes only)

In this article:

💡 For old themes such as Candy, WAVE, LUCKY, X-Force, Mine Style, Dreams Bedding, The Summer, Advanture Camping, Happy Kitchen, and Flower & Tea House only

Introduction
Get ready your image or logo URL
Steps to add image or logo in footer



⚠️ Kindly take note :
Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Introduction

By adding footer image or logo such as company logo, awards, certifications or memberships, it helps build visitors trust in your web store. With a clickable image or logo, you can even direct them to the related pages.

2. Get ready your image or logo URL

Step 1 : Before you start, please make sure that you already have a URL link to your image or logo. If you do not have an existing URL link, you can create and obtain one by uploading the image or logo to your store storage.

Step 2 : Go to Admin > Products > Add product > in 'Description' box, select 'Images' > Add image > Upload image > copy the 'Image link'.

3. Steps to add image or logo in footer

Step 1 : Go to Admin > Channels > Online Store > Edit Source

Step 2 : Go to layout > layout/theme.liquid



Step 3 : Search for {% include 'social-links' %} ( usually it will be at row 246 )



Step 4 : Below this line, paste code below (choose with or without link). Don't forget to insert your own page and image or logo URL link.

(i) With Link
( when visitors click on the image or logo, they will be directed to another page )
<a href="yourpageurl" target="_blank"><img style=“width: 100px;” src="yourimageurl"></a>

(ii) Without Link
( unclickable image or logo only )
<img style="width: 100px;" src="yourimageurl"/>

Step 5 : If you would like the image or logo to be located at the right side, you may use the codes below instead.

(i) With Link
<a href="yourpageurl" target="_blank"><img style="width: 100px; margin-left: 100%;" src="yourimageurl"></a>

(ii) Without Link
<img style="width: 100px; margin-left: 100%;"src="yourimageurl"/>

Step 6 : Save and done.

💡 Tips :
If you want to adjust the size of the logo, you may adjust the number in width: 100px
If you want to adjust the position of the logo by redirect them to middle or not too side, then you may adjust the percentage number in margin-left= 100%.

GIF 1: Create and obtain your image or logo URL



GIF 2: Add image or logo in footer

Updated on: 10/10/2023