how to change theme on shopify

all right what's going on guys this is,jake and in this video we're going to be,taking a look at how you can go ahead,and set up and customize the craft theme,within shopify and craft is one of the,new free themes,that is optimized for os 2.0 that,shopify has released recently,so we're going to be taking a look at,how exactly we can set this up here in,just a minute but before we get into the,video i want to thank this video sponsor,lai product reviews lai product reviews,is an easy to use affordable shopify app,that enables you to add great looking,product reviews to your store with just,a few clicks,product reviews are a very crucial part,of any ecommerce store as they are one,of the main contributing factors to,creating trust for your potential,customers,it's very rare nowadays that anyone buys,anything online without first looking,through the reviews and if you don't,have any this could drastically lower,your conversion rates this is where lai,product reviews can help they are the,most affordable product review app in,the app store with their lowest plans,starting at just 4.95 per month and if,you're drop shipping the app allows you,to automatically import reviews from,aliexpress oberlo or from a custom csv,file and if you're using aliexpress,reviews you can have it auto update new,reviews from aliexpress to your store,saving you the time of doing it yourself,the app also enables you to be able to,customize the display of the reviews to,fit the brand and styling of your store,as well as being able to create,automated email campaigns to incentivize,customers to come back and leave reviews,on the products that they purchased,and if at any point you have any trouble,with the app lai has great customer,support that you can contact anytime via,the chat box in the bottom right corner,overall lai product reviews is the best,value product reviews app in the app,store giving you extensive features at a,fraction of the cost of similar apps so,go ahead and click the link in the,description to check out lai product,reviews and get started with boosting,your social proof and conversion rate so,getting right into it if you don't,already have a shopify store you can,click the link in the description to go,ahead and start your 14 day free trial,so you can follow along step by step the,video,so the first thing we're going to go,ahead and do here,is i'm going to just open up the,customizer,and we're going to go ahead and take a,look at what the theme looks like by,default so we can see by default,the theme comes with these sections,right here so the first one here is this,rich text section,this next one here is this collage of,collections here,and then we have a collections list,and then we have this video,then we have another rich text section,then we have a multi-column section with,three columns of text here,then we have this multimedia collage,here that has collection and two images,and then we have a another multi-column,right here with four text sections,and then we have a blog section right,here and an email sign up down here at,the bottom so we're going to go ahead,and go through and fill all of these out,and we are going to change some of them,off and i'm going to show you how you,can go ahead and customize the sections,in case you want to actually go ahead,and use different ones,so we're going to keep a lot of it the,same but i'm going to show you how you,can branch out a little bit for it so,before we actually get started with,customizing it based on these sections,we have here,we need to go ahead and,quickly go over what it is we're going,to need to go ahead and set this up so,this theme is very visual focus so it's,going to be,and have a lot of images and stuff like,that and it's going to be very good for,being simplistic and just showcasing,your products,so in order to go ahead and design this,theme we're going to need to make you're,going to need to make sure that you,already have added all of your products,to your store and then you want to,ensure that you've added your products,to collections so that way we can go,ahead and fill out these sections here,so,if you haven't already done that be sure,to go ahead and go and add your products,to your store right now and then go,ahead and add them to collections and,then we'll go ahead and pick up with the,store right here,so the first thing we're going to go,ahead and do here is we're going to,start out with the header here on the,home page by clicking header and we can,see here that the first thing we need to,go ahead and do is add in our logo so,this is where we can go ahead and do,that so i'm going to go ahead and upload,a logo right here and in this particular,case,we're going to be using the,cookie shop example that i used in a,prior video right here so i'm going to,go ahead and upload this logo click,select and then we can go ahead and,change the custom logo with here we can,see it's definitely too small,so i'm going to go ahead and increase it,here to 250 and we can see that this,looks a lot better and we can go ahead,and change the desktop logo position,from the left to,the top left,to the top center so in this case i'm,going to go ahead and just keep it in,the top center,and then right here we can go ahead and,change which menu is going to show up,right here,so in this case i'm going to keep it as,the main menu we can see i already have,a bunch of pages created for this demo,store here we can choose to go ahead and,show a separator line if we want to,which separates our menu from the rest,of our,home page so i'm gonna go ahead and do,that,and then you can choose to enable the,sticky header which means whenever you,scroll down the header will continue to,show up on the customer screen,so in this case i'm going to just keep,it disabled because i think that looks,better and then i'm going to go ahead,and just click on save here so the next,thing we're going to go ahead and do now,is go over to the announcement bar which,is this bar right here and i'm going to,go ahead and click,on this block right here,and we can see that this is where we can,go ahead and customize the text that's,up here,and we can also,customize,the color scheme so the first thing i'll,go ahead and do here is i'll just go,ahead and put some text in here that's,relevant to our store,and we can go ahead and link to,something if we want in this case i'm,not going to do that so the color scheme,here,we can select between our different,background colors inverse or our accents,so right now i'm going to click save and,what we're going to go ahead and do is,edit these color schemes now because,we're going to need to do that because,that's going to apply to the rest of the,design,so i'm going to come down here to theme,settings and then i'm going to go up,here to colors,and we can see we have primary colors,so this is used as the foreground color,and then we have accent so used for,solid button background,we have text uses foreground color,so what i'm going to go ahead and do,here is i'm going to change the accent,color so this is going to be the color,of our buttons and i'm also going to,make the,announcement bar the accent one i'm,going to go ahead and change it to this,brown from our logo right here so in,order to get the hex code from your logo,you can upload it here to,imagecolorpicker.com and you can click,on this right here and it will go ahead,and give you this hex code so i'm gonna,go ahead and copy that right here come,over here and then i'm gonna go ahead,and paste it in,right there and now we can see that this,is now going to be our accent one and we,can see that this now changed the,announcement bar color to the brown and,it will also change any buttons we have,to browse as well,and then we can go ahead and change,other colors here like our text color,right here so in this case i'm going to,just make text solid black,and then we can go ahead and change the,outline button right here,so this is also going to be used for,hyperlinks so text in our links right,here,so this is where where you'd want to go,ahead and if you are using a specific,color palette this is where you'd go,ahead and put in each of your different,accents and stuff like that for your,color palette in this specific case for,this specific demo store i'm keeping the,color scheme very simple i'm just going,to be using black for text and then,brown as the accents and that's it,so in that case i'm going to just go,ahead and click save so now that we've,got gone ahead and edited our colors,here i'm gonna go ahead and close this,out and the next thing we're gonna look,at here is just the typography,and what we can go ahead and do now is,we can go ahead and choose a font that,works with the branding of our store,here so we can go ahead and change our,font for all of our headings right here,so we can see we have headings font and,then we have body font,so we can use two different fonts if we,want,so we can see by default we have the,americana on this theme now if we wanted,to change it we could go ahead and look,through these different fonts,and we could choose one that we like the,look of and that we think matches the,look of our branding now in this,particular case i'm gonna just keep the,fonts default to make the video as,simple to follow as possible but you can,definitely spend some time in here to,change the fonts and edit them as you,please and then everything and then most,of the other stuff in here you don't,have to worry about too much a lot of,it's advanced editing we're not going to,cover this video uh the one thing that i,would recommend doing here is going down,to the favicon here and selecting an,image to go ahead and upload as your,favicon and the favicon is just next to,your website name on the top of tabs so,you'd want to go ahead and upload that,so go ahead and upload one really,quickly and it's typically just going to,be the icon version of your logo,and then i'm going to go ahead and just,click save and beyond that we're not,going to mess with any more of these,settings here we're just going to go,ahead and do that,and now we're going to go ahead and come,back over here and get back to actually,editing the home page here so the next,section we have to go ahead and look at,is this rich text section right here so,this is going to essentially serve as a,header for this theme here,so we just have to go ahead and fill in,this text with,different,information so whatever website copy you,want so in this case i'm going to just,put in a heading like this we can change,the heading size we can make it small,medium or large in this case,i'm going to keep it medium and i'm,going to click save and you want to make,sure that you're frequently saving all,the time,so that way in case your internet cuts,out or something you don't lose your,progress and then we can click on the,text right here to edit the text below,this right here so i'm going to go ahead,and,just put some text in here as well,and save and then what we can go ahead,and do here is we can see we also have,an option to go ahead and add a block,so we can see i can add a button as well,to the bottom of this so i'm going to go,ahead and add this button right here,and i'm going to go ahead and just,change,the text to order now,and if you click on button link we can,choose to go ahead and link to,a particular page on our store so this,case i'm going to go to products and i'm,going to just go ahead and make this,link to all of our products right here,and i'm going to click save,you can see we've went ahead and created,this first section here,in just a couple of seconds and the,store is already looking a bit better,so now i'm going to go ahead and come,down here to the collage section so,right now by default this collage just,has two collections in it right here so,we have this collection on the left,collection on the right if we were to go,ahead and add another collection here,you can see that it's going to change,the layout of it right here,but what i'm going to do with this,particular collage is i'm going to,actually change the default settings a,bit,so i'm going to actually remove,both of these blocks,by clicking on them and clicking on,remove at the bottom and now we can see,the collage disappeared because that has,no blocks in it so i'm going to click,add block and in this case i'm just,going to put a singular image,in this particular block,and what i'm going to go ahead and do,now is go ahead and select the image,upload it,and i'm going to go ahead and put in,just,a photo of some cookies here as it goes,ahead and loads up and in this,particular case this would probably be a,good place to go ahead and have like a,custom banner advertisement or something,like that on here so maybe if you had,something on here with like,um like a header with some text on here,where it's,saying something about like your,specials or something like that this is,where you can have like a design or,something create something custom for,this particular spot on the site however,i'm not going to do that in this video,because i don't want it to take too long,so this image would just serve as a,placeholder,and it looks fine anyway,so we can see that's how easy it is to,go ahead and edit these individual,sections so now we're going to come down,here to this collections list so in this,particular collections list here,we can see that by default it comes with,three collections and we can add more,so what i'm going to go ahead and do,here is i'm going to add a heading to it,so we can,i'm going to just type in here our,favorites,and we can go ahead and change the,heading size on this if we wanted to as,well so in this case i'm going to go,ahead and go medium,and in this particular case i'm going to,go ahead and come down here to section,padding here,and i'm going to go ahead and increase,the top padding a little bit and we can,see what that does is it just increases,the space between the top of this,section and the bottom of this one and i,think that looks a little bit better,since it's spaced out because if we go,like this,this is a little bit too close and it,doesn't look very separated so in this,particular case i'm going to increase,let's see what 68 looks like i think,this looks a bit better so i'm going to,keep that at 68 right here,so now what i'm going to go ahead and do,is i'm going to click on this first,collection here and all we have to do is,click on select collection and pick one,of our collections,so i'm going to go ahead and pick this,one right here,and i'm just going to click on select,and just like that we've added a,collection here the next one here i'm,going to click on this collection i'm,going to click select we're going to go,ahead and add another one,and then i'm going to click select again,and we can see how quick and easy it is,to really fill in our entire store as,long as we already have our products and,collections already created so i'm going,to go ahead and click select right here,so what you've noticed here if you were,actually looking at my collections list,you can see i put in three collections,here but i actually have four,collections in the store so in this,particular case i would want to go ahead,and add another collection to this list,so i can go ahead and do that here just,by clicking on add collection,and i can go ahead and click,select collection here and i can go,ahead and click on the sugar cookies one,click select,and we can see that now i have all four,of my collections listed here however i,don't really like that it's aligned,three on top and then one by itself on,the bottom so i'm gonna come back here,to collection list,and we can go ahead and edit this option,right here that says number of columns,on desktop so we can see right now it's,set to three but if i were to move it to,two,we can see that now it is in a two by,two,but in this particular case this is a,little bit big so i'm gonna compare that,to what it looks like if i were to,change it to four,and now we can see i personally prefer,this look better where we have all four,of the collections right here so you can,go ahead and tweak the number of columns,on desktop,based on how many collections you,actually have and what you think,personally looks best and then i'm gonna,go ahead and click save and obviously on,mobile if i were to change the view to,mobile no matter what they're always,going to be stacked because the mobile,screen is a lot smaller,and one thing you should definitely be,doing is while you're editing the site,throughout the editing process you,should switch over to mobile to make,sure everything looks good on mobile as,well so i'm going to go ahead and go,back to desktop here and now we're going,to take a look at this next section here,which is the video,so i'm going to click on this here,and this is where we can go ahead and,add a particular video,to,our,page so what i can go ahead and do here,is i can go ahead and just put in like,how,it's made,for example and i can go ahead and link,to a particular youtube video right here,so in this case i'm gonna go grab one,really quick so i'm gonna go ahead and,paste this video in right here and then,we can go ahead and select a cover image,for this video if we want so i can go,ahead and,just upload an image for this really,quickly,and i'll just upload this right here,and click on save,and i'll change this to,because i think that looks a little bit,better i'm going to change the heading,size to make it a little bit bigger,and then i'm going to go ahead and click,on save here,so now we've added a video into our home,page just like that so what i would,recommend doing here for the video,section is you can you can just upload,any type of video you want to a youtube,channel that you have for your brand and,you're just going to go ahead and put,the link in right here,so the next section we have here is,another rich text section so just like,this one up here,but in this particular case i'm not,going to use this section because i,don't want to use it right now because,i'm going to have text right here so i,don't want to have them both right here,so in this case i'm going to now show,you how you can go ahead and remove a,section,from the craft theme,so in order to remove a section all you,have to do is click on the actual,section here come down here click on,remove and then just like that it's gone,so now that leaves us with the next,section here of this multi-column,which contains three different columns,of text right here so we can go ahead,and put whatever we want in this section,here in this case i'm going to go ahead,and use this for,product reviews because i think that,that is something that would work out,really well in this section right here,so if i were to go ahead and click on,the multi column i could type in,something like what power,what our customers are saying,i'll change this,to,medium again and then i will come down,and edit each individual column here so,we can see we have the column heading,and then we have the column description,so the heading could just be,in this case someone's name,and then the description in this case,could be,their review,so i'm gonna go ahead and do the same,thing for,the next two sections right here,so i went ahead and filled out each one,of these sections here with the,different product reviews,and obviously you would probably have,longer product reviews in here as well,and you can see that we can also add in,images to these sections if we wanted so,let's say i just put in this image right,here you can see this image would show,up so you can use these multi-column,sections for a lot of different things,in this case i'm using product reviews,but you could use this for like product,features or a bunch of different things,like that or like,different benefits,of your specific product and everything,so there's a lot of different options,that you can go ahead and use with this,multi-column section right here,so the next thing that we have now is,this next multi-column section,so we can see here that this time i,already put all of my collections,up here previously,so i don't really need to use this next,collection section right here so if you,have more collections you could put,another one right here but in this case,i don't,so in this particular case what i'm,going to go ahead and do is click on,this collection i'm going to remove this,block and then i'm going to add a block,and i'm going to just add a third image,in here you can see that we could add a,particular product or video as well so,depending on how you want to set it up,you can do that,but i'm going to go ahead and just add,an image right here,so i'm gonna go ahead and clear on this,first image and i'm gonna just select an,image right here then i'm gonna go ahead,and upload one right here and i'm gonna,click select and then i'm gonna go ahead,and click the second image and i'm gonna,go ahead and upload another one right,here once it uploads click select,and go to the third one,click another image,and i'm gonna put this last image in,here,i'm gonna click select,save it and now we can see we have three,different images right here and in this,particular case i just want the images,to be here,on their own so i'm going to get rid of,this heading title right here i just,want the images here and that's it,so,that's what i'm going to go ahead and do,by getting rid of heading so moving on,to this next multi-column section here,let's say we wanted to go ahead and do,something different from reviews let's,say we wanted to do something like,features or benefits or something like,that so what i'm gonna go ahead and do,here,is i'm gonna remove,uh the third column,i'm gonna change the number of columns,on desktop to three,and then i'm going to come in here click,on this first column what i'm going to,go ahead and do is i'm going to use,icons this time so i'm going to go ahead,and select an image,i'm going to upload an image here,and i'm going to use this particular,icon right here i'm gonna click on,select,i'm going to get rid of the description,and just put the heading as fresh,and i'm going to go ahead and click save,and then i'm going to go ahead and do,the same thing with this one except i'm,going to use a different icon,and then i'm going to go ahead and add,in one more icon right here and the,third one,and i'm going to go ahead and click save,right there,so we can see that this is another,different way that you can go ahead and,utilize the multi-column,section of the craft theme so we can see,we used it for reviews up here and this,time we used it for different icons,showing,different details about our store if i,go ahead and go to mobile we can see,what it will look like on that how it's,stacked up on top of each other right,here,so i'm gonna go ahead and go back to,desktop now and we can see the last,section that comes with the store here,is the blog post section here so what,this we're going to do is just show the,most recent blog post that we have if we,have any blog posts in this particular,case,i don't have any blog posts so if you,don't have a blog then you can go ahead,and click on this and just remove the,section right here,so i'm going to go ahead and do is,replace that section with something else,so now i'm going to show you how you can,actually add in other additional,sections so if you click on add section,right here we can see we get a bunch of,different options here of different,types of sections that we can go ahead,and add in,so you can see we have a lot of the ones,that we already use like blog posts,collages collection lists we can add in,a contact form we can add in custom code,we have the email sign up we can add in,future products and collections in this,case what i'm going to go ahead and do,is add in,image with text so this is going to be,an image on one side with text on the,other side,so what i'm going to go ahead and do is,i'm going to go ahead and click,on the select image right here so we're,going ahead and editing this image with,text i'm going to select an image and,what i'm going to use this section for,is i'm actually going to,use this as a map so it's going to be,show our location obviously this is not,a real location and i'm going to go,ahead and use this as the location of,the cookie shop right here one thing you,can see that when we added the section,in it actually put it in at the bottom,right here that put us down below our,email section which i don't want it to,be,so if you want to actually change the,orders of the sections all you have to,do is click on these six dots and you,can drag and drop it and you can see you,can put it anywhere you want so i'm,going to just put it right back above,the image with text right here,so once i go ahead and select this image,i'm going to go ahead and click on the,text section right here so this is going,to be the heading,and i'm going to just put get in touch,right here,and then we can come down here and take,a look at this text right here so in,this case,i could put in something like phone,number,email,and then let's say i could put in store,hours,so there we have some example store,hours here and i'm gonna just go ahead,and click save and now what i want to go,ahead and do is click on this button,section right here because i don't,actually want this button right here,because we already have all the info we,need here we have the picture of where,we're located and we have all of our,contact information in our hours so i,just want to go ahead and remove the,button block right here,and we'll go ahead and have this,information,right here and that's it so now that,we've created this custom section if you,want to create any more custom sections,you can go ahead and do the same thing,to go ahead and do that,and then lastly the last section here,that comes with the theme here is going,to be the actual email signup here so,this is where we can just go ahead and,try,and get people on our email list so in,this particular case you can just go,ahead and change this copy to whatever,you want you can maybe give people a 10,off discount coupon or something as,incentive to sign up for your email list,right here and you'll be good to go so,i'm not going to edit this right now,because that's going to be up to your,personal preference and then we can come,down here to the footer and this is the,last section on the store,so we can see here the footer here,by default is going to have the,footer menu right here so we can see if,we click on quick links right here we,can select a menu that we want to go in,and use for it so in this particular,case i'm using a footer menu and i,normally just put in my pages like the,privacy policy terms of service and,refunds and returns in this section,right here and then we can see here that,this other section here is a heading,section so we can go ahead and put in,different information in here,that we want to go ahead and do,in this particular case,i'm just going to go ahead and remove,the heading section,and just leave our links here at the,bottom and that's it,and you can go ahead and add different,blocks in here if you want but i'm going,to go ahead and leave it blank so i'm,going to go ahead and click save,and then lastly what i want to go ahead,and do is just open up mobile again and,just quickly look through everything on,mobile to make sure everything looks,fine,and it does so we're good to go so i'm,going to go back to desktop it's now,what i'm going to go ahead and do here,is back out really quickly and i'm going,to open up the store,just so we can take a look at what we,just did so we can see in just about 30,minutes we went ahead and completely,filled out the craft theme and created a,good looking store right here and we,could see that we were able to add in,our own custom sections that we want,and we can go ahead and customize the,theme to our liking depending on the,type of desired look we are going for so,like i said craft is a very useful theme,it's a new free theme within the shopify,store using online store 2.0 so it's a,good theme to know how to set up so with,that said if you did enjoy this video,and find it helpful be sure to leave a,thumbs up subscribe to this channel for,more content and i'll see you guys in,the next video

Congratulation! You bave finally finished reading how to change theme on shopify and believe you bave enougb understending how to change theme on shopify

Come on and read the rest of the article!