Shopify Dawn Theme Customization - Dawn Theme Design Tutorial (OS 2.0)
all right what's up guys this is jake in,this video i'm going to be showing you,how you can go ahead and customize and,build a store using the dawn theme with,shopify so dawn is the new default theme,whenever you set up a shopify store so,we're gonna go ahead and take a look at,how you can,set it up to make your store look good,so first thing you need to do if you,don't already have a store you can go,ahead and click the first link in the,description,and you'll be taken to this page right,here and you can just enter your email,address and go ahead and start your free,trial and we can go ahead and get,started setting up your store,so once you've went ahead and started,your trial,you're going to be taken to the back end,of the store right here and we can see,that by default the current theme is,going to be dawn so what we're going to,go ahead and do first is take a look at,the base template of this theme and then,we're actually going to start building,it out so i'm going to come over here to,actions and click on preview and now we,can go ahead and take a look at the base,skeleton that dawn provides us so we can,see here that we have a little,announcement bar up top we have our logo,we have our menu and we have the cart,and search icon we have a nice header,wallpaper right here along with a call,to action right here,we have another little,call to action with some information,right here we have,four featured products right here in,this section,and then we have a media collage that,includes a video,a collection and a product and then we,have a video section down here and then,we have a multi-column section which,includes three different text sections,right here and then we have the footer,so this is how dawn looks out of the box,and we're going to do a couple small,changes to it but mostly we're going to,be,building out this store using the base,skeleton of the theme to keep things as,simple as possible so with that said,we're going to go ahead and come back,over here and really quickly we're going,to take a look at the things you're,going to need to go ahead and build out,your store using this theme,so the first thing you're going to need,is a logo if you don't already have a,logo for your business or your brand you,can make one over here at logomaker.com,or you can come over here to fiverr.com,and search for a logo designer and get,one made for relatively cheap the next,thing you're going to need is some,wallpaper photos because we've seen,especially on the header you're going to,need some photos to use for that so,these are going to be pictures that are,related to your brand or your product,and if you don't have any of those,yourself you can go ahead over here to,pixabay.com or,unsplash.com to look for free stock,photos that are related to your product,or niche and then obviously we're going,to need product photos as well as,product details so this is something,that i assume you would already have,and then in this case we saw that there,was a video
Let's move on to the first section of Skeleton Dawn theme shopify
HOW TO SET UP DAWN THEME MEGA MENU IN SHOPIFY | TUTORIAL 2022
HOW TO SET UP DAWN THEME MEGA MENU IN SHOPIFY | TUTORIAL 2022
welcome back graduates today i'm going,to teach you how to change your ugly old,dawn theme menu and give it a snazzy,fancy mega menu now the reason why we,like mega menus they're just beautiful,they make things a lot easier it allows,your customer to actually go find it,find your your menu and actually find,the products you're looking for all the,time we see these stores where they have,these,massive menus all these different,multiple menu items on their store,it's it's all stacked and it just it's,very confusing and annoying and nine,times out of ten your customer will look,at your menu if it's that complex and,annoying and they're just gonna leave,they're gonna go find somebody else,because you know everyone,what's the one thing that we don't have,a lot of that's time we don't have a lot,of time that's the most valuable thing,on this planet is time and your,objective is to save people time,deliver the products that they actually,want without causing any friction any,disconnects nothing like that so anyways,nothing enough of me rambling about how,amazing mega menus are we're going to,get right to it so firstly what i'm,going to show you is how to structure,your menu so that way it actually works,with this mega menu system a little,different than other apps out there and,themes,this is going to be built into your,store so without further ado let's get,right to it so this is the admin backend,you should all be acquainted with it by,now if you're not,why are you watching this video so,anyways we're going to click on online,store we're going to click on navigation,and then we're going to go to the main,menu because that's that's what it is,it's the main menu,now one thing i want you to take note of,is you have these so when i'm i'm going,to be talking i'm going to be saying i'm,saying things like you know parent child,grandchild you're probably going to,think i'm talking about your family i'm,not i swear to god i'm talking about,this these are called link lists and,they have a parent item they have a,child item and then they have grandchild,child children items,again it's tongue twister right so,parent child grandchild so now the first,item is the mega menu the second item is,brew by type the brew the trio,right here and then you have these items,right here so now we have our mega menu,we have brew type,so here's the the parent,the child and then here's its,grandchildren right,so now where,this is how you have to you know,structure things you can make this,clickable right here where it goes to,your home page and this item would,actually go to well these would actually,go to products we don't have them set up,like that they're just examples for you,um now let's let's figure out how how,are we going to change this image when,once we actually have the mega menu,capabilities so what you want to do is,you want to go to settings click on,settings i want to show you we're going,to change this image out to something,else,so once you go to settings you're go
After seeing the first section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next second section about Skeleton Dawn theme shopify
Shopify Online Store 2.0 Tutorial: (Shopify Dawn theme tutorial + Metafields)
Shopify Online Store 2.0 Tutorial: (Shopify Dawn theme tutorial + Metafields)
today's video is about the biggest and,boldest update in shopify's history,ever this update is actually an,extremely good news to anyone who uses,shopify,because it allows us much more,flexibility and it gives us the ability,to customize our stores way,better and easier than before hi there i,am rehab and on this youtube channel i,share with you videos related to,e-commerce entrepreneurship and more,and today's video is about shopify,online store 2.0,and how you can use this update to,enhance your store and make it look,better,this video is a step-by-step tutorial on,how to use this new update,and how you can profit from it but,before jumping to my pc to start working,on this new update,i just need to tell you that up until,now not everyone has,this new update available on their,stores also it's very important to know,that all shopify themes will be updated,in order to be compatible with this new,upgrade of shopify,so just wait for it and soon it will be,live on your store,to be able to use this update you must,choose the new theme provided by shopify,and it's called on,and it's a very friendly user theme we,are going to use it right now,but you have to know that all of your,themes will be updated in order to be,compatible with this new upgrade from,shopify,so soon you will see a new update of,your theme and you will need to use it,in order to be able,to use the new shopify online store 2.0,update,so i'm here inside of my developer store,i have added some products,created some collections in order to,show you how you can use this new update,so the first visual upgrade you will be,able to see,is the difference in the theme editor,it's a big deal because,if you were using this before you will,notice the difference so here i am,inside of the home page and we are used,to the idea that home pages,are usually highly customizable,depending on the theme you are using but,usually on all themes the home page is,highly customizable you can add sections,you can add images,text whatever you want and usually you,can do a lot on this page,however this case doesn't apply to other,pages,so before this upgrade we were able to,modify the home page,as much as we want but we weren't able,to modify the product pages a lot or the,collection pages a lot,and now we are able to do that i'm going,to talk about product pages and how you,will be able to customize them now,but first let's start by taking a small,tour around,the new shopify editor dashboard and see,how things are now way different,so here i am inside of the home page and,these are the default sections,provided by the theme if i go in here,here i start to see the difference okay,this is not,this is not how things used to look,inside of the editor,so first if i scroll up this is the,first section i'm changing i'm,changing the image banner so i can add,heading,i can add buttons and i can also add a,text,sure here this is my limitation i can,add only three elements okay,so let me go to buttons for example to,see i
After seeing the second section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next third section about Skeleton Dawn theme shopify
HOW TO SET UP DAWN 7 THEME MEGA MENU IN SHOPIFY | TUTORIAL 2022
HOW TO SET UP DAWN 7 THEME MEGA MENU IN SHOPIFY | TUTORIAL 2022
welcome back graduates now today I'm,going to show you how to set up and,configure your mega menu for Don 7. the,reason why we are having this video is,because Don 7 has kind of changed the,way it's laid out and their and their,code and and everything so it is,different than the older versions of Don,so if you do have an older version of,Don go check out the other menu on the,other Mega menu how to install that but,for this this is specifically for Dawn,seven now there are three simple steps,for this and as always we give you a,readme file,a zip file that has you know the readme,file installation guide and then also,the RTF for you to just copy and paste,so let's get right into it so what it's,going to look like is this is the dawn 7,version right now and it's going to be,exactly the same as before however the,only difference is how to install it,because Don has changed up so much,now when you go in here you have the the,image here it's pulling the image and a,link and,as well as on mobile just like this so,what I'm going to do is I'm going to get,a clean version of Don 7 and you can,simply do that by going into free themes,and Dawn and add it to your theme,Library so that's what I'm gonna do just,to show you everything's all nice and,clean there's no Snippets no other,features so now Don 7 has been installed,properly it's all nice and clean and,there's no mega menu so to check that,out we're just going to go to preview,and right over here it looks weird and,it looks wonky so let's go into your,edit code as always,and the first step of the readme file is,gonna it's gonna tell us to add the EG,Mega menu image Js from in in my assets,what I'm going to do is go into my code,here,so I can close out of these code here,and I'm going to go down to my assets,and I'm going to add a new asset create,a blank one and select JS now the file,right over here we're going to provide,it for you and all you're going to have,to do is open that so I'm just going to,copy this,foreign,and I'm also just going to open this up,copy and paste,and I'm all set with that,so the next thing I'm going to do is go,into my theme dot liquid and right under,the closing body tag I'm going to add,this script right over here I'm going to,add the script,and I'm going to go into my theme.liquid,at the very bottom it's usually at the,very very very bottom so right after the,end if I'm going to paste that,and I'm gonna just make sure there are,no spaces with everything,like this and I'm going to click save,now the next step is going I'm going to,go into my customizer,and from here this is a crucial step I'm,going to go into my header right over,here and I'm going to,select desktop menu type and I'm going,to select Mega menu so once I click save,it should start populating the image,which it does which is great now if you,haven't had this if you haven't done,this step yet you have to go into the,navigation so it automatically pulls in,this image because I've already had a,set but if you don'
After seeing the third section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next fourth section about Skeleton Dawn theme shopify
What Is The Best Free Theme For Shopify? Colorblock Vs. Dawn
What Is The Best Free Theme For Shopify? Colorblock Vs. Dawn
color block or dawn,which free shopify theme should you be,using in your store let's find out,yo what's up everybody and welcome back,to the channel if you're brand new here,i want to welcome you and say hi my,name's carrie i'm the founder of shirt,school and i created this channel to,bring you the best strategy secrets and,hacks to grow your online t-shirt,apparel or print-on-demand business,you're probably already aware that,shopify has transitioned fully over to,online store 2.0 which was a complete,overhaul of the shopify system they,released brand new themes and also,recently they released shopify editions,which was this huge collection of new,features which i want to talk about more,on the channel but when they initially,transition over to online store 2.0 they,put out a few free themes new free,themes i've talked about those on the,channel and i've told you that one of my,favorite themes is called dawn,which i've been using in my stores and,i've been recommending to most of my,students to use that dawn theme well a,little while after that they came out,with a few more free themes and one of,those is called color block so i've been,eager to review this theme on the,channel and kind of put it up against,the dawn theme because,according to shopify they say color,block is a good one to choose for,apparel brands and as you know i like to,talk about apparel brands it's what i've,built in my own businesses and what i,help my students with so today i want to,talk about color block is it better than,dawn is this the one you should be using,if you have an apparel or a t-shirt or a,print-on-demand business so that's what,we're going to dive into today so,looking at the free shopify themes page,what what themes they have right now you,see studio dawn which i've talked about,a lot sense refresh,taste crave color block which we're also,going to talk about today,ride and then craft so as i mentioned a,few of these came out initially and then,they added more and most of these are uh,they're positioned for certain,categories so if you have a beauty brand,you know you might want to go with the,one that's really designed for beauty,like sense this one you know you see,hardware and automotive health and,beauty pet supplies so these themes are,designed for certain types of stores to,be better for each of those so the two,that we really focus on in clothing are,dawn and then this color block theme so,i want to break those down so let's,start with the color block theme as we,go just to their uh page here that kind,of shows us what color block is all,about and explains it,you see some of the main features right,here confident and colorful design so,it's very colorful ideal for a large,catalog so it's got this kind of menu,system and it says it has expanded menu,navigation so if you have a lot of,products if you have maybe a big apparel,store this might be a good one to go,with and then you see advanced,customization options so that's flexible,design customization
After seeing the fourth section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next fifth section about Skeleton Dawn theme shopify
Shopify Dawn Theme Customization 2022 - Dawn Theme Web Design
Shopify Dawn Theme Customization 2022 - Dawn Theme Web Design
hello my shopify users in this video i,am going to,show you how you can make some,customizations to the home page of dawn,theme,when i say customizations i am not,talking about moving this section hiding,one section things like that there's a,bunch of videos on youtube that cover,those type of topics,but i am going to really customize some,of the sections here by writing some css,so,first thing if you're looking at this,theme,you haven't done any changes to it i,haven't done,anything it's just the default of course,i have a logo up and these banners and,stuff but styling wise it's the default,styling so,right away what i notice is the top nav,i think it can use some help so i am,going to make some customizations to,this nav here,and then,there's a few sections here i don't like,the,the coloring,the sizing,will modify that and at the end we will,make some,changes to add some animations to this,page,all right so let's do this what you are,going to do is go in here in actions,click on edit code,on the left hand side it's going to open,all the files related to the theme,and in here you will scroll all the way,down to a section called assets and in,here,you will see all these bunch of css,files we are going to add a new asset,create a blank file,and this extension is already here so,you are going to just name it i am going,to name it as custom if you want it to,be something different you could do that,as long as you remember the name,for future reference anytime you need to,come back to it so,add asset,and now scroll all the way up to,this theme.liquid file,this is one of the main,files for the theme in here look for,base,dot css,and this area here copy,and paste it right under,and then change this to the file you,just created,now,this way what happens is when we write,some code in this file,it is going to overwrite some of the,code that is in this css file that's how,css works you have to sometimes override,what's there,so this way any point in future if you,need to remove this custom code that you,added it's very easy to remove and your,base css is still intact so,now let's go back to our custom css file,one thing very important when you modify,a file,click this save up here if you haven't,saved you will see this purple dot up,here,so save,go down,to our custom,css,right here,all right so,first we will start with some changes,for the,menu here so i'm going to write some css,so here we go guys this is,the finished css for,some customizations to,the menu and what the menu looks like,now,if you hover over,you see this cool underlying,animated,that looks pretty cool to me,next i will also like to increase the,size of this nav a little,so,what i will do is go back in the code,here and then,it's this class and then you add link,and,and,save,and,now if i refresh those changes that i,wrote in here,same they've been applied,nice,next we will move on to the sections,below so what i wanted to do was one,thing again i like the size of this but,this being the ma
After seeing the fifth section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next sixth section about Skeleton Dawn theme shopify
How to Make a Clickable Banner in Shopify Dawn Theme 6.0
How to Make a Clickable Banner in Shopify Dawn Theme 6.0
hey everybody welcome in this video i am,going to show you how you can make your,header banner clickable,in the new dawn,6.0.2 version,now this video is going to be relatively,quick,because i'm just going to function with,the image banner period that's it,if you don't know who i am i am d i'm,the design diva what i do is i create,pre-made uh professional graphic design,templates over on my etsy shop for,entrepreneurs and the entrepreneurs who,like the diy,um for their social media their shopifys,and things like that so i will put a,link in the description below so you can,go check out my work but i'm going to,give you um an example of,how you can make the image banner,clickable you're going to be messing,with some code in this and i'm pretty,sure there are some beginner developers,as well that are struggling with this,part of things especially with the new,version of the 6.02,version of the dawn theme,so if we,first things first back up your site so,if you have a site already up make sure,that you download your theme files and,things like that in case you make a,mistake you can easily upload it back,and revert or you can always keep a copy,which i always keep a copy of the,original down here and i always make a,copy of i duplicate it and then i always,work on the duplicated site i don't,never work on the real dawn in case i,need to replace it,but i digress so let's customize say,like this is your site let's customize,it,it's brand new shopify,and we want this banner clickable so,what i'm going to do let me,leave this because i was working on a,few other things but let me and i need,that up okay so because i'm going to,show you an example of where you,probably are looking online,so we're in shopify we're in the dawn,theme and this is the layout this is how,it's gonna look as soon as you open dawn,okay,so let's work on this image banner if we,were to preview,let me duplicate this real quick,and just take this out so that way we,can move a little faster,preview the site okay so if we go this,is what it looks like right now right,let me hide this banner,we want this to be clickable of course,they can click the button,but say we got a real jazzy image up,here and in our image it says shop now,and we want them to be able to click it,and do what it do i'm going to use an,example of one of my clients banners,that i created custom,as an example in this tutorial,but,you don't want the words here so let's,go ahead and let us,upload an image how about that,okay we're going to use the image that i,already uploaded and we're going to,press select,now there's several things going on we,selected our image you want to save,often,and we're going to refresh so we can,look at over here okay several things,going on right here first of all it's,dark okay we can see that it's darker we,don't want that we want the color to,shine through we also see this here we,don't want that button there because we,have a shop now button built into our,graphic we don't want,this butto
After seeing the sixth section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next seventh section about Skeleton Dawn theme shopify
Shopify 2.0 Coding Tutorial: Building on Dawn Theme [Part 1: The Setup]
Shopify 2.0 Coding Tutorial: Building on Dawn Theme [Part 1: The Setup]
today as you can see from the title we,are doing a shopify 2.0 store coding,tutorial where we are where in,we are going to build on the dawn theme,which comes,as a starter theme with shopify in this,new version of 2.0 and in this part this,part one of the series we are going to,work on the setup and i'm going to,introduce you to shopify and the store,so,not a pre-warning but before we get,started while this course will delve,into,themes and customizing them and what,that means this is also a coding heavy,course so as you can see,let's look at this we are going to be,looking through,the dawn,theme code so this is the theme liquid,and we can see,these are,uh templates that's not i'm trying to,give an example of how like complicated,it can get um there are so many,different css files to kind of mull,through,we have all of these snippets,uh we're not really going to delve into,snippets so much,what we're going to really look at are,templates,sections and let's look at a section,yeah so again this is can be complex,we're kind of just gonna,go on the surface of this this is also,i'm kind of dipping my toes in and i,kind of want to show what i learned and,have us kind of learn together and so,that's the purpose of this tutorial,series and i'm actually i'm going to,keep explaining the purpose so this is,how the dawn store starts,right and i can go back to my dashboard,again i'm going i'm going kind of fast,but i'm going to go through this with,much more depth so if i go here to dawn,and click customize i just want to show,you what a theme,is all about and how we can customize it,in this store 2.0,i never actually used shopify before 2.0,so i'm not sure of all of the changes,but i do know a new change is kind of,just like how easy it is,not the making of the template but once,you have a template in place how easy it,kind of should be to just add in,like the top image banner i can just,select an image let's see let's add that,in,and boom and then i can talk about my,brand here,and we can go back from image banner,and i can write,hey there,you know and i can save all of this,and it's just there's a lot of uh,ability to,uh customize i can even add more,sections so i could have another image,banner at the bottom,yeah and then i could even in this image,banner maybe i don't want this overlay i,don't want the buttons there,yeah so i can just have the image,okay so we are going to go from this,dawn theme once again so kind of uh,the base the basic,theme that just comes pre-installed,in shopify so you're going to take this,theme and we're going to elevate it so,here as you can see i have a similar,very similar structure but i'm using a,different typography,i think i yeah the colors again you can,change within the theme,but there are other ways within the css,maybe we want to customize some of the,colors,i also added it so there is a video,section but i made sure the video,the youtube video could be auto played,as soon as you click i don't want to,blast the youtub
After seeing the seventh section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next eighth section about Skeleton Dawn theme shopify
all right guys so in this video i'm,going to be showing you how you can go,ahead and,customize your debut theme within,shopify so debut theme,is the theme that all shopify stores,start out with,by default when you go ahead and start a,shopify store and if you haven't already,opened your shopify store yet you can,start your 14 day free trial by clicking,the first link in the description,so i figured i'd make this video because,debut theme,is one of the most commonly used themes,because it's the one that all stores,start out with and the view theme,actually looks,really good so right here we can see,that this is what debut theme looks like,when it's first installed with,absolutely nothing filled out,so we can see that we have where our,logo should be,we have a big header right here with,some text we have an image here,we have three images with text below,here we have,a uh empty collection and we have,another,um header type image right here another,wallpaper image,we have some testimonials and we have,three images down here,and then we have the footer so,right now we have a nice little template,but it's blank,so if you're looking to go ahead and,fill out,your um store using debut theme,the first thing you're going to want to,make sure you have is,a few key things so i'm going to bring,up a notepad and just make sure,because before you go ahead and start,the design process you're going to need,a couple things so the first one is,going to be a logo,so i assume you already have a logo at,this point if you're ready to start your,store design but if not,then make sure you get a logo first,because everything else is going to be,based around the logo,and then we're going to have a color,scheme selected,and normally this color scheme is going,to,be derived from colors from your logo,and typically,you're going to use one to two colors,to base your entire store around and,like i said these colors will be derived,from the logo and the next thing we're,going to need,is a couple wallpaper photos,so we can see we're going to need some,photos to go ahead and put back here in,this header,we need some photos to put back here and,this header as well,so if you have any large photos related,to your business,go ahead and upload them to your,computer or,put them all in one folder so we can go,ahead and,use them as backgrounds here and if you,don't you can use,different sites such as pixabay,to find free stock images that you can,go ahead and use,so let's just type in something like,fishing,so if you had a store related to fishing,you could go ahead and just,look for different stock photos here,or maybe you have something related to,yoga,or fitness you can type in a lot,of different niches depending on what,your store is based around,and you can use some of these wallpapers,to go ahead and put back here,now obviously i do think it's better if,you have your own,custom photos but uh you know not,everyone's gonna have that starting out,so if you don't you can go ahead and us
After seeing the eighth section, I believe you have a general understanding of Skeleton Dawn theme shopify
Continue the next ninth section about Skeleton Dawn theme shopify
The Best Shopify Themes for Your Online Store in 2022
The Best Shopify Themes for Your Online Store in 2022
in today's video i'm going to show you,how you can make one of the best online,stores out there with ecommerce themes,that are a designed to be fast and also,high converting so,shopify has rolled out five new free,themes and 65 updated paid themes that,work with online store 2.0 features,literally so exciting so i'm going to,take you guys through some incredible,shopify themes so that you guys can,decide which one is right for your,business in 2022. each one of these,offers industry leading performance and,deep customization but can we just get a,little sneak peek here okay let's look,at some of these amazing themes so first,of all look at this one this one's,called context and i just feel like it,would be perfect for someone who is,starting like a clothing store but maybe,wants a bit more of an editorial vibe,and then this one over here look at this,one this one's called loft and i feel,like it would be so good for anyone,selling home goods so that's just a,little preview but definitely stick,around till the end of this video,because i'm going to go through a ton of,themes and just discuss the specifics on,who they're good for and how they can,work for you and your business,okay guys so what exactly is a theme so,if you think about it themes are kind of,like the skeleton of your online store,it's just going to define what your,store is going to look like so for,example,in this theme over here,this has one main image for the banner,but if you look at this one it's going,to allow you to put two images for the,banner and a theme is also going to,define some of the functionality of your,store so for example when i click the,cart on this theme it pops up as a,sidebar and then when i click the cart,on this theme it's just going to take up,the whole page,so if you guys don't already know when,you create your online store with,shopify you can choose between either,free themes or premium themes and it's,really nice because there are more and,more free themes that are being released,recently so there's tons of options,there and then as of now there's also 60,paid themes and you can find a theme,that works really easily for yourself,because you can narrow it down by,industry price and then just basically,find the design that you're after okay i,know you guys are wondering are shopify,themes better than other themes out,there and i just want to say really,quickly just want to say this from the,jump shopify themes,are,amazing they're amazing first of all if,you are not tech savvy shopify themes,were going to be perfect for you because,all of the features that you need,already come built into your theme,you're probably,never going to need to hire developer,because 99 if not 100 of what you need,already comes built into your theme,but but if you are a perfectionist like,me and let's say you do want to do like,a little tweaks and like edit,you can edit your store without touching,any code so let's just look at my screen,here for one sec because i actually do,th
Congratulation! You bave finally finished reading Skeleton Dawn theme shopify and believe you bave enougb understending Skeleton Dawn theme shopify