How do i add image in footer of supply theme just below Get in Touch?

Solved
Tourist
5 1 0
0 Likes
Highlighted
Tourist
5 1 0

I added this image using this post:https://community.shopify.com/c/Shopify-Design/Adding-image-in-Supply-theme-Footer/td-p/352036

The code i used is this

       <div class="grid-item seven-twelfths text-right">
        <img src="{{ 'yourimagename.jpg' | asset_url }}" alt="Image name" />
      </div>

0 Likes

Success.

Tourist
5 1 0

After a lot of trial and error i found a solution

Step 1:First go to themes--->>>Action--->>>Edit Code

Step 2:Go to Assets--->>>Create a new asset

Step 3:Upload the image which you want to add in footer

Step 4:Add the following code after line 45(line 45:{% when 'text' %}).You may have to experiment with this a bit depending on the position where you want to insert the image.

<div class="grid-item one-half text-left"  style="margin-left: -40px">
<img src="{{ 'image-name.png' | asset_url }}" alt="alt text" />
</div>

Note:There are few things in the above code you must understand

1.one-half denotes the size of the image with respect to footer.You may have to experiment it with other fraction values like two-thirds one-quarter seven twelfths etc according to your desired size.

2.Here margin-left denotes the margin i gave to the left of the image.In my case i had to give it negative 40 margin in order to perfectly align with the headerScreenshot (312).png

AFTER GIVING -40 MARGIN

Screenshot (311).png

You can see that after giving  -40 margin my image is perfectly aligned with the Get in touch header.You may have to give a positive or negative margin depending on the circumstances.I gave negative margin because even after setting the left margin to 0px nothing happened.You may choose margin-left or margin-right depending on the circumstances.

3.The ONLY thing you need to replace in the above code is image name.png with your image name and format.For example image.jpg or pic.jpeg whatever your photo name is.You can also replace "alt text".But if you are feeling overwhelmed just leave it as it is.

0 Likes