BACK

how to resize shopify footer images

How to make your Footer smaller on Dawn theme - Shopify 2.0 Tutorials hey guys what is going on it's

Income stream surfers

Updated on Mar 23,2023

How to make your Footer smaller on Dawn theme - Shopify 2.0 Tutorials

The above is a brief introduction to how to resize shopify footer images

Let's move on to the first section of how to resize shopify footer images

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 make your Footer smaller on Dawn theme - Shopify 2.0 Tutorials

hey guys what is going on it's hamish,from income stream surfers,in the last video i showed you how to,add this kind of funky pattern,to increase your branding but there's a,problem with this and that is this,massive ugly footer i've just,spent an hour and a half working out how,to reduce the size on this,and there's probably a better way to do,it but you know this is how i do it,so without further ado let's get into it,first thing we want to do,of course is go to our,shopify store shopify 2.0 store uh,debut theme this is relevant for debut,theme this is relevant for dawn this is,relevant for any,uh out of the box theme i'm pretty sure,okay,so let's talk a little bit about how how,we actually know what we're editing,so you've probably seen this on other,videos but you just inspect here,and you try to see what is being called,and we can say that we can see that the,footer,uh is being called here but if we go a,little bit further,up we can see shopify section,footer uh class shopify section,and then if we go um,there's the base css,if i do control f and do shopify,shopify section footer,uh let's put that into here,okay it's not it's not letting me see it,for some reason i,kind of wanted to see it but okay so we,can see that it's shopify section footer,so we know that it's a section so we go,to our assets,sorry we go to our section where section,uh and then we can see footer.liquid,this is another way that you can find,out you can see that it's calling,section footer css so we go down we go,to s,i mean where is it what's going on,oh hang on oh it's in it is in assets,okay so it's in assets even though it,says section which is really confusing,okay so this is our footer,this is the css for our footer so if we,look here again we can see what's being,called we can see,footer content with two this is the,important thing here,the two underscores so we hit control f,and we look for footer content,and footer content top we can see is,being called,footer content um heading,uh footer content newsletter bottom etc,etc,so what we're gonna do is we're gonna,completely change,all of this so i'm gonna remove all of,the padding first of all,so let's just remove all the padding,from all of these,you can get rid of the margins as well,and the rogue apps and everything,this is what's making it big basically,all of this stuff,here there's another thing that we're,gonna have to do,so just give me a moment i'll be back,when this is done,okay so that is everything deleted let's,just save and see what it looks like now,refresh okay you can see that it's,significantly smaller already which is,really really good for us,but we want to make it even smaller so,how do we do that we type,height 150,px is that right did i say 150 yes,and you want to copy that and you just,want to paste it under,every um every single footer content,point uh make sure you're doing it in,the right place guys,you want to be putting it after any,original css,so like here and here,okay let's save that and see what it,looks like now,and there we go guys it's much smaller i,prefer this although,actually we've got a little bit of a,problem here which is the newsletter,personally i would just delete this um,because i think it you can just put it,anywhere,like honestly you can add a newsletter,sign up through the front end,so let's just quickly delete that um,so okay so there is actually one more,step because i checked,after i released i was about to release,the video,you have to also delete the flex,wrapping here,the reason that we have to do that is,because it it wasn't working very well,on mobile and mobile is incredibly,important obviously,so if i refresh this now should look,absolutely fine on mobile maybe it could,do with a bit of spacing but i don't,actually know how to do that yet so i'll,work that out,and i'll probably release a video on it,wait let's wave this load,okay this is the final product as you,can see all of this,is looking fine i really really like,this transparent effect probably i would,put,a space between these two but i'll work,that out in another video,i decided to leave this in so you guys,can understand what i have to go through,trying to work out,all of this stuff even though i really,enjoy it can be quite frustrating,i tried a million different things i,almost destroyed my entire,theme basically so this is another,reason why you should definitely not be,doing what i'm doing and use a duplicate,theme,when you're editing because if you're if,you're messing around like this,that and you hit save or and then exit,then it's done for life,a really really nice thing about the new,shopify,um is you can control zed and undo even,if you've left the page or even if,you've saved the page i mean,so yeah just bear that in mind and,basically in about,20 minutes i want to say i wasted trying,to work out how to do this,in the in the theme,and then i realized of course that i,could have just been,editing it on the kind of front end,editor,okay the the final step is actually very,uneventful i just removed the,only block oh this is how you do it i'm,so stupid,okay just just kill me guys,okay so that is how you make it smaller,and then that's how you remove,all of the stuff that you might not want,you can just add a newsletter,somewhere else on the page or on a,completely separate page,and as you can see personally i much,prefer a footer like this and i'm going,to go do it on my clients website right,now,and i hope this helps you out this isn't,really,it's not supposed to be like i'm an,expert shopify developer showing you how,to do things,i'm just trying to save people time,because this stuff is very time,consuming and personally i,enjoy it a lot i enjoy trying to find,out how to,you know do various things and i'm also,creating a website for a client for my,my boss actually uh so all of the things,i learn,i'm inputting onto that website i hope,this helps and i'll see you very soon,with the next one peace out

Congratulation! You bave finally finished reading how to resize shopify footer images and believe you bave enougb understending how to resize shopify footer images

Come on and read the rest of the article!

Browse More Content