How to add a custom background image to any Shopify theme [Updated 2023]
Tired of the plain white background of your theme? Having a neat-looking background image on your website can be a bold way to establish your brand: a well thought beautiful image, abstract or not, carries power with it.
One important thing to understand is that most modern Shopify themes are built on top of sections, therefore adding a background image to the website itself would unlikely yield any results.
As an example, imagine you're placing lego blocks on top of an orange lego wall. Although the wall is orange, the other lego pieces will be on top of it so you won't be able to say see that it is orange. In this analogy, the wall is your <body> tag and the other pieces are the Shopify sections.
Therefore, in this tutorial we'll cover how you can add an image to both the website (the orange lego wall) and how you can add an image to each individual section (the lego pieces). At the end we'll also take a look into optimizing your image's performance.
Upload the image to your website
First things first, let's upload the image that will be shown on your website. To do this is, we'll use the Shopify store's file storage.
- From your admin page, navigate to Content > Files.
- On the top right, click on Upload Files and upload the image you'd like to use as a background. In this case, we'll use this forest image.
- Please keep the link of the image you'll want to use accessible. You may want to leave this tab open or save the link somewhere.
Adding the image to the website's body
Firstly let's add the image to the website's body, which would be the equivalent to the orange lego wall in our previous analogy. If you'd like to add the image only to a specific section instead please skip to the next part.
- From your Shopify admin, navigate to online store > themes > actions > edit code
- Click on Add a new snippet and create a snippet named exactly:
ezfy-background-image
- Paste the following code inside this newly created file:
- Replace the text that says “replaceme.jpg” with the image URL that you copied beforehand. Make sure it is also between quotes.
- Find the theme.liquid file;
- Within the theme.liquid file you found, press CTRL + F and search for:
<body - Paste the following code right below it.
{% include 'ezfy-background-image' %}
This will add a background image to the body plus all sections except the header, announcement bar and the footer. This is how it looks like on the Dawn theme:
In case this is not working, take a look at the next part where we will add an image to an individual section.
Don't forget to delete the line “{% include 'ezfy-background-image' %}” from the theme.liquid file if you won't use the code above. You can also delete the “ezfy-background-image” file if you wish, but deleting only this line will ensure that the website's performance is not impacted.
Adding the image to individual sections
Now let's add a background image to an individual section. Here is how you do it:
- From the edit code page, on the top left, click on the three dots and Customize.
- Choose the section you'd like to add a background to. In this case, I'll be adding a custom background to our copy/paste Collections Tabs section.
- Scroll all the way down until you find “Custom CSS”.
- Paste the following code. Remember to replace the “replaceme.jpg” with your image's URL:
> * { background: url("replaceme.jpg") !important; } - You should see the changes immediately. I think we can all agree this is not the most elegant choice of background for this specific section but, hey, it works!
Keeping performance in mind
In this tutorial I used a JPG image that's 1.78mb. For the sake of learning this is fine, but in a real world store you don't want to use images that large, especially as a background image.
I would recommend an image that is at most 500kb, also make sure you use .webp instead of .jpg. WEBP performs much better.
If you're working alongside a developer you may also want to look into developing a custom choice for your theme where you can implement lazyloading, add a custom field to quickly upload images at the customize page and some other additional functionalities to easily A/B test what works the best for your business.
Final thoughts
Adding a background image to certain themes may require a different approach, unfortunately it's difficult to develop an “one size fits all” solution. If the tutorial didn't work, kindly let us know in details what is the issue you are having and the theme you are using in the “was this article helpful” box. We'll do our best to keep this guide as helpful and update as possible.
More copy/paste tutorials
– How to make slideshow images stop cutting off
– How to add a collection with tabs section to any theme (copy/paste, no apps, blazing fast)
Was this article helpful?
