How do I add a graphic that appears on every page on my site?

New Member
4 0 0

I'd like to add a graphic that appears at the base of all my pages (above the footer in the main section of the page) but can't figure out how to do it. I am using Minimal Theme so it's sectioned - can someone please walk me through which .liquid files I need to add the graphic to (or if there is an umbrella one that adds to all pages) and also once I upload the graphic to the 'files' section in my 'settings' what language do I then use in the .liquid sections to point to the graphic in that location. I hope that makes sense, thank you!

0 Likes
Shopify Expert
265 1 13

Hi Connie,

That would require a little bit of magic. You should add it in theme.liquid and ti will appear everywhere.

Jarvis @ Kaleido
- Slow Shopify Store? Install our PageSpeed Magic app.
- Have more questions? Feel free to email me.
- My reply helped? Click Like to show me some love!

0 Likes
Shopify Staff
Shopify Staff
558 4 89

 Hey Connie,

The most reliable way to way your image to every page of your store, would be to upload the image into the Assets folder of your theme, and then use HTML to include it on the theme.liquid file. 

First things first, you will want to go to Online Store > Actions > Edit Code and click on the Assets folder of your theme, where you can add a file:

Now you can upload your preferred image, but take a note of the file name, eg: red-rose.jpg. Next, you will move to the template folder where you'll find the theme.liquid file. In this file you will be looking for {% section 'footer' %} which is on line 105 of my version of minimal. To include an image from your assets folder, you would add a line of HTML just above {% section 'footer' %} which looks like: 

<img src="{{ 'FILENAME.jpg' | asset_url }}" alt="alttxt" >

In my case the code is:

<img src="{{ 'red-rose.jpg' | asset_url }}" alt="red-rose" >
{% section 'footer' %}

Now the image appears directly above the footer on every page of my store:

As you can see, the image here is left aligned by default, but I can use some simple styling to center this. One option is to wrap the code for the image in a container, so it could look something like this:

  <div style="text-align:center">
    <img src="{{ 'red-rose.jpg' | asset_url }}" alt="red-rose" >
 </div> 
{% section 'footer' %}

So the final effect would be:

I hope this helps Connie- please let me know if you have any other questions.

Liam :)

0 Likes
New Member
4 0 0

Thanks Liam - its working but I can't get the image to display in its entirety on mobile - it's getting cut-off on the right hand side when I centre it. It looks perfect on desktop. Not sure what size to make it to ensure it works on both platforms. Thank you! 

0 Likes
Tourist
9 0 0

I love this option. it works great. Is there any way to just get it on a few pages instead of every page on the site?

0 Likes