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
Let's move on to the first section of Shopifytemplate base theme shopify
Creating New Templates in Online Store 2.0 Themes in Shopify
Creating New Templates in Online Store 2.0 Themes in Shopify
hey scott austin here from jade puma in,this video i'm going to show you how to,make new templates for products and for,pages in online store 2.0 themes and,this is a super easy thing it's it's you,have to edit code but it's an easy thing,to do so even if you're not comfortable,editing code you should feel comfortable,going in and making this change yourself,so let's first explain why we'd want,different templates so,here on a product page the gold medal,power package,i have this,gallery of images down here,and if i look at another package the,next button up here,go down to its gallery it's got a,different set of photos and a different,number of photos,so because of that difference in content,i need different templates right um,because you know if we just have,different product descriptions you can,change that content,inside the shopify admin on the product,level but if you want to add a section,with online store 2.0 section anywhere,functionality,and have different content in those,sections you need different templates so,in this store most of the products,actually have their own unique template,made,and then the same thing for pages so,let's just look at the contact us page,this contact us page is built with,sections,obviously with you know the image with,text and maps and all that stuff,and this faq page is built with sections,also with the accordion functionality,so,the content the sections are different,and the content in the sections are,different therefore these two pages need,different templates so we go to the back,end let's just look at pages first,and just show you contact us,all right it has a,template of contact,and faq,has a template of faq so they have,different templates,and just to show you the same thing,inside of products,let's just go to our,packages really quickly here,this,package product,has one template,bodybuilder,and you know the other other products,have different templates you can here,you can see the full list of all the,templates we've made,for the products,um inside of this store so let's show,you how to make a duplicate one and the,really nice thing about this in sections,anywhere is before sections anywhere,depending on your theme you had to edit,multiple files and now,in sections anywhere it's just one file,you need to edit so what you want to do,to get started just open up a new tab,you want to go to the theme that you,want to add the template in which is,probably your live theme,and right here under actions,you want to click on edit code,and what you're going to want to do,let's close out all our existing files,there,and look what we want to do is under,templates,you want to add a new template,and you're going to want to say do you,want to do a page or a product or all,the different types we're doing page and,product today let's just pick page,now you're going to want to keep it as a,json template and i'll explain that in a,second here,so i'm just going to put in test,and and json is a file format in online,sto
After seeing the first section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next second section about Shopifytemplate base theme shopify
Custom Shopify Pages without Apps — Archetype Themes
Custom Shopify Pages without Apps — Archetype Themes
creating custom page templates in the,latest version of our themes has never,been easier the question does come up,quite a bit how do i create unique,content for different pages,in this example i'm going to show you,how to create your own custom layouts,that can then be used to show unique,content on different pages,if we open up the theme editor,you'll see that,all of our themes ship with pre-made,templates to help get you started these,are all included with the expanse,impulse,motion and streamline themes the full,width template will give you a wider,full width page layout to start with,the faq template comes pre-configured,with sections and blocks to build out,your frequently asked questions page,the contact template makes it easy for,visitors to contact you through,pre-built product form,and the about us template is great for,letting visitors know more details about,you and your story,in today's example i have two different,pages that i want to show unique,sections and content on so this will,require us to create two unique page,templates,so the way we do that,is we come and select create template,and we'll call this first one,page one,and we're going to base this template on,the default page template,we can actually use any of the,pre-existing but we'll use default,and we'll say create template,and that really is all there is to it,we've just created the page and so now,what's left to do is just to add in the,sections and blocks and the content that,we want to build out as page,so,you'll notice here that i've got page,disabled,oops,so if i had,content on the page that i wanted to,display as well,i could do it there,for this,i actually want to hide it,and we're going to add in,about a hero section,let's go grab an image,we'll add in,an image with text section,so,and then lastly,this would be a great opportunity,to showcase some product,so we'll add a featured collection,section,say about there,perfect so now we're going to jump out,of the theme editor just a moment,and we're going to come to pages,and we're going to assign the page,template that we just created,to this new page,and so if we view this page,we've got our hero,section our image with text,then our feed collection,perfect,so now let's jump back in the theme,editor and we'll do this one more time,so we'll come back to pages,create template,and we'll call this,page two we're going to stick with the,default page as the,the basis,and again i'm going to create a page,where i hide the page content,we're going to do stick with just,sections from it,i'm going to add in another hero,we'll just use one block so i'm going to,remove this block,and we're going to adjust this heuristic,height,there we go so i can get everybody in,there,and then we'll add one more image with,text,let's change it up though let's flip it,around oops,we'll add in two on this one,and we'll save this,unlike the other one we'll add in a,featured collection section,so we can show some products,perfect so now let's jump
After seeing the second section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next third section about Shopifytemplate base theme shopify
Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages
Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages
all right what's up guys i did a poll,recently on my youtube channel where i,asked what my next video topic should be,and the most voted for topic was shopify,2.0 so today i want to talk about page,templates which is a new feature of,shopify 2.0 that many people aren't,using yet it's a really underrated,feature and it can really be quite,powerful one of the most common,questions that i get on my channel when,i talk about adding a specific feature,to a product page,is how can i add this to one product,but not to another product right how can,i add a feature to one product page,without affecting the rest of the,products on my store and a good example,of this is this tutorial where i showed,you how to add a gift message field to a,product so obviously this is for,products that have some kind of note,attached to them or maybe they have an,engraving or maybe there's something,written on the shirt whatever it's a,customizable product right and maybe not,all your products are like this maybe,not all your products are customizable,so you want to add this on one product,but not on another type of product and,that's really easy to do in shopify 2.0,you just have to use page templates so,i'm going to show you how to do that,today another good use of page templates,is to make a completely different design,for different product pages so you may,have some products which are like your,flagship products your main products,and you have a lot more to say about,them right you have you want to talk,about their features a lot more so the,example that i've got here is all birds,you know they've got their merino wool,or or tree actually tree fabric sneakers,and they have this product page right,the top of it is a typical shopify,product page but then they've got these,extra features that they want to talk,about below and we can do this now,thanks to shopify 2.0 and sections,everywhere you know how previously you,only had sections on the home page now,you have them on every page so you can,add sections,underneath your main product section on,your product page but maybe you don't,need that for all products so here,they've got their beanie and you know,they just don't have that much to say,about the beanie because the beanie is,like not their main thing their main,thing is sneakers so they have these two,different product page templates one for,the shoes and probably the other one is,just the default product template for,regular products and you know this,doesn't have to be limited to just,product pages either so here they have a,collection page which is like your,typical shopify collection page right,you have a product grid and you have,your filters on the left here but they,also have this other collection page,under new arrivals when you click on,warm weather,they have collection pages with this,nice image banner and look this is for,warm weather and it's really warm image,it really gives the mood and they have,this kind of image banner for every type,of collection that
After seeing the third section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next fourth section about Shopifytemplate base theme shopify
Customize your Shopify Theme FAST | How to Design Shopify Store 2021
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
After seeing the fourth section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next fifth section about Shopifytemplate 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 fifth section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next sixth section about Shopifytemplate base theme shopify
After seeing the sixth section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next seventh section about Shopifytemplate base theme shopify
How To Create Custom Sections & Pages In Shopify (Any Theme!)
How To Create Custom Sections & Pages In Shopify (Any Theme!)
all right what's up guys this is jake,and in this video i'm going to be,showing you how you can go ahead and,create custom sections to use in your,shopify store inside of your shopify,theme as well as being able to create,complete custom pages from scratch as,well so this is going to be really,useful if you want to go ahead and just,add a little bit of personal touch or,flair,to whatever shopify theme you are,currently using right now,so in order to do this we're going to be,using an app called be here which is a,landing page builder so you can go ahead,and install b by clicking the first link,in the description,and then once you go ahead and install,it we'll be brought to,the main dashboard of be right here so,this app is really easy to use and we're,going to go ahead and go through it now,so the first thing that we're going to,do is we're going to create a custom,section within our shopify theme and,then next we're going to complete create,a completely custom,page as well,so starting off with the section here if,you're not completely familiar if we go,ahead and go,to our online store really quickly,and we just click on customize here,so when we're customizing our base theme,we can see here that these are going to,be the sections right here so this is a,image with text section a slides to show,etc and if we were to come down here and,click on add section we can see that we,get,a list of a bunch of these theme,sections right here,but let's say that we want to go ahead,and create a custom section so maybe,these sections aren't providing exactly,what we want for our design we want a,little more flexibility so that's what,we're going to be doing right now so,inside of the b app if we come down here,to sections,we can go ahead and just click on create,new section right here,and wait for this to go ahead and open,up,so we can go ahead and create a template,title so this is going to be a template,that can be reused over and over again,just like any of these other sections,right here,so we'll just call this,test section,and we'll go ahead and we can either,start from scratch or we can choose a,template so in this particular case i'm,going to just start from scratch,and we can see right here that what it's,going to do is it's going to open up,your store right here and then it's,going to go ahead and,give you a blank section right here that,we can go ahead and actually start,creating,so if i go ahead and click on add new,we can go ahead and select a layout for,the section that we want to go ahead and,use,so we can go ahead and select a full,width just one section here or we can,split it into a bunch of different,things so let's say i want to go ahead,and make this section,using this particular shape right here,and then i can now come up here to,elements and i can actually start,populating the section with elements,so let's say in the center of this,section for example i want to get i,wanted to go ahead,and have an image,and then let's say,on the left side
After seeing the seventh section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next eighth section about Shopifytemplate base theme shopify
en dan xlii gonna go voor de brooklyn,seem like share some van een klik en de,brooklyn team,they also have a couple of en stiles,voor iets team zoek en klik op de van,styles and decide on which would you,like the most,en kunnen simplistic door de classic,style rides her en der mijn en binnen,click on add to steam library je hier op,de bodem en dan winsten team has been,added week en siraj chair and advise to,change van de dief of film toen een,nieuw i'm just added to go to actions,raichu en en klik op publish dennenkamp,conform right there and now or female,change de nieuwe film that we've just,added and now i wanna start building,autar store zo van een scroll up again,and then we van een right-click on,customize en klik op een link in een,nieuw het up this way we still have an,shopify dashboard open in de background,and i can work on a shopify store in de,shopify editor writer at the same time,zo nou ja ar in de editor of shopify,moeten we can use to feel de oude al,online store website zoon van eagle,creek of use of verhaal this works and,then i start to build a lot of website,zo dit op je kunt switchen van de,fanpage is er een alarm homepage evenals,de switch to your product pages to your,collectie pages lapjes en sommige wat,meesterwerk we kunnen toch hier op de,homepage en evolutie dat all the other,pages like bloody pages checkka pages,there or be built up for users dutch,design nieuwe en wie heeft uw man die,speeches dan nu kunnen als wat change,from death of you to mobile view or full,screen you so badly je wanna make sure,that your story looks my god om mobiel,is wel de geslaagde traffic nou de is,online kans absoluut from mobile phones,maar hallo we gonna build out there i,think you run de test kampioen wendy,side is beelden up in different sections,zoë starts with head section view aan de,top en dan hadden we in de bodem en dave,de foto's sectieweergave couple of links,en dan your lyon bredius en simon en ik,between de header en de father,theoretische since,which you can decide what you wanna,poetin hier zo maar die fobie heb een,slideshow sectie van de topper je kunt,feature historie product,heb je lef en mijn europe which is part,of the rather than i have another sexy,de which section and right here' you,have and collection lees meer feature,collectie en simon deze rol sections and,you can add my olie en als er eames ze,for example i wanna remove the which the,rich text section wit simply click on,add in de week en klik op remove section,raichu aan de bottom now and depending,on what screen size you have this money,you might also displayed on the right,side for you but for me it's you on the,left side,dan ik en klik op remove sexy white,shoes and just like this this section is,now come from our website you can also,add nieuws acties by clicking on head,section i go in the bottom left in deze,kunnen site om wat kan er sexy uit zo,lets if you want to add this which seks,actie nu kan ik een simpele klik op,woodstock sexy and i will guid
After seeing the eighth section, I believe you have a general understanding of Shopifytemplate base theme shopify
Continue the next ninth section about Shopifytemplate base theme shopify
SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
alarm welcome to this crash course on,Shopify liquid the templating language,of Shopify themes first of all I want to,thank you for bearing with me over the,last three months it's been a busy three,months with the release of my latest,Skillshare class Shopify theme,programming which by the way the link is,in the description,but in today's video we're going to,cover an overview of Shopify liquid a,very practical run-through of what you,can do with Shopify liquid which you can,think of as the kind of back-end,programming language of Shopify themes,so this crash course is gonna be split,up into four four parts the first part,we're gonna cover the absolute basics,we're not even gonna touch the store,data just get you up to speed with some,of the syntax the second part we're,going to actually bring in some store,data and use liquid objects and in the,third section we are gonna incorporate,theme data so theme data allows us to,take user input from the admins of the,store they can customize their theme,using the customizer and then we can use,that data inside our themes very cool,feature of Shopify and the fourth and,final part I'll be talking about some of,the limitations of the templating,language what you can do and what you,can't do with Shopify liquid and also,covering an important topic within,Shopify liquid which is the topic of,scope we've got a lot to get through so,I'm gonna jump straight into the video,let's jump right into the computer and,get into it all right so we're now,inside my computer and we're looking at,the Shopify admin of my testing shop,Chris testing shop now if you haven't,done so already you can create your own,development store through your Shopify,partners account if you don't have a,partner account it's free to join you,just go to partners Shopify comm and,join now okay and the great thing about,a partner account is it allows you to,create what's called development stores,that are basically free store,that you can use as a development,environment to practice your programming,okay so that's the first thing you'll,need you'll need in an actual store and,the second thing you'll need if you want,to follow along is the theme I'm using,so you can use any theme to follow along,with in fact maybe it's the theme you're,working on right now but if we look at a,fully developed theme like debut for,instance there is a lot of code and,files here so I don't recommend if,you're trying to just learn Shopify,liquid that you work with a theme that's,already been built out because there's a,lot of HTML in here there's a lot of,different files and lines of code so my,recommendation is to start with a blank,theme and the theme that I use is the,one that you can generate through theme,kit using the theme new command what,I've done for this tutorial is I've,already generated that theme and I've,put it on my github page so if you just,want to download the theme it's at,github comm slash christopher dodd slash,Skillshare okay this is my resources f
Congratulation! You bave finally finished reading Shopifytemplate base theme shopify and believe you bave enougb understending Shopifytemplate base theme shopify
No difficulty
