BACK

how to add text under header in shopify

Add Thick Black Line Under Header Shopify 2.0 Tutorial All Themes | Dawn | Best Header Design hello

Income stream surfers

Updated on Mar 08,2023

Add Thick Black Line Under Header Shopify 2.0 Tutorial All Themes | Dawn | Best Header Design

The above is a brief introduction to how to add text under header in shopify

Let's move on to the first section of how to add text under header in 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.

Add Thick Black Line Under Header Shopify 2.0 Tutorial All Themes | Dawn | Best Header Design

hello guys and welcome to this very,simple Shopify Dawn theme tutorial in,this video I'm going to show you how to,add a black line under your header that,is much more clear and then also how to,add this white space,on top if that's what you want obviously,if you want to just bleed the banner,into the black line that's completely up,to you I'm just going to show you how to,do both of those things the code is very,simple I'm going to show you exactly,where to put the code and if you do like,this video please show that you like it,because I'm spending a lot of time,making Shopify videos and,I'm just trying to help people because,Dawn theme is quite complicated and a,lot of the videos are out of date,at the end of this video there's going,to be a playlist that will take you to,all the up-to-date videos about Dawn,theme that I'm currently making and,without further Ado let's get straight,into it so let me show you what it looks,like without the black line and without,the space so let me just,okay so this is what the default Dawn,theme looks like,um and personally I like a nice black,line and my header and then under that,black line just to keep things nice and,clean I prefer to have a big white space,that you can also see on mobile so let's,talk about how to actually do it,I will leave all of the code that I use,in this video in the description in some,kind of article I'm not sure what form,that will take but you'll be able to,find everything in the description first,thing you're going to do is go to themes,and go to action and go to edit code,and then we're going to open base dot,CSS this is relevant to all Dawn two,point uh sorry Shopify 2.0 themes,and then what we're going to do is we're,going to search,so you have to literally physically,click inside the code editor and then,search for header and then press enter,look for Section header like this okay,uh it's online two two one seven on Dawn,currently but this will change so what,you're looking for is this specific,piece of code right here,once you find this bit of code so where,it says hashtag hashtag Shopify section,header all you want to do is Click like,enter once so you're underneath it and,then you want to basically give it a,border bottom like this so border hyphen,bottom,colon 5px space solid space black and,then make sure that this little symbol,is here and then all you want to do is,hit save,and then you always want to have your,store open in another tab okay so I'm,going to hit refresh here and as you can,see there is the black line like I said,but I also want to add some white space,so what I'm going to look for now is,um Banner so search for Banner and then,we want the CSS of section image Banner,like this and then we're going to add,some margin,to the top of this Banner so not margin,bottom but margin top and we'll make it,um 2.4 REM,or is it Rim 2.4,okay it's the number first so 2.4 Ram,like that that will keep it so on mobile,it won't look weird,let's just refresh that again it didn't,save okay so there's the white space,like that,obviously this will look a lot better,with an actual image but I want to just,show that this is also,um responsive or it should be anyway,yep there you go so now imagine this is,one of your brand images here you can,see obviously you'll have your logo not,the just the C's as well it'll look a,lot cleaner on yours I promise you this,is just an example okay so it works on I,think every single device yeah it's,really really nice really really,responsive it's perfect,and yeah that's pretty much all we have,to do guys,there's going to be a lot more of these,videos coming guys I'm currently working,on a lot of stuff on Shopify so be,prepared for a lot of tutorial videos on,how to do specific things on Dawn thanks,for watching and hope this helps peace,out

Congratulation! You bave finally finished reading how to add text under header in shopify and believe you bave enougb understending how to add text under header in shopify

Come on and read the rest of the article!

Browse More Content