Shopify Debut Theme Customization | Debut Theme Design Tutorial

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 use pixabay to get some related photos so we can see that based on the template here we're gonna need at least one and two bigger photos and then we're going to need about five smaller photos to go ahead and put in here in here and down here now one thing to keep in mind is we don't have to go ahead and utilize every one of these sections and i'm going to show you how you can add and delete sections but you just want to go into the design process with all of these different things in place already because it's going to make things a lot easier so make sure you have a logo select your color scheme based on the logo have a couple of wallpaper photos have about five you know maybe maybe in five to ten smaller photos they can be in your product they could be something related to your business but just make sure you have five to ten smaller photos and then make sure you just have like business details so like slogans taglines selling points uh just different type of details that we can use to go ahead and fill out this uh page with so that said i'm gonna go ahead and get started with customizing this so in order to customize the theme all we have to do is come over here to online store themes and then click customize now i already have um all of the stuff that i'm going to put in to the design all the details that i'm going to put into design prepared ahead of time which is like i said what i would recommend you do as well because getting all of this is pretty much the first half of the work done it's just getting what you're going to fill in the store with and then once you have this it's literally just about filling in and then customizing different sections and getting rid of certain sections so where we pretty much start things off is with the header so if we open up header right here the first thing we need to do is upload our logo which we can do right here by selecting an image so all we have to do is click upload and i'm going to go ahead and upload a logo right here and i'm going to go ahead and click select and then we can go ahead and customize our logo width right here so i'm going to go ahead and make it big and we can choose whether we want this centered or to the left and i'm going to keep it to the left right here and the next thing we can do is change the menu we have here we're going to just keep this as the main menu and then we can come down here to announcement bar and a lot of the time you'll just go ahead and show an announcement mark so we can kind of put an announcement up here so this is where you can put something that's relevant to your business whether that's you know like a discount you're running a promotion you're running free shipping or just any type of details really that have to do with your business so in this case uh the example design i'm going to be going for is a local cookie business so i'll go ahead and put something like this and then down here we can go ahead and paste a link if we want this to link to anything so if you are promoting like a specific sale then you could have this link to a specific sale in this case i'm going to go ahead and not link to anything and this is where the second part right here the color scheme is going to come into play so we want to make sure that our store looks fluid and looks like it kind of blends together we want to make sure that it actually looks good so in order to do that we need to have a set color scheme we can't just have random colors wherever we want so we can see how if our logo is brown then we probably want to stick to this type of color scheme we wouldn't want to come down here and make this any color like this because that just doesn't fit in at all so what we want to do is find the exact color from our logo take one of the colors from our logo and there's one of two ways you can do that one is with a photo editor like photoshop which i'm going to do right here i'm going to just use the color picker and in this case the most prominent color in the logo is this darker brown so i'm going to use that and then i'm going to take this six digit code right here and use this to match the exact color now if you don't have photoshop or photo editor you can just go on google and search up hex color finder and actually if i go really quick if we go to hex color if we go actually i believe it's hex color finder uh yeah it's this site right here so html color codes.info you can come here you can upload uh your logo like this and then you can just click and you get the same exact color code right there and we're going to be using this code for the rest of our designs we're going to go ahead and put in that color and now the brown goes ahead and matches our logo right here and as far as the text for what's going to go up here normally you're just going to decide what looks better on the background color between white or black so if we go to black i personally think that white looks better so i'm going to go back to white and now we're done with the header and i'm going to click save and we can see that now we've already got a decent amount of progress going so the next thing that i'm going to do is we're going to start looking into this section next which is right here so we can see that each one of these sections is correlated to a section on the debut theme preview right here if i click on one it takes us to that specific one so i'm going to click on the top one and we're right here so now we need to go ahead and take one of our wallpaper images so one of our bigger images and put it as the background here so we're gonna go ahead and upload this and once it loads we're going to go ahead and click select and then right here we can change the alignment whether we want it to show the top half the bottom half or the middle i'm going to keep it centered and we can choose between full width and fixed width but in this case i think full width looks better and then we can change our section height so we can make it tiny or we can make it really large in this case i'm just going to keep it as the default of large but you can go ahead and look at all these different ones to see what you think looks the best for you and then you can change the text size as well in this case i'm going to stick with large and then right here we have the heading text so this is where you just want to put something relevant to your business you can just put something like welcome or like the name of your store this is essentially where you're just going to put a greeting and then right below in the smaller text down here you can put something like a tagline so as you can see i've went ahead and put in a few examples of that right there and then we can also add a button so if we wanted like a shop now or an order now called action button we could put that in here so in this case i would go ahead under button label and it shows uh what we put here is what the button would say so if i put order now and then we have to select where it's going to link so if i click on this and i go to products and i select all products then this button we can see now it says order now and this will take us to our entire catalog of products right here and you can see just like that in a couple more minutes uh the top half of our debut theme is already looking pretty good so i'm gonna go ahead and save our changes again and we're gonna go back and now what we're going to do is go to theme settings because we can see that this button does not match the color that we're going for and there wasn't an option to change that in there and that's because we have to change it within the theme settings so we're going to go ahead and open this up and then click colors and then right here if we open up text we have the headings and links so this is going to be like this color text right here and what i'm going to do is make this all black or full black rather and you can make it uh whatever color you want to go with however i think in this case all black uh solid black looks the best and then we have this body text right here which is this and i'm going to go ahead and make that solid black as well and then the sale price this is if we put a product on sale typically red is associated with sales so i'm going to keep that as read so the primary buttons that's going to be right here so this is where i want to open this up and i'm going to go ahead and put in the same color code that we used for the announcement bar and you can see it's actually in our recently selected colors i'm going to go ahead and just select that right there and we can see that now that is already set up and now our button matches and it looks a lot better so the primary labels is just going to be the text right here and we can see that we're just going to go ahead and keep that text as white because we already determined that white text looks good right here so the next thing that we want to edit on this page is the image overlays so right here the image overlays is going to affect anything that we um have an image in the background for so we can see that it's going to affect this and it would affect like this down here it would affect this if we put text on it it's going to affect anything that we have an image with text and buttons on top of so we can see that if i change the opacity and it's going to take a second to update but we can see that it makes it very hard to see through the opacity is just essentially how thick the overlaid coloring is going to be over the image so what the point of the image overlay is to make it easier for you to read the text so the lower the opacity the more the text kind of just blends in with the background image so normally you want some opacity just that way you can see the text easier so i'm going to go back to where we were before at 40 but in this case what i'm going to do here is i'm going to change this background because i don't like this gray color here i don't think it looks as good and i'm going to change it to just black and i think that looks a lot better with the white text that makes the white text stand out a lot more so you can mess around and determine which colors you think looks the best but a black background looks good a lot of the time but it does depend on what text you're using as well so that's all we're going to edit within colors and if we come back here i'm going to go ahead and open up typography next and this is where we can change our fonts now in regards to fonts i would recommend using more basic easy to read fonts a lot of times people want to use fancy fonts that look cool which is fine but sometimes it's just a lot more of a pain to read so i will say keep your body text with a very basic easy to read font and if you're going to use a fancier like handwritten looking font then stick to using that with the headings and buttons so we can see up here this font is going to change like our headings and our buttons so like our headings and then body text is going to be all of the smaller text all of our product descriptions and things like that so to show you what it looks like i'll go ahead and change our heading to one of the fancier looking fonts and we can see that it's going to change right here so it made our heading text look like this and we can see it shows up here and shows up here and it shows up as the product names but we can see that the rest of our text is still clear and easy to read and i would recommend sticking with a clear and easy to read font for the majority of your text if you want to make your headings look a little bit different that's fine because it's bigger and it's not like a big block of text that's hard to read so i'm gonna go ahead and go back now and the next thing we can do here is go to our social media so this is where we can put in our different social media links so any of your social medias you want to just go ahead and link in here so if you have a twitter facebook pinterest put in as many as you have for your business you can just paste them right in here and then the favicon is next so the favicon is what's going to show up here and the top left corner for the site so you can see where the shopify bag logo is um you want to go ahead and put a one of you want your logo rather to be up here instead of the shopify bag so what you want is a variation of your logo that's a perfect square that has no letters or words or anything it's just like the icon from your logo so in this case i would upload it and it would just be like the cookie itself this would be the favicon and then we'd go ahead and put that in there and save our changes so at this point that's all we would need to edit within theme settings so we've already made a lot of progress here editing the debut theme so the next thing we're going to do is we're going to head down to this second section right here so this is where we if we click on it again we can open it up and this is where we want one of our five to ten smaller photos and some of our business details so we would go ahead and select an image upload and we go ahead and upload one of our um square shaped photos right here and we can go go ahead and click select and then we can go ahead and put in more details about our business here so we could go ahead and describe different things we could describe a specific one of our products well if we have one product we could describe features of that product there's a lot of different things we can put in here and there's gonna be a lot of uh differences depending on uh what you're selling so i can't tell you exactly what to put here i can only just give you a general idea which is why like i said half of the battle is doing this up front getting all your photos your logo your color scheme selected up front and having a bunch of business details ahead of time so slogans tag lines selling points uh you want to do all of this up front because if you have this done up front it makes the design process extremely easy because you have all the information you're just putting it in so as we can see here now we could go ahead and put another button here if we wanted to and you do that in the same fashion that we did up here you type in the button name and you would go ahead and choose where you wanted to link in this case i'm not going to put a button here so i'm just going to go ahead and back out so at this point i'm gonna go ahead and show you how we can actually um edit these columns and delete certain ones so in this case i could go ahead and if you want to change what this stuff looks like go ahead and let's say i want to take these three and drag it to the bottom i can click these six red dots right here and i can drag it all the way down to the bottom and we can see that now these are all the way down at the bottom but let's say i didn't want this section at all i could go ahead and click it and then just click remove and it's gone and let's say i wanted to add a different section in i could go ahead and come back in here and we can see there's a lot of different options and if you click on them you can see that it will show a preview so we can preview all of the different options right here and you can go ahead and choose what you want to go ahead and add in now in this case i'm going to just go ahead and stick with the basic layout here of debut because a lot of times uh themes come out of the box already looking pretty good so i'm going to go ahead and just stick with that so the next section here is going to be the featured collection so this is where we can feature some of our products so obviously at this point you would already need to have your products added to your store in this case i've already went ahead and added a few products to the store but if you do not have any products in your store then you're not going to be able to do this yet you're going to have to go and add products to your store and put them in a collection and then go ahead and come back actually really quickly i can show you how to um create a collection real quick so um if i go up to the shopify bag here i'm gonna right click open link in a new tab and we're gonna just go ahead and create a collection really quickly so i'm going to go ahead and go to products collections and i'm going to click create collection right here and we're just going to name this cookies and i'm gonna go ahead and for the sake of this tutorial being quick i'm just gonna manually create this collection click save and then i'm gonna come in here search products click browse and i'm going to add all three of these products to my collection click add and now the products are updated so i'm going to come back over here to this page and make sure that we've already saved and i'm going gonna click refresh and then once this refreshes i'm going to come back to the featured collection and what we need to do here is just click select collection and i'm going to select the collection that we just created and now that's going to show up right here i'm going to click select and we can see that we need to adjust the products for rows we have three products in this collection yet it's formatted for four so if i drag this over to three we can see that now that looks a lot better we can choose to show different buttons if we want to view all products in the collection we can choose to show product vendors in this case i will go ahead and keep both of these unchecked and then we can change this text up here from feature to collection to something like our favorites and i'll go ahead and click save here and we can see that the design is coming along nicely already debut theme is very user friendly it's really easy to set up and it looks really good so the next thing we're going to do is the next sections so we're gonna just keep coming down the list and at this point um you're probably already getting more and more comfortable with the shopify editor and how to go ahead and use it so at this point i'm gonna go ahead and just click select image and at this point this is where we want our second wallpaper style photo so i'm gonna go ahead and upload another one right here and we're gonna go ahead and select this and then just like up top we can change the alignment we can change the width i'm going to go ahead and keep everything as the fault because i think the view theme out of the box already looks pretty good with all of the base settings so i normally don't play with it too much and then this is where we put in some of our business details tagline slogans different marketing copy and things like that and we could create another button just like before but in this case i'm not going to so i'm going to go ahead and click save like we do after we edit every single section and we can see that we are already almost done customizing theme so now we come down here to testimonials and this is where we can go ahead and fill in different customer testimonials we have so we could go ahead and name this section testimonials or in this case i'll name it what our customers are saying and then if we open up these testimonials here this is where we can go ahead and just fill in different information this is where we can go ahead and fill in um testimonials so you would go ahead and if you already had some customer customer testimonials which i actually should have included in here as far as business details go testimonials would also be valuable to have on hand and you can go ahead and just paste different custard customer testimonials that you have in here so in this case i'm just going to type in like really quick ones just so this video doesn't go too long but obviously you'd want real testimonials that you already have that are genuine because it's normally pretty easy to tell when testimonials are fabricated but that's how we can go ahead and fill in this section and we can go back click save again and we can see that now we just have one section left so if i go ahead and select gallery down here we're editing this last section and we can go ahead and change the height of these different photos if we want to but like i said normally the default setting is going to look pretty good because the themes out of the box normally look pretty solid so if i go ahead and click an image right here select an image now this is where we want to take more of our smaller photos again and put them in here so this is where i will go ahead and take some smaller photos and upload them in here so you can upload the photo click select you can change the alignment again of the photos but in this case we will keep it minimal you can add a cache a caption right here so if i like typed hello you can see it will show up right here and it will dim the background photo in this case i'm going to just go ahead and keep the photos blank and not put any captions or anything over it and we could also paste the link if we wanted this picture to be clickable we could have it linked to a specific product as well but in this case i'm just gonna make it look visually appealing and that's it so then we come down here and we can go ahead and just do the same thing with this one we can go ahead and upload a second image click select it's good to go and then this third one we do the same thing upload the last image come in here click select and we are good to go so now i'm going to click save again come back and you can see just like that we have went ahead and completely filled out debut theme in under 30 minutes and if you want to go ahead and do more you can like i said add in individual sections over here and when you click them you can preview what they will look like and then you literally just go ahead and fill in the information uh just like we've been doing with every other section so with that said if i go ahead and come back here really quick and i'm going to just open up the store and we can see that in about 25-30 minutes we've went from the blank skeleton of debut theme we just had earlier to a completely filled out great looking home page so that's how you go ahead and customize shopify debut theme like i said half of the work is having all of this necessary content ready and set aside and saved in a folder ahead of time because if you do then you can go ahead and just place it inside of all these different sections and you can always play around with different header photos so maybe you could put like uh this bottom wallpaper on top and you can mess around and figure out which photos look best where but that is how you go ahead and customize debut theme in shopify so if you found this video helpful go ahead and leave it a thumbs up and subscribe to this channel for more content and i'll see you guys in the next

Channel: Casual Ecommerce

Views: 103,479

Keywords: shopify debut theme tutorial, shopify debut theme customization, shopify debut theme, shopify debut theme dropdown menu, debut theme, debut theme shopify, debut them tutorial, debut theme ideas, debut theme ideas diy, debut theme ideas simple, debut theme shopify video, debut theme shopify banner size, debut theme shopify logo size, shopify debut theme product page

Id: Ry_YIeg_UEQ

Length: 29min 6sec (1746 seconds)

Published: Tue Sep 01 2020