hey everyone jan here codingwithyan.com,building themes in 2022 and beyond a,brand hot topic especially since the,theme store reopened for new submissions,and we've already been covering quite a,bit throughout the last few interviews,with liam we've been talking about how,to come up with a concept how to compete,with existing themes,earning potentials the theme store,requirements how to pass the review,process and so on and so forth so if you,haven't seen these episodes yet i highly,recommend you check them out because,there's like so much good information in,there,but i also know you guys,you don't want to be sitting here all,day long and just brainstorm you want to,go out there and build things right so,that's exactly what we're going to be,talking about today we will ask liam,about the specific tools we need and how,to practically get started that will,make the whole series a lot more,complete,so then let's have a look alright liam,it's great to have you back one more,time um so how are you doing today,i'm great jan thanks for having me here,today always a honor and a pleasure to,be chatting with you and your audience,uh we've actually been working,internally on a lot of,interesting tools and resources so i'm,sure,team developers will be very excited to,see what we are releasing in the next,few months but uh otherwise,uh doing good i've been using actually a,lot of the tools that we'll be talking,in this video today so i have some,first-hand experience and insights to,share,and uh yeah just excited and happy to be,talking about building themes with you,today,awesome that sounds great um yeah so,then let's just cut the chase liam what,tools do i need to get started with,building themes from scratch,sure so the main tools that you will,want when you're setting up a,development environment that is suitable,for building themes as opposed to,customizing themes,would include,firstly a,development store that is associated,with your partner account,these are free to create and they act as,really great sandboxes that you can use,for,sending information to a store or,also downloading theme information or,store data from,and uh again totally free to create so,do uh feel free to create those uh,secondly uh you will need to be working,with a text editor on your local,computer so a program like vs code or,sublime,will let you edit the theme files so you,can edit the,liquid files javascript files css files,json files you'll be able to edit all of,those on your local computer with a text,editor of your choice,thirdly,you will likely want to work with the,shopify cli which allows you to transfer,information to and from your linked,development store,as well as generate a,what we call a development theme which,runs locally on your computer,and we'll be talking a little bit more,about that in this video,and uh fourthly and finally you will,likely want to work with the shopify,github integration which essentially,allows you to create,a version control,management s
Let's move on to the first section of Process Creative 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 first section, I believe you have a general understanding of Process Creative theme shopify
Continue the next second section about Process Creative 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 Process Creative theme shopify
Continue the next third section about Process Creative 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 third section, I believe you have a general understanding of Process Creative theme shopify
Continue the next fourth section about Process Creative theme shopify
Online Store 2.0: Building themes on Shopify | Shopify Unite 2021
Online Store 2.0: Building themes on Shopify | Shopify Unite 2021
hi everyone my name is tebow i'm a,developer at shopify and with matt and,ryan we're going to walk you through the,new theme architecture in online store,2.0,we'll start with what's changing in the,themes then talk about what meta fields,are and how will merchants use them,and finally how we're combining themes,and metaphase to make the theme editor,extremely powerful for all merchants,let's get started a few years ago we,released,sections section files go in the,sections directory of a theme,they use liquid or homegoing templating,language to produce,html as the name implies sections are,intended to be dynamic components for a,chunk of a web page,think header footer or in this example,the title and content of a custom page,resource,merchants can then customize sections in,the theme editor without ever seeing or,modifying theme code,here we see our page section rendering,an about page,surrounded by other sections,one of the great things about sections,is that you can make what they render,and how they render it dynamic based on,a configuration that merchants can,easily customize,in the theme editor we support settings,equivalent,to ui inputs in the sidebar of the,editor for things like check boxes,drop downs various kinds of picker we,also support blocks,as you'd expect there are containers of,settings that can be added removed and,reordered within a section,for example here is a schema for an,image with text section,there's a setting for the image and two,blocks for the content that goes beside,it,here's what this example looks like in,the ui,now as many of you know our first,release of sections came with a,significant limitation,you could only add remove and reorder,sections on the home page,you could use them elsewhere but they,were fixed this turned out to be a very,hard problem to solve,in part because of the way we store data,and themes and the flexibility we give,themes to be unique,but i'm happy to report that as many of,you guessed we finally have sections,everywhere let me show you how it works,template files are the root of the code,that renders a particular page,they go in the templates directory and,follow a name convention based on the,page type,like sections they contain liquid code,but unlike sections they cannot be,configured through the ui because they,like structure,here we have an example of a template,rendering custom pages like an about,page,today if you wanted to use a section for,this template you'd end up with,something like this,just one section tag in a liquid file,that's obviously sub-optimal,when we released sections a while back,we made it possible to render sections,in a template as a progressive,enhancement,but as you can see here the template,file doesn't serve much purpose anymore,and while the section can be customized,more sections can be added to the ui,since this liquid file remains,unstructured,so with uninstall 2.0 we're giving you,the option to create structured,templates,that can be customized through the
After seeing the fourth section, I believe you have a general understanding of Process Creative theme shopify
Continue the next fifth section about Process Creative theme shopify
Pipeline Shopify Theme
Pipeline Shopify Theme
welcome everybody to a new video today,we're going to be reviewing the pipeline,shopify theme,and we're also going to be reviewing its,competitor that's 200,cheaper and we're going to see how it,actually,compares to the matilda bikini shopify,theme so without further ado let's go,ahead and jump right in to the pipeline,shopify theme so,i actually bought both of these themes,the pipeline shopify theme and the,matilda bikini theme and i actually,figured why don't i do a video review to,show you guys kind of my opinion on the,various themes so the pipeline shopify,theme is a 2.0 shopify theme so,operating system 2.0 is shopify's new,operating system and any shopify theme,that has the old operating system is not,considered 2.0 in this case the matilda,theme,and the pipeline theme are both shopify,2.0 so you are getting the latest and,greatest technology when you're getting,both of these themes now the theme is,280 dollars and it's great for clothing,accessories health beauty sports and,recreation so anything in the fitness,the health niche um that's kind of what,the theme is ideal for,now let's go ahead and view the store,demo to take a look at what it offers so,clearly we see here a banner we see,products here we see an image or a gif,followed by a product on the right same,thing here to the right we have an image,followed by a product we have a product,grid here,and we have some labels of brands and,just a place where you can see different,collections you know the oils the creams,and just a little example here of some,icons of what the brand represents all,natural pollutant free cruelty free etc,we have a newsletter opt-in we have a,footer so great great technology looks,beautiful very classy design uh for 280,now let's compare that to the home page,of the matilda bikini shopify theme,coming in at,79.99 it's currently on sale i don't,know what you know price it's going to,be in the future uh here it says 99 it's,on sale for 79.99 let's go ahead and,view the demo so to get here this is the,theme ocean there are there are a,theme provider for shopify let's go,ahead and click read more here we can,read all the benefits of the theme,there's clearly a lot but let's just not,even go ahead and look at that let's,click on viewing the demo let's type in,the password ocean to go ahead and log,in and for you guys to want to do this,at home and check it yourselves just,literally go to the link and uh click,view the shop demo and then you can see,here it says use password ocean now i,will leave the link in the description,to both of these themes so the pipeline,theme and the matilda theme i will leave,in the description box down below for,where you guys can get it along with,some frequently asked questions uh that,people might ask uh in the description,just in case if you have some questions,about the theme so this is the matilda,shopify theme the bikini shopify theme,and it has you could see here it has,banners as well clickable banners let me,go ahead and go
After seeing the fifth section, I believe you have a general understanding of Process Creative theme shopify
Continue the next sixth section about Process Creative theme shopify
Shopify Theme Developer Road Map
Shopify Theme Developer Road Map
all right guys it's your boy joe back at,it again codingphase.com,your boys backing out and did it again,one more time this time around we're,gonna be doing a road map,to shopify theme development okay she,want me to lock it down but i told her,to pass the key,how can uh roadmap to shopify theme,development,what do you need html css okay,why do you need html css basically,you're gonna,need to be able to convert a,website from a design and then build it,into a website a real web page,html css is the key for that okay this,is how you set up your,uh language right your markup language,and you set up,html you set up your structure then from,there you use css,to give it the stylings given the colors,give it a spacing,right align things that's what you need,html css,at the same time you need to learn how,to write clean and reusable code,for those of you guys that don't know,right now shopify has,uh this new way of creating things where,you can create a section and think of,sections as components that you can go,and place them,anywhere throughout the website it could,be a component,or a section that you could put on the,homepage but that same section you could,put it on the about page that same,section you can reuse it,and put it on the product page that same,section you can go and,reuse it and put it on i don't know the,collections page,okay so that's something that you want,to keep in mind,writing code that's clean and being able,to be reused,is the key right i recommend you,learning something like bem,right um i'll give you guys an example,let me see if i,pull this up for you guys right here,okay so this is me,writing uh basically the the static,files for,a theme that i'm building right now,coventi,and basically this is my my structure of,how to do things right,i'm using nextgs to generate the static,files,but basically this is what i'm doing,right i have my section right,i'm using the section tag from there we,have uh the name,of that component or that section and,then from there i have,the version of that section right,because sometimes you might create,three to three to four different type of,versions out of,uh one section like different variations,of it,right for example you might have,something like this see if i share this,with you guys,right here okay uh you might have,something like this where,uh this is like a hero section but this,hero has the text and the content in the,middle,another hero section might have the,content on the left,and the right like this right so this is,the same,section or the same component you could,think of it like that,but the only difference is this,different variations,so this is the structure that i use now,of course i'm using,also a bootstrap for the grid system,and that's it i don't use bootstrap for,any type of stylings beyond,the grid system this is just to provide,uh,a way for me to create uh you know,responsive websites,easily right super fast and at the same,time if somebody buys this theme,99 of the time r
After seeing the sixth section, I believe you have a general understanding of Process Creative theme shopify
Continue the next seventh section about Process Creative theme shopify
How to Design Your Own Shopify Theme (Advice from Thomas Kelly, CEO of Archetype Themes)
How to Design Your Own Shopify Theme (Advice from Thomas Kelly, CEO of Archetype Themes)
hey everyone young here,codingwithyan.com,if you ever wanted to build your own,theme for the official theme store then,would you be interested in hearing some,advice directly from the CEO of the most,successful theme company out there,well good for you because that's exactly,what we are doing today we will be,speaking to Thomas Kelly the CEO of,archetype themes a multiple eight figure,brand and I'm super stoked he blocked,some time for us so let's dive in and,hear what he had to say Alright good,morning Thomas Thanks so much for being,here and yeah as you know today we want,to talk a bit about themes in general,how to build them what comes comes,alongside with them and since the,audience maybe doesn't know you yet,would you just like to quickly introduce,yourself,yeah good morning on thanks for having,me,um yeah my name's Thomas I am CEO of,archetype themes as Jan has mentioned uh,I have been,building and growing archetype themes,for the past year after having acquired,it uh from two of my previous teammates,that I worked with at Shopify uh before,so before archetype themes I was working,at Shopify on the theme and online store,platform for six years so in different,in different capacities I was building,themes I was working on developer,tooling I was working on online store,performance making all themes and online,stores faster working with the developer,Community as a developer Advocate uh so,I have I'm just over one year into this,journey of now looking at themes from,building a business angle how do you,build and scale a successful theme,business,okay I couldn't imagine a better sparing,partner for this interview,um so I have I have different topics in,mind and just looking at my notes here,really quick um I would like to touch on,requirements a bit,um coming up with a concept for theme,the development process marketing and,ongoing support and I'm pretty sure,you're very not knowledgeable in all,these topics because you work at Shopify,you also see the business side of things,running a theme company now so how about,we just get started with the,requirements,um what qualifications are needed in,order to build a theme like who should,even consider doing that,so I think the the magic recipe that,I've seen uh it's kind of time and time,again,uh I have seen success with as little as,two people uh starting a theme company,starting their own theme and that is,typically a designer and a developer uh,it's rare that those skills overlap uh,in full capacity uh it's possible you,could be a really good designer and a,developer but it's also a lot to take on,just yourself uh that building a theme,is a big project there's a lot of,upfront investment involved it would,it's it's nice to have at least somebody,else to work with I think maybe is a,place to start,um and then in terms of skills required,uh,from the design side you know Kenai for,for what's appealing understanding of,users that you want to Target maybe we,can get into that separately,um because I
After seeing the seventh section, I believe you have a general understanding of Process Creative theme shopify
Continue the next eighth section about Process Creative 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 eighth section, I believe you have a general understanding of Process Creative theme shopify
Continue the next ninth section about Process Creative theme shopify
How To Design An Ecommerce Store THAT SELLS
How To Design An Ecommerce Store THAT SELLS
people judge your online store the,second they land on it and what's more,is having a strong website design,increases the perceived value of your,product so if you're not presenting,visitors to your online store with the,best ecommerce website design possible,you're literally turning away customers,hey my name's ali i'm a designer at,shopify and today i'm going to walk you,through how to design your online store,so that you can create a seamless and,memorable experience for your customers,in this video you'll learn techniques,for customizing your shopify store's,theme and optimizing your content so,that you can build your website the way,that you want it i'll cover the shopify,store design essentials including,picking the right theme for your brand,using theme settings to achieve the look,and feel that you want,using meta fields to enhance your,storefront with richer content,and finally custom page templates,welcome to learn with shopify we're all,about teaching you how to start run and,grow an online business,anything you want to learn about being,an e-commerce business owner you can,find right here so if that sounds like,something you need in your life hit,subscribe,so let's jump into picking the right,theme for your brand the shopify theme,store has tons of free and paid themes,to choose from if you don't have a,shopify store yet and you'd like to,follow along with me step by step you,can get a free trial on shopify by,clicking the link in the top corner of,this video or in the description below,today we're going to be designing a,store for these shopify apparel products,and so right away i'm going to head to,the all theme section of the theme store,and apply a couple of filters to narrow,down my options first up i'm going to,check out the latest releases shopify is,always releasing new free themes into,the catalog and premium themes from our,partners,if you already have a theme installed,that you like and you want access to the,latest settings and features you may,also be eligible for a theme update,right from your admin so now i'm going,to go ahead and pick clothing and,accessories to filter these options down,further there's lots of great options,here and depending on the kind of,aesthetic layout or features you might,be looking for there may be a specific,theme here that makes sense for you as a,great starting point for your store,investing a bit of time at this stage is,really valuable because if you can find,a theme that's already set up in the way,that you need it either from a visual,design perspective or content layout or,both it can save you a lot of time,shopify supply just dropped this new,collection of products and did a photo,shoot for them and there's a free theme,called color block which is perfect for,showcasing fresh collections as they,come out so we're going to go ahead and,install that,using theme settings to achieve the look,and feel that you want,okay so here we are in the theme editor,with a fresh install of color block
Congratulation! You bave finally finished reading Process Creative theme shopify and believe you bave enougb understending Process Creative theme shopify
No difficulty
