how to build shopify theme

all right what's going on guys jake and,in this video we are going to be,setting up and customizing the taste,theme,by shopify so taste is one of the new os,2.0 themes that is free for all shopify,stores so if we open up this demo store,really quick we can see what it looks,like as a demo here so it's really good,for like food and drink type of products,and stores so i'm going to go ahead and,show you how to set this up here and,just a minute but before we get into the,video i want to thank this video's,sponsor grow wave grow wave is a shopify,app that acts as an all-in-one marketing,platform for your store the app includes,a bundle of tools such as reviews,loyalty programs gift cards a wish list,social login instagram and user,generated content this makes grow wave,an excellent value for money,since it is basically replacing over,five different apps and bringing you all,of those features together in one place,at a discounted price,the app is built exclusively for shopify,stores so there's no coding required for,setup it's easy to use and very,customizable growwave helps to address,multiple needs in your store with its,array of tools reviews gift cards and,user generated content all help to build,social proof and boost conversion rates,while loyalty and rewards programs help,to increase the lifetime value of each,customer and wishlist and social login,help to drastically improve the customer,experience while they are on your store,and if at any time while using the app,you need assistance they have 24 7 live,chat support,grow wave also has a slew of positive,reviews scoring a 4.9 out of fives on,the shopify app store with over 1500,reviews and counting and they are,trusted by many large shopify brands,such as boeing unilever crocs forever 21,and more,as for pricing grow wave offers many,different plans that are based on the,amount of order volume you are getting,in your store with the lowest plans,starting at 9.99 per month,each plan comes with a 14 day free trial,but if you use the link in the,description you will get an extended 30,day free trial of grow wave for any,plant size so check out grow wave by,clicking the first link in the,description all right so we're going to,go ahead and get started and the first,thing i want to go ahead and do is take,a look at what the theme looks like bare,bones here so i went ahead and installed,the theme onto this sample store right,here and we can see that this is what,it's going to look like when we've done,absolutely no customization whatsoever,so we can see here we have this image,with text here up top,then we have a featured collection,we have a slideshow right here with some,text,we have a list of collections we have,another image with text we have a,specific product here we have a,multi-column section we have another,feature collection and then we have our,footer,so we're going to go ahead and fill out,every one of these sections step by step,and i'm going to show you how you can,actually move the sections delete the,sections or add a,different section if you want to go,ahead and do that,so after looking at this there's a few,things that you're going to want to have,ready ahead of time so the first thing,obviously you want to make sure that you,have like your store's branding and,everything so you want to have like your,logo and your color scheme that's going,to match your logo and stuff like that,and then you also want to,have already added your products to your,store and then you want to go ahead and,put those products into collections,and i have other video tutorials showing,you how to do that if you don't already,know how to do that so once you've went,ahead and you have all your branding,stuff and you have your products and,collections set up on your store,you can actually go ahead and get,started setting up the actual theme so,we're gonna just go ahead and go from,the top down here so the first thing,we're gonna do is start up here with the,announcement bar,so in this particular case we can click,on the announcement bar here and we can,click on this announcement we can go,ahead and edit any of this text here so,in this particular example i'll just put,in like fifty percent off all words this,weekend,and we can choose to link to a specific,product or any page in our store really,right here in this case i'm not i'm just,going to have it as an announcement bar,and that's it and this is where we can,choose our color scheme here so we can,choose the color scheme this is going to,go ahead and,be so right now we have it on accent one,and what we're gonna go ahead and do is,we're gonna actually set up our color,scheme to match our branding here in,just a couple of seconds but first i'm,going to go ahead and just save this,text here,and then we're going to come out here to,the header really quick,and now what we're going to go ahead and,do is we're going to select a logo image,by clicking right here and i'm going to,go ahead and choose my logo image right,here if you don't already have it,uploaded all you have to do is click,upload and then clicks click select,and then we can see right here we can,edit the logo with so we can see right,now it kind of looks a little bit small,so if i take it to,the max size we can see all right that,might be a little bit too big so i'll,take it down to 200,and we can see i think that looks a,little bit better and then you can go,ahead and change the logo position on,desktop to top left,top center,or,middle left,in this case i'm going to keep it as,middle left,and then right down here we can go ahead,and choose which menu we want to show up,right here so we can change the menu,right here so if i click change menu we,can see these different menus show up so,we can see i've already created these,menus here so this is my main menu and,i've created a footer menu and if you,don't know how to do that i also have a,video on that as well,so coming back out here to the rest of,the header we can go ahead and choose,whether or not we want to show this,little separator line in this case i'm,not going to do that and then we can go,ahead and choose to enable the sticky,header which would mean,when we scroll down,and back up,that the header is going to show up so,we can see as we scroll down it,disappears but as soon as we start,scrolling up the header shows up again,now if i were to get rid of this i,scroll down and i scroll up and you can,see it's not there,so this is a feature you can choose,whether or not you want to have,i'm going to go ahead and enable it so,if someone scrolls all the way down to,the bottom of our page they don't have,to go all the way back up top to see the,menu,here so now that we've finished with the,header what i want to go ahead and do is,go ahead and set up our colors before we,go ahead and move on any further so i'm,going to come down here to theme,settings here and i'm going to click on,colors and then we can see that we have,our different colors right here,so we have our solid button label color,right here and then we have our accent,one so this is going to be used for a,lot of different things right here so we,can see that this was also the accent,one,so this is going to be used for like,buttons and things of the sort so i'm,going to go ahead and change accent 1 to,our brand's primary color so in order to,get the hex code to get the exact color,from your actual logo if you don't,already have it you can go ahead and,upload it here to imagecolorpicker.com,and then you can go ahead and just click,on it right here click on the specific,color you want to get the corresponding,hex code,and then you can just go ahead and copy,this code right here,come back to your store paste it in,and now that will be used as our accent,one and we can see that that changed,this announcement bar color here to,match our branding and that changed our,buttons to match our branding here and,we can see that that looks a lot better,and then we can go ahead and edit the,rest of our colors here if we want but,in this case i'm going to just keep it,simple i'm going to change the accent,right here and then i'm going to keep,the rest of the text and all of that,color,default,so now i'm going to go ahead and save,these changes really quick and there's a,lot of different settings here that you,can edit inside of theme settings and,i'm not going to go ahead and cover all,of them i'm just going to color cover a,couple of the important ones,so the next one you can edit here is,going to be the typography so this is,where you can just go ahead and change,these fonts so you can choose a,different font for the store,now normally the default font that comes,with the theme is going to look pretty,good but if you want to add a little bit,more of,a customization to the specific theme,and make it more unique to your brand,you can come in here and change your,font so this top one here will be the,font,for all of the headers so this will be,this text right here and then this font,down here will be the body text like,this text right here this menu text and,everything like that so you can see how,these fonts are clearly very different,because these are different right here,and you can change the scaling of the,fonts in here as well for this the sake,of this video i'm going to keep the,fonts default but you can play around,with this and come up with different,fonts that you like,outside of that you're not going to have,to mess with too much of this stuff if,you don't want i'd say the only other,thing that you want to make sure that,you do do is come down here to the,favicon which is going to be the small,image that shows up in the top left of,the tab,for your website,so you just need a small icon version of,your logo so you can just come in here,and then you can go ahead and just,upload the favicon here so in this case,it's just going to be the icon part of,the logo without the text,i'll make that my favicon and i will,click save and then that's going to be,it for the theme settings so now we're,going to get back to actually editing,this home page so we're going to go,ahead and come down here to this first,image with text which is this section,right here so whenever you click on a,section here on the left it's going to,jump straight to that section here,in the editor so we're going to edit,this first image with text first so we,can see here,if we go ahead and open this up,we can go ahead and edit the text by,clicking on the text and then we have,this body text down here and then we,have the button down here so if we want,to actually change the image we have to,go ahead and click on top and then click,select image right here so i'm going to,go ahead and upload an image into here,right now,and then i'm just going to click select,and you can go ahead and change the,image width,to large small,or medium i think the default medium,looks the best right here,you can go ahead and change the image,placement whether you want it on the,left or the right,and you can go ahead and change the,content position as well but i'm going,to keep all of these settings default as,of right now,i'm going to click save here and then we,can go ahead and get started with,editing this text,so i'm going to just go ahead,and put in some basic text right here,you can change the text size right there,i think it looks a little bit,better in medium so i'm going to go,ahead and do that click save,and then if you wanted to go ahead and,put in some additional text down here,you can go ahead and do that in this,case,i'm just going to put in,some dummy text for the sake of this,video,click save and then we can come down,here,and edit this button,so we could go ahead and change the text,of the button if we wanted to and then,we can see right here that it's kind of,grayed out and that's because the button,doesn't link to anything so the button,isn't really serving its purpose so in,order to,have this button linked to a specific,page we can go ahead and just click on,here and i'm going to have it link,to,products and then i'm gonna go ahead and,just have it link to all products right,here,so now whenever someone clicks this,button they're gonna be brought to a,page with all of our products so i'm,gonna go ahead and click save,and we can see just like that that the,store is actually starting to look like,a proper store here in just a couple of,minutes so now we're going to come down,here to the next section which is the,featured collection here,so what this is going to go ahead and do,is it's going to showcase,products from a collection you specify,so this one's pretty easy to set up,so we can go ahead,and edit the text up here so we could,change it to something like some of our,favorites or whatever you really want to,and then we can go ahead and change the,heading size to different text sizes if,we want and then right here we can go,ahead and select the collection so in,this case i'm going to go ahead and use,the candy bars collection right here so,i'm going to just click on select,and then what you can go ahead and do as,well is you can change the amount of,products to show so if you want to show,less products you can go down to say,three if you want to show more products,you can go up to five six,seven but we can see i don't have seven,in this collection i only have six so i,can showcase six and then you can change,the number of columns here so we can see,four by two doesn't look really good so,if i changed it to,three by two we can see that this looks,a lot better and then i'm gonna just go,ahead and click on save now at this,point one thing you can do is at any,point you come up here and click on this,icon and click on mobile just to see,what the store will actually look like,on mobile as well which is always a good,idea to do,but it's definitely easier to edit on,desktop mode so we went ahead and filled,out this section here so now we're going,to come down here to this slideshow here,so we can see right here that this,slideshow is going to have,two different layouts so we have full,width or grid,so we can see the grid cuts off right,here and then we can see full width,goes to the full end of the site so you,can choose which one you want to do,depending on the design of your site i'm,going to stick with default since every,part of the site has been cut off at,these points for now,and then what we can go ahead and do,here is come down to edit our slide,height so we can make it medium we can,make it large,in this case i'm going to just keep it,on small and then we can choose,the amount of time it takes to rotate,between different slides here,and then now if we come over here and,click on this this is where we can,actually start editing the actual slide,so i'm going to go ahead and add an,image in here,so i'm going to go ahead and add this,image in,first,and then i am also going to add one more,image in here as well so we've uploaded,two i'm first going to select this one,right here,and then what i'm going to do now is i'm,going to add another slide really quick,i'm going to select an image and i'm,going to add the second one in right,here,and we can see that now we have,two different images going in our slide,now if you didn't want to use separate,images and you just wanted to have one,you can just use one,but in this particular case we're going,to have two here so one thing you may,notice is that these look a little bit,different so this is how we can go ahead,and edit it here so if we come down here,i'm going to first go ahead and put in,some dummy text again right here and,then we can see that if we come down,here we can change the heading size from,large medium small so this is where we,go ahead and add in a subheading if we,wanted to so if i put in this you can,see that it would show up here in a,second and then if i went ahead and did,the same thing we could go ahead and add,in a button right here and add a link to,that as well in this case i'm going to,just keep it simple and not do that but,you can go ahead and do that if you want,and then you can go ahead and see here,that if we were to go to the second,image we can see it looks a little bit,different and that's because it's using,this section this selection right here,so container on desktop so now we can,see that this has the container on it,so i think this makes the text a lot,more visible so i'll go ahead and keep,that on there and then if we go over,here,we can see that this already has a,button on it so let's say i get rid of,the button,get rid of the subheading,and just put in the same dummy text and,then we can see that it's just going to,be the same text with a different image,now in this particular case you'd,probably want to have,like different types,of,text on each slide so i could go ahead,and change this dummy text to something,different,and we can see that that will go ahead,and change and right now it's set to,auto rotate every five seconds so that's,how we can set up the slideshow that,section is pretty simple as well,so we can see that now the site is,already looking pretty filled out and,the next thing we're going to look at,here is this collection list,so we can click on this collection list,here and we can see by default it's,showing three,so we can go ahead and just give it a,heading here and just say,our collections,and then we can come down here and click,on collection right here,and then all we have to do is go ahead,and select one of our collections so i,can go ahead and select,the first collection here of candy bars,i can then click on select and then we,can come down here to the second,collection,click another,collection here this time candy canes,click select,come down here this next collection,click on select candy corn,and if we want to go ahead and add more,collections we can go ahead and do that,so we can see i'm going to go ahead and,add a another collection in here because,we have a couple more so we can go ahead,and add the chocolate collection in next,and then if i add another collection as,well,we can go ahead and add the final,collection which is the macaroons so if,you find yourself with an uneven amount,of collections that doesn't look right,you can either exclude one of them so,you can have even rows or you can just,make another one with like all products,in this particular case i just created,another one really quick for gummy bears,just so that way everything looks even,because it looks a lot better than,having like an empty slot right here,and we can see just like that we now,have our collections list finished,so the next section down here is an,image with text so this is going to be,the same as this section up here so it's,the same process,so we can go ahead and select an image,for it right now so i'm going to go,ahead and use this particular chocolate,image click on select and then i'm going,to come over here to the text,and put in the heading and you can go,ahead and edit the text size to where,you think it looks a little bit better,and then you can go ahead and edit this,small text once again,and just like before i'm just going to,throw some dummy text in here really,quick,and click save,so if we wanted to add an additional uh,block though we could so we could go,ahead and add a caption or a button,so let's say we wanted to add a call to,action button in here to,send people to the chocolate collection,specifically we could go ahead and say,shop,chocolate and then we could change this,button link to link to a collection,specifically and we'll link it to the,chocolate collection here,so that's how easily you can do that so,we have the specific call to action,that's now linking specifically,to the chocolate collection,and then right here,the next section is a featured product,here,so if we go ahead and just click on,featured product all we have to do is,select a specific product to add a,feature so if i go ahead and select that,now,i'm going to go ahead and select the,lollipop product right here,and then we can go ahead and change,different things,down here,but once you go ahead and select the,product it goes ahead and populates all,of this information for us so we can go,ahead and just click save,you can come in here and edit all of,this stuff manually,as far as like the title size and,everything so we can go ahead and make,this bigger,or smaller in this case we'll just keep,it as large,we can go ahead and edit the different,text,information in here,but this section is also pretty easy you,pretty much just select the product and,everything kind of auto fills for you,right here,and the next section here would be a,multi-column section,so this section could be used for a lot,of different things depending on your,brand and what you're selling and stuff,like that so you can use,multi-columns for reviews you can use,multi-cons like features or benefits of,your product,or service or anything of your product,in this particular case we'll just go,ahead and put reviews so see,so see what our customers are saying,here,and if we go ahead and come down here to,the actual column we can go ahead and,edit this now so you can put in an image,in here if you want so i'll show you,what that looks like real quick so if we,put in an image we can see that we have,an image right here so this is why this,could be really good for like features,or benefits because you could have like,three icons right here and then put the,text below so you could have something,like pickup delivery,stuff like that whatever you want but in,this specific case i'm going to go ahead,and just use this as reviews so i'm not,going to go ahead and have an image in,there i'm just going to put in like,someone's name,and then this dummy text right here will,serve as the,review,so i'm going to click save and then we,can go ahead and do the same thing with,each column right here,so we can see that this,section right here link label actually,allows us to create a link in here so we,could actually have these sections,linked to something if we want so i will,were to select the link it's just like a,button except this entire thing would,essentially just become a button so,whenever someone would click down here,they'd be sent somewhere just like it's,a button so this is a different type of,button but in this case i'm not going to,use it because this is a review section,but that is,something you could go ahead and employ,if you wanted to go ahead and do that,we'll go ahead and put the last review,in here and that's went ahead and fill,out filled out,so now we can see the last section here,is another feature to collection,but let's say for example we don't want,to showcase another specific collection,because we've already showcased our,candy collection up here,we have all our other collections here,and we feel like we have enough product,showcased on the home page so let's say,we don't want to showcase another one so,if we didn't actually want to use this,section all you have to do is click on,it come over here and click on remove,section and the section is going but,let's say we wanted to replace that,section with something else,you can go ahead and click on add,section right here and you're going to,get a bunch of different options for,different sections you can go ahead and,add in so you could add in blog posts,collages collection lists like we did,earlier you could add in a contact form,i add in custom code and email sign up,image banner and if we open these up,there's even more,you can add in a video,slideshow like we did earlier there's a,bunch of different stuff you can add in,this case i'm going to just go ahead and,add a contact form in here right here,and then at the very end we can just say,get in touch,and just like that we can go ahead and,change the heading size to small medium,or large,and this contact form will automatically,be set up to send this info over to the,email we have associated with our,shopify account right there that's how,easy it is to add any type of section,you want and then we have the footer,section down here which is the last,section to go ahead and edit here on,this theme so within the footer options,we have a couple different options here,so the first is the color accent so we,have it set to accent one to match the,rest of our branding if you have more,complex branding with multiple color,schemes that's when you're gonna,utilize the different accents in the,different backgrounds we have the email,sign up right here which we get rid of,it here you see it gets rid of that,right here but we can go ahead and keep,that in here,and you could be like,get,10,off,here,and you can give people like a coupon,code for signing up to your email you,can go ahead and choose the show social,media icons which we don't actually have,any social media icons in our theme,settings that's why they're not showing,up but they would show up if we had,social media icons right here,we can choose to enable the country and,region selector right here in this case,i'm going to keep it disabled you can,choose to enable a language selector as,well,and you can also choose whether or not,you want to show payment icons and we,can go ahead and edit some of our,spacing if we wanted to as well but i'm,going to keep everything as default,right here and actually get into editing,the content here,of the,specific,of the footer so the first thing here we,have quick links so this is just going,to be our footer menu so we can see,we've went ahead and already selected,footer menu which you can select right,here the second thing is a heading so in,this particular case this is like a,local business where you could go ahead,and put in,something like,how,to,how to find this maybe and then you,could have like,phone number,email,and then you could have in something,like your store hours so we put in some,store hours right here and then the last,section here we can go ahead and just,edit this image so let's say i wanted to,just go ahead and put an image of like,our,specific,map location for our business for,example here so i can go ahead and,select this,and let's say i want to make the image a,lot bigger so i'm going to go ahead and,increase that image size right here,and you can change the alignment i'm,going to change it to center so that,looks a little bit better,and we can see that just like that we've,went ahead and filled out our footer,so at this point we've essentially,filled out everything right there and,we've even added in new sections so the,only other thing i want to quickly show,you how to do,is if you want to actually change the,order of these sections all you have to,do is click on these six dots and you,can drag them up so let's say i want to,move the contact form up i can move it,up here,and if you want to move it back down i,can move it down there and you can drag,any of these sections wherever you want,but in this specific case,i'm going to go ahead and put the,feature product back here,and what i'm going to go ahead and do,is i'm going to go ahead and back out,and then i'm going to go ahead and open,up the store so we can take one look at,it so we can see that we went ahead and,created,a fully functional store using the,shopify taste theme in just about 30,minutes,we can see that it looks pretty good and,it really wasn't all that difficult so,if you found this video helpful be sure,to leave it a thumbs up subscribe to,this channel for more videos and i will,see you guys in the next

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

Come on and read the rest of the article!