Customize your Shopify Theme FAST | How to Design Shopify Store 2021
let's be honest your store design,matters and if you have a really ugly,site people are just going to leave and,they're not going to purchase from you,so in this video i'm going to show you,exactly how to customize,your shopify store design,as soon as someone comes to your site,they only have about seven,seconds before they decide if they want,to look longer on your site or,leave so those seven seconds really,matter and design,matters when it comes to that you want,to make sure that your site is,eye-catching,and it really speaks to your ideal,customer so,how do you do this you really need to,pick out your shopify,theme and make sure that it works based,on what kind of,imagery you have if you have a lot of,really great big images,then pick a theme that's going to,highlight those but if you don't have a,lot of great product shots,then you want to make sure that you pick,a theme that's not going to be heavily,reliant on that,once you've chosen your shopify theme,then it's time to,customize it and this is where it's,important to create different assets,choose your fonts and colors,to make sure that it's appealing for,your ideal customer,so this is super important but a lot of,times people kind of overlook the design,step so i'm going to show you really,quickly how to,actually customize your design in the,back end of shopify for both your home,page,collection page and product page so to,get here you're going to click on,online store and then you'll see themes,there from the list,so now that we are on the themes page,you can see your live theme here,this is what your customers are actually,seeing whenever they come to your site,as well as your online store speed we've,done another video on how to speed up,your site so i will,link that in the description below and,in the info cards above as well,and you can also see the theme library,so you can,upload your theme if you've purchased it,somewhere else or you can explore the,different,theme options available so for example,if you click on,explore free themes you'll actually see,a pop-up of all of the different free,themes that are available here,the one problem with this is if you,click into it you can't really see,how the site overall looks as well as,how it looks on mobile you can just kind,of see the different styling aspects,so what i do recommend that you do is,actually visit the theme,store so if we just click on this here,you can see,the full theme store and this is both,free,and paid themes so what i like to do,whenever i'm trying to decide on a theme,for a shopify store,is i'll actually go to all themes up,here at the top,and then you can see the sidebar here of,sorting options so you can actually sort,through,and you can see you know based on you,just want to see,themes that are just for single products,so if you click on that,then it shows you just that product or,specifications on the right hand side so,you can better narrow down what kind of,theme that it is that you are looking,for,so if we u
Let's move on to the first section of BASE theme shopify
HOW TO CUSTOMIZE SIMPLE SHOPIFY THEME
HOW TO CUSTOMIZE SIMPLE SHOPIFY THEME
hey guys,happiness here welcome back to my,channel and in today's tutorial i am,going to be showing you guys how to,customize a simple shopify theme from,shopify so let's go on our left hand,side and click online store,and after clicking that let's click,themes and it will take us straight on,our theme page as you can see currently,our current theme is john theme and,basically we want to start customizing,a simple shopify theme so i have a video,that i showed exactly how to customize i,don't theme from scratch i'll show you,on that video i'm showing you step by,step on how to customize adonai so if,you are interested make sure to go and,check that out i will link it up i will,link up that video somewhere up here,so on this tutorial i'm going to show,you how to customize freedom let's,scroll all the way down on the freezing,sections so we can go and look for free,themes so let's click explore free,themes,and this page will take us straight,where all the free themes in shopify,store are available as you can see there,is a dawn theme there is brooklyn theme,and other many other themes so i have,another tutorial with,brooklyn theme so if you want to check,it out how to customize a broken theme,you can watch the video as well,let's so let's click simple theme,because this is the theme that we are,going to customize and this thing comes,in three styles there is a light there,is also a toy which you can,create your toys so,and also there is a beauty a beauty,theme and this if you have like a beauty,shop so i'm just gonna use the light,theme style and then let's click add to,themes and this will take us back to the,shopify,page and it's gonna load here it's gonna,take a little bit of time,so,after it finished loading click actions,here,now we just added a simple theme now,let's add this let's click action,and then click,publish so we can publish this theme as,our current name because so far our,current theme is down and now we just,changed our name to simple them so this,is how you can add,a theme to your shopify store so now,let's go ahead and click action so we,can preview so click action and then,preview,and this is how the simple themes is,actually looks like this is like a,homepage here,and you can see there are featured,collections and there are,some of the products and if you scroll,down you'll find more products,and on the left hand side you will find,there is a home and catalog,as well as contact sections,and down here these are the links you,can put your links about us shipping,policy,your refund policy etc,and then here there are payments icon so,your customer can see what kind of,payments method are you offering in your,stores okay now let's go back to our,shopify page,and now let's go and start customizing,uh,the click customize,click customize and this is our page,this is where we can add a header slide,bar,and stuff like that so on our header,section here this is where we're going,to add our logo by,clicking select image here and then once
After seeing the first section, I believe you have a general understanding of BASE theme shopify
Continue the next second section about BASE 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 second section, I believe you have a general understanding of BASE theme shopify
Continue the next third section about BASE theme shopify
How To Design A Shopify Store In 10 Minutes (Step-By-Step)
How To Design A Shopify Store In 10 Minutes (Step-By-Step)
having a bad website will kill your,chances of success on shopify even if,you have the best products and ads it's,so much harder to see results with a low,quality store so in this video i'll be,sharing the exact store template that,i'm using right now to generate over a,hundred thousand dollars a month and,i'll be showing you step by step exactly,how to easily build one for yourself if,you're new here my name is jordan and,i'm currently documenting the entire,process of growing my ecommerce brand,with as much transparency as possible so,if you're interested in starting your,own online business make sure to,subscribe for new videos every single,friday also just want to say thank you,guys so much for 50 000 subscribers so,to give back to you guys i'm gonna do,something that i usually don't do i'm,gonna give away a free one-on-one,coaching call to one of you to enter the,giveaway just drop a comment down below,follow me on instagram and dm me when,you're done i'll be announcing the,winner for this next friday anyways,let's get started with the video,first things first here are some live,results that i'm getting with this exact,template so as you can see halfway,through the day i've already done over,2500 in sales and if we look at,yesterday's stats you can see that this,store is averaging around five thousand,dollars a day everybody is always asking,about profit so let's take a look,yesterday i did around fifteen hundred,dollars in profit and today so far,halfway through the day i'm at around,in profit which is close to 30 daily,margin i'm not showing this to brag but,just to prove that this layout is,working today i figured the best way to,explain this would be to make a sample,store that follows this exact template,so that's what i did let's have a look,at that sample store so this is a store,that i created in the home and garden,niche the type of stores that i like to,build to test products look just like,this basically we're building a nice,clean branded store with good logo good,images,multiple collections inside of that,niche high quality products and images,and overall a trustworthy and legitimate,feel i get dms every single day of,people asking me why am i struggling to,see results and then i look at their,store and it looks like this,if you take the time to make a nice,clean branded website seeing success,with ecommerce is going to be so much,easier this kind of store is perfect for,testing products because it is branded,it has a trustworthy feel but it's also,broad enough that you can test a variety,of products without being too,constrained i like to call this kind of,store a hybrid store it basically,bridges the gap between a general and,niche store building a store like this,is really not that difficult so i'm,gonna break down how to do it right now,the first thing that you're gonna need,to come up with is a clean name and logo,to come up with names i highly recommend,you guys check out this tool called lean,domain search basically you c
After seeing the third section, I believe you have a general understanding of BASE theme shopify
Continue the next fourth section about BASE theme shopify
How to Add Custom CSS to Shopify Theme ( Shopify Basic Tutorial )
How to Add Custom CSS to Shopify Theme ( Shopify Basic Tutorial )
hello friends welcome to our youtube,channel in this video tutorial we are,going to learn how we add our custom,style how we can achieve that in this,video we're gonna learn how we create,the,style seeds file so first of all i am,come to on my theme and here is my theme,i am going to expect this,so,when i expect the top header it shows me,the paragraph,and,here we can add our classes,over the announcement so i click on this,and,add a background style which it's let me,blue,and yeah it's going to blue and changing,the color little bit to,looks better,and yeah is this yeah and think,it's okay fine and going to paragraph,sections where the classes and i add a,color,it's about to,uh,yeah white font size implement in 30,pixel looks great great yeah 22 23,okay i should be implementing font,weight yeah to look some,good yeah 7 700 so here we are inspect,and i just grab this code,css,and going to our,admin panel and dashboard,so here we go first of all we go to our,online store sections,we have to we can,backup to download our theme file so we,store the whole thing file go to edit,sections,after the edit section we have to just,uh close this,extra tabs,and,search the theme,dot css,it should be yeah it's,theme oh it's not here because my theme,is,new theme unpaid so,i can choose a file upload a file or,create a file so basically i create a,file this is a sets so i create a theme,dot css and yeah i created a file for,this,for after the created file it should be,around there,uh yeah yeah that's cortney,close this,yeah assets so base dot css this,provided to our css by,shopify theme and here you have a theme,dot css,so what should we have to do,i have to do,just call css,and you can,see your file it will be there,if i inspect this where you come from,css so they shows the base dot css file,so all over the css comes from basically,base dot css file,so we can implement on that file or we,can add,the css to our new theme file,so i'm going to search which i have,created,i am going to and paste it here then the,save button,and the set is safe go to theme liquid,and here we add our styluses file,and yeah we go to css style style,no it would be css or style okay just,wait hold a second yeah here got the,base dot dsf file,is the the basically structure of the,shopify theme which you provide how to,add your new file so i am going to add,the same,this is the set url which you provide,and this is a style tag going to change,this name my new theme is the theme dot,cs i'm going to save it also in the,section i'm going to say just refresh it,and here we go we can add our new css,we created a new theme file and add the,new css,which is basically override the base.css,okay,so we can add,the css,easily method nothing just create or you,can implement on that,so in this video we are learn how to,implement the css,you
After seeing the fourth section, I believe you have a general understanding of BASE theme shopify
Continue the next fifth section about BASE 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
After seeing the fifth section, I believe you have a general understanding of BASE theme shopify
Continue the next sixth section about BASE theme shopify
9 Best Free Shopify Themes
9 Best Free Shopify Themes
hey what is up guys it's Brendan here,and today we're going to be covering the,nine best free Shopify themes if you're,brand new to Shopify and you want to get,signed up with a free trial you go ahead,and check out that first link down in,the description box below that's,brandonvalecki.com Shopify we'll take,you right over to a Shopify free trial,where you can get started with Shopify,today and without further Ado let's go,ahead and dive into the list so at that,number one spot we have Dawn now Dawn,and all of these themes are created,directly from Shopify so they're all,directly compatible with Shopify they're,all free Shopify themes that Shopify has,created for you for building out your,eCommerce store your online store and,your eCommerce website so without,further Ado of course we have Dawn now,Dawn really is probably the best Bare,Bones like Core theme for most people,getting started with a Shopify store it,is very minimalist and it lets as you,can see here the product images take,Center her stage so Dawn really is that,Core theme probably just the most,overall best theme for most people,getting started with Shopify because it,is more flexible more Dynamic and really,is just a good basic Core theme that,works on Shopify that really is just,really compatible for most people,whether it be you're into fashion,whether you're selling beauty products,whether it be makeup or coffee or really,anything that you want to sell within,the Shopify platform Dawn is a very,universal theme that kind of works,around the board it really hits all the,points as far as something that you,might want for any type of online store,the nice thing about Shopify in general,is it is also customizable so of course,you have you know support for a quick,menu the mega menu and the sticky header,they have all the other additional,features that you could expect with any,kind of Shopify theme of course all,these themes are also built within the,online store 2.0 system so these are all,fully up to date their new OS and,operating system that's more flexible,more customizable and really just,optimized to be fast and drag and drop,as well so if you want to make,customizations of course you can easily,do that with this theme as well as any,of the other themes mentioned here in,today's video so yeah you know the Chic,and minimalist design right you've got,media forward product pages Advanced,customization options so you can easily,drag and drop different elements into,the page whether you want a product list,right so this is kind of like what it,looks like on desktop or on a on a,laptop and then this is what it looks,like on mobile on a smartphone or on a,mobile device as you can see here the,comparison between the two so they are,also you know flexible and dynamic and,friendly for both uh variations of your,users and of your online store visitors,so as you can see here of course all the,different features if you want to check,this out for yourself of course all you,need to do is go t
After seeing the sixth section, I believe you have a general understanding of BASE theme shopify
Continue the next seventh section about BASE theme shopify
okay this morning we're going to talk,about how to actually edit the CSS,styles inside Shopify now typically we,talk about how to mount it by liquid,code and how to change things in the,theme settings but the other day I,realized that it might be a good idea,just to show you guys how to change,basic CSS inside the dashboard so if we,hop over to the screen now I'm not going,to go over how to use the Google,inspector and how to actually learn CSS,I'm gonna make the assumption that you,know how to modify CSS and you're gonna,need to know how to where to go inside,Shopify in order to make the actual,change because the dashboard is,constantly changing and they're making,updates to it things can move around and,they may not be where you would expect,them so if we're on our dashboard and we,go to online store and then we come up,with the drop down below it,we'd have themes and if we go to themes,we're gonna get all of our current,themes that are installed on our store,now Shopify allows you to install,multiple themes so that you can test out,different versions of your website,without modifying the live version so,what I usually recommend is you take,your live versions so say for example we,have pipeline version 4.3.2 and we,duplicate it the reason we want to do,this is in case we make any errors,inside modify the CSS we don't want it,to affect our live users now I'm working,on a demo store so it's not that big of,a deal because I'm the only person who,can see it but once you launch your,store you want to be able to go and make,changes to your online store and then,once all your changes are approved and,they are set properly you can go back in,and you,and publish them so after I've copied,out my theme I usually like to go and,rename it and I rename it to the name of,the theme and I call it development now,the way I work is if there is a,development theme that exists on the,store that's where I'm making all the,changes once I'm finished with the,development team what I will do is I,will publish the development theme I,will rename the active theme to the date,that I published it as you can see down,here and then I will rename development,to active so if it ever gets unpublished,I know exactly which team needs to get,published back up again to restore,changes so now that I've created,development theme I want to go to,actions and I want to go to edit code,and what this is gonna do is it's gonna,take us into the theme editor now it's,gonna take us not to the theme,customizer it's important not to get the,two confused so if we have a look at,customize theme we can see the theme,customizer which is where Shopify really,directs you to try and go and make,changes to your site because it has all,of the built in sections that are,already available for shop by which a,drag and drop which are easy to use but,for advanced users you want to be able,to get to your coat and that is done,through that Actions menu now once,you're into the theme editor you have a,bunch of f
After seeing the seventh section, I believe you have a general understanding of BASE theme shopify
Continue the next eighth section about BASE theme shopify
Shopify Theme Development in 2022 with Shopify Dawn and Shopify Online Store 2.0 Tutorial
Shopify Theme Development in 2022 with Shopify Dawn and Shopify Online Store 2.0 Tutorial
so,so,huh,hello,what is up guys welcome to another live,stream how's it going,let me know in the chat that you guys,are here and alive,hopefully you guys can hear me if not,somebody please let me know before i,embarrass myself for another half hour,uh but,today i'm super excited because we're,actually going to be looking at,the new shopify online store 2.0,experience,so,if you guys aren't already aware,at the the end of july early august,shopify announced a new theme and a new,online store 2.0 experience,that,essentially makes a lot of really,necessary updates,to,what i would consider a kind of,antiquated way to build themes now,if you guys are watching this you may,have already seen uh another live stream,that we did where we actually went in,and we set up a,modern,development workflow uh using shopify,and using theme kit uh but apparently,they've just completely dropped,the support for themekit in their new,theme and the online store 2.0,experience,and,made it a little bit simpler actually uh,to go and,be able to use git,um for,uh version control and to be able to,push your theme up so we're gonna be,looking at all of that good stuff but,before we get into that uh if you,haven't already,do me a favor go ahead and like this,video subscribe if you haven't already,and click that little notification bell,because we're going to be making a lot,more content like this,for the rest of the year and well into,the future so if you're interested in,web design interested in web development,definitely subscribe but let's go ahead,and get started,so,this is actually in,end of june early july so i misspoke,but,they introduced the online store 2.0 uh,and there's this article that i'll go,ahead and i'll link in the chat,uh where they talk about what it means,for developers looks like we got some,people in the chat hey ray hey oscar,thanks so much for hanging out welcome,to the chat guys,if you have any questions at any point,feel free to drop them in there i'll be,reading them as we go,so,just taking a look at this and hopefully,you guys can see it let's make it nice,and big,online store 2.0 opens up massive,opportunities for developers building,themes and apps for shopify merchants,we've rebuilt the online store,experience from the ground up,and are introducing a new set of,developer tools to help you create,amazing experience for merchants and,shoppers let's talk about exactly what,that is before we go and we check it out,for ourselves,so the first is an upgraded theme,architecture essentially,the sections that we've become so used,to using on the homepage are now,available on every page so you're no,longer pigeonholed to not being able to,use those sections,on an about page or on a product page,without a developer before you used to,have to have a developer be able to add,that section over to that page so that,essentially only people who knew how to,code would be able to do this kind of,customization now sections on every page,it's just gonna come right out o
After seeing the eighth section, I believe you have a general understanding of BASE theme shopify
Continue the next ninth section about BASE theme shopify
Shopify Theme Build: The Setup - Episode 1
Shopify Theme Build: The Setup - Episode 1
what's good youtube sam webb back again,with another shopify video,today i want to go back to the basics so,we're going to start a new series on how,to build a shopify theme from scratch,this series is meant to replace my old,series which was centered around slate,as a workflow tool,we'll be using a new workflow that i,built called workshop,and today i'm going to walk you through,the steps of setting up a new theme,and getting the workflow in place so,let's get started,i want to start off with a bit of an,introduction to workshop cli,so workshop is a tool,it's a cli tool that allows you to,to very quickly generate a new workflow,there are two workflows there's workshop,basic and workshop advanced gulp,workshop basic is a workflow that,basically the exact setup of shopify,except it allows you to store your code,in github and then deploy it,versus having to work directly in,shopify so if you,really want to get started quickly and,you don't want any kind of advanced,tools,then workshop basic would be what you,would use,workshop advanced gulp is the second,workflow,and it's as name implies a much more,advanced workflow,that allows for a lot more,a much more customized feel so,it's gonna have you're going to be able,to use,import export in javascript and it's,built for sas,and it allows for you know within the,snippets folder and the sections folder,allows for,subfolders and just some little nice to,haves and it's also a good starting,point,if you if you want to get a little bit,more advanced and kind of,add your own twist to your workflow if,you have your own things you want to add,to it,uh the theme that that comes from this,is completely blank,which is perfect for what i'm trying to,do and so let's,take a look at workshop cli page,uh this is the page that you would go to,just to kind of get some documentation,and see you know what are the different,commands that you can use,and we're going to get a little bit more,into how you use these things so,i'm not going to cover the pages too,much and then,workshop advanced gulp is what we're,going to be using today,and if you were to click in theme it's,this is the documentation on,on how the actual theme works,and then really quickly this is the,store that we're going to be working on,it's called,band basic it's a store that i very,recently built,and i'm using the minimal theme right,now,just as a placeholder while i build this,brand new theme,which is what we're going to do in this,video series,so we're not going to look too much at,the minimal theme because it's,all this is is temporary until we build,up this new theme,so let's get started by getting workshop,cli installed,so head over to my terminal,and the first thing is,this i do like to use yarn,for everything and this is built to be,used with gnar you,to use yarn you can use npm if you want,for your commands but i just prefer yarn,so to install this we do,yarn global add,workshop cli,and so the at workshop cli at first is,the name space,it's the org
Congratulation! You bave finally finished reading BASE theme shopify and believe you bave enougb understending BASE theme shopify
No difficulty
