BACK

how to throw a background on your shopify

HOW TO ADD BACKGROUND IMAGE ON PAGE 2021 SHOPIFY TUTORIAL hey what's going on econ brad so i just,ha

EcomGraduates

Updated on Mar 24,2023

HOW TO ADD BACKGROUND IMAGE ON PAGE 2021 SHOPIFY TUTORIAL

The above is a brief introduction to how to throw a background on your shopify

Let's move on to the first section of how to throw a background on your shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to throw a background on your shopify catalogs

HOW TO ADD BACKGROUND IMAGE ON PAGE 2021 SHOPIFY TUTORIAL

hey what's going on econ brad so i just,had somebody reach out to me on reddit,uh it was his username let's see here i,made this,14. uh so they were,they're running a store it looks like,they're starting a clean service and,they were having issues with this,background,they wanted to see if you notice there's,a female in the background eating,salad listening to music she looks very,happy,jamming out with her salad listen to her,music,anyway so she looks really happy but,she's on every single page,right um now this is not a story view,no offense i made this not a fan of the,design,but if you need help you know who to ask,i'll help you out,so anyways we're going to this home page,and it's there we go services,the images are there so i'm going to,show you how to isolate,and you know have certain things show up,on certain pages,um that way they're not globally um you,know,it's it's i would like to make settings,for this theme to do this but this is a,quick tutorial on how to do it through,the code,um so i'm in their store and i'll just,automatically i know where to go um now,there they basically created a,background image so if we inspect,element here,and you notice so because it's behind,everything and it's even behind the nav,it's even behind the header,i we will automatically know that it's,either attached to the body or it's,attached to the html tag,and it's actually i think it's actually,attached to both,it's attached to both so there's really,no need to attach it to both,um you know you could just specify and,attach it to the body,or me personally i'd rather have the,background image inside of this,content uh container only for the about,us page but,this case it looks like they want to,have it on on you know the whole thing,now let's go figure out how to isolate,this shall we so we already know that,the image is,this right here and one quick way to go,and find where this image is,we're just going to highlight the end,extension here woman underscore,womanunderscore1.png,i'll copy that and then what we're going,to do is you can tell i already did that,and because the they're using debut,theme we're going to go into theme.css,and we're just going to go ctrl f find,and we're going to see okay,here's where they're doing that now,in most cases you'd be able you'd be,able to use liquid to filter out,check what the url is and you know if,it's a page template,if the url contains about us and but for,some reason in theme.,this theme.css.liquid it's not actually,working,i don't know why normally it would but,one thing is i noticed in thing.liquid,they already have this style tag,you know they're loading fonts we can,throw some csm css in there,already so now what we're going to do is,we're going to,copy this this code right here,copy and we'll get rid of that we don't,need it there,um or if you want to keep it there you,can comment it out the way you do that,is you highlight this,and on your keyboard all you got to do,is press alt,forward slash likes oh no my bad,ctrl forward slash and it'll comment it,up,um and then we already copied that so,we're gonna go,here gotta copy the css i'm gonna go in,here,and paste it and the formatting is a,little bit weird i don't know why,whatever it's all good,it's all good man all right you know,we'll just leave it screw it,so then what we're going to do is we're,going to do a little squiggly bracket,percent,if template contains,page and,oops and this is how you differentiate,so you can have it show up on every,single page by just doing if template,contains page,but then what we're going to do is we're,going to say if it contains if the,template,contains the word page and,the page dot url,google equals close that,let's get the page url,and then we're gonna go here i'm gonna,grab the first forward slash all the way,to the end,copy that like so,and we're just gonna paste that bad boy,right in here and then we're gonna close,this,end if,oops hit save,make sure you save this that's commented,out,and once you're done saving it's going,to go here,refresh now let's go to the home page,and see if it's there voila,we now have a image on,only our background image only on the,about this page,now guys um if you if you like and,subscribe and,comment below i will make a video on how,to create,settings so you don't have to do the,code so that way i'll create a,i'll show you how to create a custom,page template to allow you to have,background images,on each individual page and i'll teach,you how to do that but only if we get,say how about 20 likes on this video and,you guys comment and you subscribe that,too much to ask for,anyways guys that's that um glad i could,teach you something new,hopefully it helped you if you didn't,know how to do this,now you do and uh you know drop any,questions comments suggestions anything,you want,down below in the comment section and,also uh be sure to check out our,facebook page we've got a 100 and,i think 20 people in there now um we're,at like 82 subscribers now so,we're doing pretty good pretty excited,um i know things have been kind of quiet,lately,just uh you know hanging in there,baron kova and holidays and yeah,anyways guys thank you so much for,watching and uh until next time

Congratulation! You bave finally finished reading how to throw a background on your shopify and believe you bave enougb understending how to throw a background on your shopify

Come on and read the rest of the article!

Browse More Content