How To Add Background Image To Shopify Store (2024) Full Guide

How to add a background image to your Shopify store

Hey guys, welcome back. In this video, I'll be showing you how you can get started with adding

background images to your Shopify store. So let's get into it. Now, one thing to keep in mind

is that this video is going to have a little bit of code, but don't worry because I'm going to

break it down for you guys. I'm going to leave this code in the description box down below

and you don't have to code at all. You just have to copy and paste this and I'll break it down exactly how

you have to do that so don't worry at all now let's get started so what do I mean by

the background a lot of people think oh you can just replace the image this is the

background isn't it no when I'm talking about the background of my Shopify

store I actually mean the entire background so you see this padding on the right

and left all of that is included in the background my header does not have

color so this is also just a part of the background and my background is plain

white so to customize this and add my own image or you know my own background one thing i need to do

is to upload my image so i have this image that i want to add or maybe this one and if you want to

upload your own image just go into file mill.com and you can click on add files and you can choose

whichever image you want to make as your background there could be any image you can just open that up

and click on send and once you upload your file you can get a link

that you can use in your Shopify store that we're going to be using to actually integrate this

as the background now how do you add the background well the first thing you have to do is click on

your online store on the left panel once you click on online store over here you want to click on

these three dots over here and click on duplicate now the reason that we are duplicating our store

is because if you ever mess up the code of your store you always have a pre-executive

existing backup or a copy of the original code and you can restore it back to its original state instead of having to worry later on that if you ever just mess up anything you have a pre-existing copy to go back onto now after this what you're going to do is you're going to click on these three dots and then click on edit code now this will open up the code editor of shopify and you will see multiple different sections you have your layouts you have templates sections snippets configure

locales and assets Just click on assets and within assets you will find the second option or the first option maybe which is going to be base dot csss i just going to open up base csss now in base dot csss you want to scroll to the bottom and once you scroll to the bottom what

you're going to do is you're going to take this code over here you're just going to copy this code and i'll

leave this code in the description box down below and what you're going to do is you're going

to enter give it some space and click on paste over here now once you do that you're going to

see your background color, background position, and then your background image. In this section over

here where it says copy here, you're just going to insert the URL that you have of your

particular background. We're just going to click on copy. And once we click on copy, we're going to

paste it and replace the copy here section. Now I'm going to click on save on the top right. And

now let's take a preview of our store. So this is our store and we have to

have our link added so make sure that your link has been added and now we can edit the code

once our code has been edited the background should appear if you're having issues with your

background so i edited the code on this and just to make sure i'm going to go back into my

section over here and scroll down yeah so we have our image added and i'm going to go on ahead and

preview our store now you guys can see the image is not being added the reason for this

might be your file size if the file size is too small then your image might not be added

to your store so it's better to just wait a couple of seconds to make sure if your

image is loading up or not and then you can view your online store to take a look

now if your image has too much of a lower resolution then it's not gonna get

added but i'm going to click on customize i'm going to click on these three dots and click on

edit code and then you can go back into the assets within assets you're going to go into base csss

and base csus just scroll down and once you scroll down you're just going to add this code

so we're going to remove all other sections and then just copy this and then add it

over here and then you are going to copy image address and then you're going to

paste it over here like this so now I going to click on save and once you done that you should be able to see your particular image that is going to be shown in the background so I will take a higher resolution

image because the images that I have previously used have been a bit more of a

lower quality so if I go ahead and go into Google and just search for background

because those are obviously made in higher resolutions let's take this one over here

I'm going to click on Open Image and New tab. And I'm just going to copy the image link and we're just going to view our store right now

And then going back into our code, clicking on Edit Code, going into the base CSS, scrolling down

and then inserting our URL over here like this. I'm going to click on save on the top right

And then I'm going to click on Preview Store to be able to. to see whether or not our changes are being made to our store so make sure you also keep in mind

the border attachment the background variation your background color you have transparent we're just

going to remove that we can click on format and click on preview store now if you're having images

or if you're having issues with adding your images depending on the resolution and whatnot we're

we're going to add a alternate code instead so if you want to set up the background image you can go into

c ss background image property and you are just going to copy this code over here and you can go

into your store click on the three dots and begin editing the code once more and once you edit the

code you're going to go back into the same thing you're going to go into your assets so once you're

you go into assets go into base ds.s. You're going to scroll down. And then you're going to

click on this code. And after that, you can copy the image URL. And instead of paper Jif, you can

add whatever it might be. So I've just added this URL. And then you're going to click on

save over here. So after going through a couple of changes, I realized that we skipped

out on a dot in our code that we created. So that is why we were facing some issues. Now

I know a lot of people might be thinking that hey if I skip out on a dot is it going to ruin my website As you guys just saw it wasn doing anything because it wasn actually you know appearing in my code So you have to make sure you copying the first dot that you have

in your code. And then you're going to click on over here. I've already, you know, added the image

but I'll show you guys how to do it again. So I'll just take any random image. I'll just search

for backgrounds over here. And let's take, um, just taking a look at some of the backgrounds

this one over here I'm going to open this image in a new tab you can choose any image

that you want or that you might have created and try to make sure it's a high

resolution image simply because otherwise it's going to copy and paste the same image

over and over again so that can be a bit annoying to look at so I like to make

sure that the image is larger in size let's say for example if it's like this or

whatever you know even if it's like a plain color I just want it to be larger in size I'm

going to open this image in a new tab and now I'm going to click on edit code I'm going to go into

assets going to base CSS scroll down and I'll just cut all this and then I'm going to copy the same

code again making sure that I'm copying my entire code and then I'm going to copy the image link

that we have and then go back into the section over here and click on paste and then we're going to

click on save on the top right and once you've done that we can click on preview store and you guys can

see the background has now been replaced with this image so wherever i hadn't added any image or

background it's automatically adding our default background which is now this image so in this way you

you can add your own background images now if you want to make these more you know precise then you can go on to w3 schools

dot com over here you can actually find multiple different types of you know codes and you can just go on ahead

and copy these codes like this and you will be able to see how it's going to appear and you can make

your backgrounds more customizable you can go into the CSS codes and if i want a CSS image if i

I want dual images like this. I can just open this up and then I can copy my code over here to enter my URL and enter my own customized code elements into my Shopify store

So I hope you guys found this video helpful. If you did, make sure to leave a like and subscribe