hey guys it's your boy joe back at it,again codingphase.com,in this video we're going to talk about,how do you come up with designs,for your shopify themes okay now,i can tell you like this there's a,certain style for,e-commerce websites that they're gonna,repeat themselves okay,certain things that one website might,have other websites is gonna have and,the reason why that is,is because if it's working for them it's,gonna work for you too,okay that's the model of e-commerce,right,a lot of companies go in and spend a lot,of time into,doing a b testing and if it works for,them and they're able to be a top,selling brand,it's gonna also work for you because,they're already putting that money into,research and development and testing so,now you can,literally copy what they have done as,far as like the layout as far as,the you know the way how they do,marketing etc,that's also going to work for you okay,so again,you're gonna see websites like this one,where they have like a big hero section,you're gonna see sections where they,have three to four columns,showing the products you're gonna have a,section where,they're gonna show like an image of a,model uh wearing the clothes and then,that's gonna link to a collection,same thing as over here you got the,different type of collections like let's,say maybe you want something that's,neutral,something that new arrivals travel,sessions or,uh better basics etc you're gonna see,the same thing,everywhere right this is gymshark.com,okay we got the hero section,we have another hero section right here,okay you'll see they have another hero,section and then from there you start,seeing the,uh big column images okay and also too,if you go into the collections,themselves,you're gonna pretty much see the same,thing where they have all of the,products aligned,a certain way sometimes you're gonna,have the filter section,on the left side all right i think,this company does it like that where,they have,yep there you go okay they have the,filters on the left side,and then they have the products on the,right side uh for,gymshark they have it on the top and,then,down here they have uh all of the,products so this is the same thing that,you're gonna find everywhere it doesn't,matter if you're looking at,something like louis vuitton you'll see,that they're also doing the exact same,thing,okay and they have the filter on the top,and then the products as you scroll,you're gonna see this everywhere okay so,when it comes to coming up with a design,again you can look at what's already,there and then come up with a mood board,right what is a mood board right a mood,board will be,like let's say for example i wanted to,come up with a design for,the steam i could go here uh screen,capture this,if i was on mac i will screen capture,this right here this menu section,then i will also screen capture the menu,section for,gymshark then i will also screen capture,the menu section for uh this section,right here for all birds,okay and then maybe i w
Let's move on to the first section of Dev working theme theme shopify
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
Globe again in today's video we're going,to speak about Shopify CLI 3.6 3.2,whatever you want to call it and before,we get started I just want you to know,that I have tried it I have give it a,shot and it's really awesome and you,will see we will get to all the features,in a second so bear with me and you will,also need to know that the old version,will no longer be supported until uh,like I think it's 31st May of next year,and usually some people still use 10K,because well some Futures teamkit has,some advantage over the old CLI version,especially for team development but now,with 3.x it's really you will see that I,think everyone will make great to 3.6,once once I show these Futures so yeah,I'm really really excited because you,will see all the features in this in a,second,but before we get started with the code,you will actually need to migrate to the,newest version,and to migrate they have if you click,Shopify CRI in the documentation they,have a really easy migration guide and,especially if you are on Mac since,Michael you have to do if you have,installed it with Homebrew all you have,to do is really click home brew upgrade,Shopify CLI if you have never installed,Shopify CLI in the first place all you,have to do is just Brew I think add,Shopify CLI and it will go to it will,install the latest version which is,um which is 3.22 for me so yeah,if you are on other uh machines like,Linux or revi or,excuse me or Windows you probably have,installed it with Gem and if you have to,if you had installed it with gem you,need to uninstall the old implementation,and install the new the new,implementation using uh using npm or,yarn or pnpm whatever you like since,it's now hosted on npm because it's a,typescript package it's a node package,and it's no longer a ruby package since,the newest version is actually,built using a typescript the old version,is using Ruby the newest version if you,if we check the GitHub you will see it's,Rewritten in typescript it's not fully,Rewritten in typescript it's actually a,wrapper especially for the teams part,it's a wrapper over the typescript,implementation over the old Rabbi,implementation sorry so yeah,uh now all you have to do is just click,here on global ads at Shopify and it,will add Shopify you will need to,install the core package which is,shopify.cr day and then install the,plugin yeah it's a plugin uh you will,see how the Shopify team commands all,are a plugin it's actually a plugin that,is added to the core CLI to support,Shopify team Commons so now if I,actually once you do that you will have,the latest version,and once you do that,um you can also still use the old,version of the Shopify CLI uh but you,will have to call it to change the pads,especially if you are if you have,installed it with Homebrew you will have,to change the naming using the pads like,like we do if you are if you're ever,used python for example we have python 2,and python for python 3. that's that's,reminds me of that,um the old implementat
After seeing the first section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next second section about Dev working theme theme shopify
Shopify CLI for Theme Development (How to use)
Shopify CLI for Theme Development (How to use)
hey everyone in this video we're going,to talk about shopify cli for themes,shopify cli stands for shopify command,line interface and is the latest,alternative to shopify theme kit,previously shopify cli was a tool that,helped users create and deploy shopify,apps but since the online store 2.0,announcements in june 2021 shopify have,extended the shopify cli to provide new,functions for theme development,including the ability to serve themes,locally,so in this video let's talk about how,the shopify cli works and how to include,it into your theme development workflow,before we get started talking about how,to use the shopify cli for theme,development i want to provide some,context here and talk about where this,tool fits in compared to the other,previous tools for developing shopify,themes,when i first started shopify theme,development back in 2019 there were two,tools available slate and theme kit,i believe it was theme kit that came,first but at shopify unite 2017 shopify,announced something called slate a new,build tool for shopify themes intended,to provide a more developer friendly,scaffold for building themes,slate did have some good points such as,the ability to split up scss into,multiple modular files and update css,changes locally but over time shopify,decided not to maintain the project and,eventually announced that they were,officially ending support for slate in,january 2020. therefore slate is not a,tool i recommend to anyone anymore in my,opinion the only reason to use slate is,if you have to i.e you have an existing,slate project that you're unable to or,unwilling to migrate that left us with,themekit a simple tool for uploading and,downloading theme files from your,shopify store making it possible to work,on themes locally,and now the latest option which is to,use the shopify cli for theme,development,chances are if you're watching this,video close to the release date you,might be using shopify themekit as,mentioned shopify themekit is a simple,tool for uploading and downloading theme,code from themes already hosted on your,shopify store we can do a one-time,download from themekit or a one-time,upload from themekit or we can run the,command theme watch and allow themekit,to detect and upload changes to the,theme as it exists on the shopify store,as soon as they happen for a full,tutorial on shopify themekit check out,the lesson in my skillshare class,shopify theme development how to build,and customize your own online store the,shopify cli by comparison is a bit,different with shopify cli you first,connect the tool to your online store by,running shopify login and from that,point you can begin to serve the theme,code you have on your computer locally,running shopify theme serve the cli will,take your theme code and generate a,development theme this development theme,will come with a theme id and a theme,editor but it won't exist in your,shopify store's theme library and it,will disappear after you run shopify,logout,running these s
After seeing the second section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next third section about Dev working theme theme shopify
Shopify Developer Tutorial: how to use Theme Kit
Shopify Developer Tutorial: how to use Theme Kit
das very first video how to make you can,feuert ihn falls die uci ein bild video,entdecken sie per default deb-teams,installed die abifeier make any change,of service qos team uk back up here,waiting team falls wir das bild in,action sind nach riga übrigen update,action die imusic des elk creek windfang,wanna make some changes to one of those,templates perfect for small change the,escape projects denn judith pfefferte,user logitech sunny cars sind des edit,format ins politologe text-to-speech bei,der syntax highlighting language to do,so would you like it geschäfts google,vor dem kinderfest recycling ab dass,page you have some installation,instruction set manager der installation,of working on windows maschinen red bull,toyota executable files for windows live,spaces im gtc paris mauerfalls heißt,what you next ist ob in your file,browser and go to local des ccee program,files and can you feel des kolping kit i,have danced all die tausend user mit,quentin der folder julias place der,exekutive feiert hier der nächste us,mcfit accessible früh bekommt global,what you need to do er ist kapitän olaf,meidt here right click und des pc,properties will bring ab control panel,the advance systems things we bring ab,das ist ein properties pop up and find,new environmental so doubleclick und,ipad wie just cause i just to the bottom,of das hässliche aber die harten start,er ist ein menschen,ok ok and you should be good to go go to,follow the chase continues to define,development related so indes viel wie,heft zu gefrieren,so widmen,die von project development storm and,create and they did you have to add in,emergency developer e mail von we can,just use testament templates ersetzt,safe auf konstante risk rating des abv,ein extremist der firma die von der film,über erde und den feind ist in der,texteditor youtube for just got that,could in däniken feind die us-tochter,browser des open air terminal bei,castings die in der open in der voll,integriert,thermalright hier button aber ron wood,navigate you von alicia tiefste kommen,prompt wurden diskutiert die download,download oder files in der asse gibt es,ist halb vier ist das ist etwas make it,to changes to any fall wie make and just,pusht abdeckt oder ebenfalls des,development folder hier,and media molecule layout dort liquid,food testing the little test the box and,you see something gefalle das processing,updating v.li quick check ist es das,change up light to the shop perfekt vor,das video hope you want something you,and any questions das treibt den daumen,in connection with the developing,centrex video bei
After seeing the third section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next fourth section about Dev working theme theme shopify
Make money selling Shopify Themes (best chance is now)
Make money selling Shopify Themes (best chance is now)
hey everyone jan here codingwithyan.com,so today we have the first episode of,our sell your own theme series and all,of you have been asking tons of great,questions so please keep doing so this,project can only be as good as the,community is and you guys are amazing so,appreciate everyone watching and now,it's time for some answers so let's dive,right in,all right liam then thanks so much for,taking the time today as you know we're,here to answer some of the most burning,questions that people have,are you feeling good about it as well,i'm feeling great jan thanks for having,me here um,obviously a huge fan of the channel and,uh yeah any opportunity i can have to to,share the good word of the shopify theme,store um is is my absolute pleasure um,yeah then maybe as an entry point to our,conversation one of the most burning,topics or one of the most requested,topics was like what is the best way to,create a theme which kind of ties into,two subcategories the concept then the,actual development like workflows tools,and everything,so why don't we talk about the concept,first and,what is the thing or what can we give,people on the way in order to come up,with an amazing concept should we talk,about that,yeah i think that's a great place to,start,so i think the the first thing to really,think about is to really dive into how,merchants and how buyers will interact,with a theme,and and also consider how it's different,to design for a marketplace versus,designing for an individual client,so with an individual client you're very,commonly going to be requesting or being,asked for specific settings whereas in,theme store,these settings are,a little bit more generic um they're not,requested specifically by any merchants,um so merchants may be encountering uh,these features and functionality for the,first time um so i'd really you know,before even writing a line of code um,you know think about the the buyer,journey think about the merchant journey,and how,you know all of these people will,interact with the theme with the online,store editor,and you know think about know you're not,really designing just a storefront,for a buyer to,pick a product and take it to the cart,and check out you're also,essentially designing a ui that,merchants will be using to,bring their store to life,and and ideally with the the minimal,amount of friction possible,okay yeah i think that's a very good,point because as you know many merchants,don't have a strong technical background,then the settings have to be very,straightforward i mean this all ties to,usability i think that's what we are,trying to trying to get across here,um yeah so would you have any tips or,maybe how could someone approach that,would you recommend maybe using tools,like or like design tools to come up,with the visual concept first or would,you just be diving head first and,writing lines of code how would you,approach that yeah so i think there's a,few different methods um but i would,definitely advise,um investing
After seeing the fourth section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next fifth section about Dev working theme theme shopify
After seeing the fifth section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next sixth section about Dev working theme theme shopify
How To Build A Theme From Scratch
How To Build A Theme From Scratch
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
After seeing the sixth section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next seventh section about Dev working theme theme shopify
The State of Shopify Theme Development
The State of Shopify Theme Development
and the this session for the next uh 25,minutes or so we'll be talking about the,state of Shopify theme development so,looking at different workflows which are,available for theme developers uh recent,features which have been released for,themes and our vision as well for the,future,so just just a quick introduction on,myself my name is Liam I'm a developer,Advocate at Shopify I've been with,Shopify for about seven years now so in,that time I've been creating a lot of,content for developers looking to learn,how to build on top of Shopify I've been,creating a lot of YouTube videos blog,posts and of course being able to be,here this is my first time visiting,Australia so it's extremely exciting for,me and yeah,it's yeah amazing connecting with our,developer community so yeah over the,next two days please do grab me for a,chat would love to to connect,so for this session this is going to be,the plan for our journey first we're,going to look at where we are right now,then we're going to look at where we are,going and finally we're going to look at,how we will get there and then we should,have some time for a q a towards the end,so to answer the question where are we,right now we need to take a slight step,back into the past back to Summer of,2021 and Shopify unite which was a,milestone event for team developers we,had the launch of online store 2.0 which,enabled sections on all pages we had,meta Fields natively launched for,themes which allowed us to have much,more flexibility and personalization on,different pages we saw the relationship,of apps and themes become much more,closely combined with Team app,extensions we had of course our vision,for custom storefronts for hydrogen and,last but not least we also had the,reopening of the theme store after the,Hiatus for a while,and in the months since then we've been,able to progressively enhance many of,these features so we've,improved with the limitations that we,had on sections and blocks by making,more sections more blocks available on,pages we have more Dynamic sections,available on more pages for enhancing,meta fields we also made the developer,experience of working with Team app,extensions much much better as well so,all this to say is themes are much more,powerful more adaptable and more,valuable to Merchants than ever before,so just to look more generally at the,ecosystem in general we see you know,quite strong and steady growth we're,seeing millions of merchants are looking,to improve their store looking to,customize their online experience and,their buying experience for their,customers we firmly believe there's a,great opportunity here for developers,looking to enter this space,if we look across to the App Store in,particular last year we saw that 400,million was paid out to our app,developers just increase of over 80,percent from the previous year and of,course we reduced our Revenue share so,Merchants who earn up to their first,million dollars don't need to pay,Shopify any Revenue share and
After seeing the seventh section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next eighth section about Dev working theme theme shopify
5 Tips For Better Shopify Theme Development | Tips For New Shopify Theme Developer
5 Tips For Better Shopify Theme Development | Tips For New Shopify Theme Developer
how's it going guys it's bernard and i,decided to make a new video it's been a,while so i prepared myself and while i,was cleaning i was looking for q-tips,and i found five of them and while i was,looking at them i noticed or i thought,maybe i can give you guys the tip,you know the tip to become a better,shopify theme developer,so in today's video i'm going to give,you five tips to improve your shopify,theme development number one is to use a,code editor like vs code or sublime text,editor instead of using the built-in,code editor of shopify especially if,you're working on a big project this,will save you a ton of time from typing,codes a lot of codes and this will also,save your eyeballs from this,you know why would you stare at this,bright,so as much as possible try to install vs,code or sublime text editor because most,of these code editors they do have a,built in dark mode interface or at least,they are customizable and once you have,your code editor installed try to also,install shopify cli that way you'll be,able to make changes to your shopify,theme project without ruining the main,theme of the shopify store that you're,working on another thing that you can,use with shopify cli is the theme chat,this will help you find the issues in,your project or in your code like typos,missing variables or unused variables,and the list goes on number two is to,plan your project are you building a,shopify theme from scratch if so then,create a plan make a plan make a mock-up,design so you know what to do now about,making mock-up designs or web design,plans it doesn't have to be the polished,the whole point of planning is to help,you go through the steps of making a,shopify theme you can use anything with,this planning stage it could be,photoshop for making the mock-up designs,it could be just a document describing,your theme it could be a wireframe it's,all up to you but if you're working with,someone then make sure that others can,understand your web design plan also,before you create shopify themes you,should know first what this theme is for,like is it for a shopify store that only,sells one product is it for a shopify,store that sells multiple products what,about the niche is it for,gardening is it for clothing is it for,tech is it for women is it for men i,recently had a client asking me to,create a shopify theme from scratch and,i asked him what is the niche so he told,me that something related to gardening,so with that kind of with that,information i knew exactly what design,i'm going to,i'm going to create and i'm also i also,know what color palette that i'm going,to use so knowing all of this,information really does help but what if,your client is only asking you to create,a feature or a section if that's the,case then what you should do is to learn,and understand the shopify theme that,your client is using make sure that what,you're going to create matches the,design of your clients shopify theme,also if you're working on a pre-existing,shopify
After seeing the eighth section, I believe you have a general understanding of Dev working theme theme shopify
Continue the next ninth section about Dev working theme theme shopify
How to edit a Shopify Theme - Development Best Practice
How to edit a Shopify Theme - Development Best Practice
hey das ist jan vom letzten end days,video ever made for small modifications,to existing team der golf das video ist,die show you can use the developer tools,to find out exactly when its place,changes energiewende ballast video of,the week and find the correct team pfeil,die pending und change you want to make,the front and the fear hätten,massives bevor die vier euro die familie,musste shopsystem we can stop the way,ok so beck immer development store ohne,page and to give the story of the,world's gesamte letzte posten helfe,client ente client wants to remove des,little sale text lag hier bei den,city-fans one fördern ein bett displays,tailings ist erfolg sagt mit gc you save,up to 15 prozent over the wall ist der,safe und das product eine fixe überlasst,video you might think okay let's go tell,it on the open update and later products,including der voerder section character,and let there be just for fun action,template ein bisserl bring you tube,template filewich konzert auf dem elend,liquid 104 just starting out diesmal mit,computing overwhelming so christian,beeck sexy die unicum exchanges indessen,exercise 100 postämter implement changes,union vigo hat manchesters problem,ok superstores front and inspect element,automotive news pace award gold to the,losail text right click and inspect ein,display bringt bei chrome developer,tools einige hätten ziehen die ist wie,vor,basically sie hier ist old age tml auf,der website nsa hannover die elements,der elemente kate heiratet und websites,und web site auf das windows tool des,css sulz der applied to any element in,folge sampl remove the context no longer,be beugt wurde auch eine focus on right,now the search for us cs s klasse select,the one for sale text vollpreis item,label which way birgit prinz point to,search for in diesem fall ein oder holz,notice ist der charakter information,center container div class quadrat preis,so dass es demnächst reference point,arbeitswoche in das team fall zuletzt,hauptbecken verletzt,okay die very first thing the search for,that is des css glas verpackt an was für,anders gehabt und es ist es die only,match in dem very likely das ist der,place we wanted to about that i can,always the test as safe diesem fall,effekte frontend ein verliebtes test,will appear at position sowie zwei,piloten,von der preisfront perfekt so instead of,writing testen wie credit suisse cs s,class tailings links und judith action,zuletzt verdankt dort komplettpreis next,meines the park kreischef raed know that,we wanted someone to display result in,präsent denn die weide bei der,kompressor produkt dort komplettpreis,next kloster likud-blocks editors and is,said and the front and we can say you,say the perfect but we can do ist,inspect das elemente can relate to,factors and i can't you next ist klickt,es mit plus aktuelle news es den,autorinnen,select of our new age tmn element denn,die linke wird sonst teil des erfolgs,ampel wie warnte kaller to get my baby,wants to be wild wird small and we won
Congratulation! You bave finally finished reading Dev working theme theme shopify and believe you bave enougb understending Dev working theme theme shopify