Shopify Dev Tips: Convert an Existing Theme to a Workflow
hey everybody,i'm sam webb and this is shopify dev,tips,today i'm going to talk about how we can,take a pre-built theme,and set it up within the workshop,workflow so that we can continue to,build on this project,through that workflow without having to,make all of our changes directly in,shopify,so let's get started starting off we've,got a theme called,simple this is a free theme that's,developed by shopify,if i go to actions and preview it,we'll see what site looks like so this,is the home page it just shows uh some,of the products,and the collections here on the left if,i were to click one of the products we,go to the product page so it's a fully,built theme,and this is what we'll be using for this,video to start the first thing we want,to do,is duplicate the theme,now depending on how many files you have,this could take a few,minutes but it should be pretty short,for this theme once it's done,you'll see it down here in the theme,library the name of the theme was simple,so this is,it just automatically names a copy of,simple and then you'll see this just,added tag,to let you know if you had multiple,themes which one was the one that was,recently added,and what i'm going to do is go to,actions and rename this theme,to dev sam right so this is going to be,my development theme second thing i want,to do is create a private app,so that i'm able to connect my code my,local code,to shopify i've shown you this in,previous videos but really quickly,you go to apps all the way at the bottom,there's,manage private apps we'll click that,click create private app,so we'll name it and then we'll show,inactive admin api permissions,and scroll all the way down,to themes add read and write,that's the only permission you need for,this specific private app,and we'll click save now before we do,anything with this let's hop into,the code i've got my terminal open in a,folder called double time deals,which is the name of the store and what,i'm going to do within this folder is,run,the workshop command now this is,assuming you already have workshop,downloaded,what we're going to type here is,workshop and the sub command is going to,be advanced gulp,and we're going to add the option name,equals d2d website,if i ls then we'll see that we have a,folder called dtt website,and if i ls dtd website,hit enter we'll see the files in there i,use vs code,so i'm going to type code dtd website,and that's going to open up the code for,me the first thing we need to do,is run yarn install,now that we have our dependencies we,want to make sure that we can connect,this code to shopify,and that requires a file called,config.yml,this project comes with a file called,setup.config.yaml seen here and this is,an example file,to show you how it's supposed to be laid,out and so what we can do is copy this,file,i'll run a command cp,setup and then we'll copy that over into,a file,called config.yaml,and now that we have config.yml this is,where we'll start adding our details,about our store so we
After seeing the first section, I believe you have a general understanding of Workflow theme shopify
Continue the next second section about Workflow theme shopify
Shopify Theme Development EP04 - Staging & Workflow
Shopify Theme Development EP04 - Staging & Workflow
hello and welcome to the fourth and,final video in this series on Shopify a,theme development in the first video we,covered what a theme is and where it,sits in the context of the Shopify,environment in the second video we,learned what data is contained in your,theme and what data remains the same,while changing themes and in the third,video we went over how to navigate your,theme structure in this video we're,going to cap off the series by talking,about workflow as an average Shopify,seller there's probably been a time when,you wanted to integrate like a,third-party widget that required just a,small code change in your theme they may,have given you you know a little snippet,of code and asked you to include it in a,certain part of your theme code maybe,you went straight into the Shopify admin,and you clicked edit code on your,current theme found the right file,inserted the code and hit save that my,friends would be the most basic way of,changing your theme code but let's say,for instance you're developing a whole,new section and including it on a,specific page a page that is quite,important to your business maybe this is,the product page where people evaluate,your product before making a decision,suddenly it doesn't make sense or as,much sense to live update your current,theme anymore as any breaking changes,will show up to the user straight away,this is where the idea of staging and,workflow become important if you're just,including a small snippet of code on,your theme maybe your basic workflow is,okay but as you develop more complex,features for your store or your business,grows to a point where the impact of a,small change can make a significant,difference to your users experience,you'll want to start thinking more about,workflow the first precaution and the,one that is easy for anyone to employ is,to simply duplicate their life theme,call your duplicate theme something like,dev theme just to distinguish it from,the one you already have and then make,your changes to this new dev theme the,changes won't be live on your website,but you'll still be able to preview them,through your Shopify admin when you're,happy with you,new theme you can either to placate the,theme and publish the duplicate or you,can directly publish your dev theme and,then rename it to something else after,you publish it you don't want to leave,it core dev theme after you publish it,this is how we can stage a theme code,changes but say for instance we were,working on a new page and we want that,page to be linked up in our main menu,navigation remember from episode 2 of,this series pages and navigation a part,of your online store data so any live,changes to pages on navigation will,apply to all themes now when it comes to,the page itself we can mark the page,visibility as hidden and then hit,preview page but then we can't actually,link that page in our navigation until,it is published this is where it starts,to get a little tricky as we start to,play a little game of cat-and-
After seeing the second section, I believe you have a general understanding of Workflow theme shopify
Continue the next third section about Workflow theme shopify
Shopify - Understanding Theme Workflow With Your Developer
Shopify - Understanding Theme Workflow With Your Developer
hey everybody this is zory from astroweb,and i'm making this shopify video for,shopify store owners and this video is,going to talk about how to interact with,your developer what do you need to know,what are the most basic things you need,to know,of how they develop and how you,communicate with them and how you,actually deploy,new code so what does that mean deploy a,new code,you ask for a certain feature for,example on my development site,i just want to change all my colors to,blue for example,so what you do is you write out the,requirements and you tell them i want,things to be blue i want this to be blue,i want this to be this blue i want you,know etc,whatever the requirement is so what you,do is you give it to them,and then you typically just wait for,them to finish it but there's a really,important part that you need to,understand or you should understand of,how they should develop,and what you should do in order to keep,your website stable and well and not,have conflicts between the two so this,is a topic of this video okay,so what do you need to know it's really,really simple,when you go to the back end all of the,code changes,are in your theme right so if you click,here on themes right here you can see,your live theme and you can see all,these other themes typically you should,have a lot of them okay,and so what's going to happen is you're,going to give the requirement to the,developer and they're going to take that,theme and they're going to duplicate,that theme right,so they're going to go here for example,express1 they're,going to click on actions duplicate and,what they're going to do,when they duplicate it is it's going to,be loading here and i'm going to rename,this okay so,let's say i'm going to call it okay,express,and then copy of express and then i'm,going to put maybe the,date for example and i'm going to put,blue,color change change okay so,right here and so what you're going to,do you're going to name every single,theme with the,actual development thing that the,feature the development requirement,that's there so you can easily go,back and forth you can easily see what,was done in every single step,why do you need to do that a few things,number one,is you don't want the developer working,on the live site because if they make,mistakes,or they're you haven't tested yet or,while they're developing and making,things,actual visitors are going to see it,because it's the live site so,rule number one is you never want,developer to work on the live uh theme,okay that's number one that's why you,have duplicates okay,number two is when they work on it uh,you're gonna do a few things so number,one you duplicate either your developer,is gonna duplicate the theme and you're,gonna tell them,only work on this do not work on the,live one,okay so that's number one number two,while they're working on it you do not,want to,customize the theme because if you,customize the theme right here,for example change the logos and things,like that then whe
After seeing the third section, I believe you have a general understanding of Workflow theme shopify
Continue the next fourth section about Workflow 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
After seeing the fourth section, I believe you have a general understanding of Workflow theme shopify
Continue the next fifth section about Workflow 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
After seeing the fifth section, I believe you have a general understanding of Workflow theme shopify
Continue the next sixth section about Workflow theme shopify
Shopify Theme Development Workflow
Shopify Theme Development Workflow
hi my name is Britt and I want to show,you my Shopify theme development,workflow I think it works pretty well,and allows the person using it to use,their own editor work from their own,machine support different stores and,environments and really have a workflow,that mirrors other development,environments by default when you use,Shopify it is easy to go to the theme,and edit the HTML and CSS directly,however to me I don't really love this,the editor is pretty good I'd say it's,competent but it doesn't allow you to,have multiple views of different,different pieces of code it doesn't,allow you to customize the editor and,it's just not what I'm used to right and,once you have an editor that you're used,to and your most productive in it's,really nice to be able to use that also,by default your themes aren't tracked by,a version control like git so I really,wanted to be able to track my theme of,get so it's easier to collaborate and I,can just see the history of things over,time and you know go back to old,versions if I need to be need to and,this workflow accomplishes that so I,want to walk through it and there's also,an accompanying blog post that explains,all this in text and has the code that,I'll use so if you're looking a copy and,paste it or just you know browse through,it you can do that too,so the first step is to install theme,kit theme kit is a command line program,to upload and manage the files on your,Shopify store theme and it works really,well has no dependencies so it's easy to,install you don't have to install,another programming language or anything,like that and the installation,instructions are all here at theme,KitKat so if you just google theme kit,or just go to this the first step is to,install and get it set up once you have,it installed and set up you'll have the,theme command you can run the theme,version to see what version you're using,so I'm using version 4.0 4.2 and things,may change as the versions change but,the blog posts will always be up-to-date,and the basic concepts will stay the,same so now that we have theme kit,installed since I already had installed,we're just gonna keep on,we're gonna get my store set up which is,a test store I use for developing,different things set up with this,workflow so I can show you how how it,works the first step is to create a,directory to work out of right so I'm,gonna call this kinder because that's,what my test stores call it just called,kinder just random word I'm gonna move,it into that directory and as you can,see there's nothing in there yet we're,gonna have some files and the first file,we're gonna add is called config -,example yeah mo the theme kit program,expects there to be a file called config,dot Y Amal and that'll let theme kit,know the settings for the store,including the secret password that will,let it be able to make changes as needed,so what we're gonna do is create an,example file that we're gonna check into,the git repository that will not contain,the secrets but
After seeing the sixth section, I believe you have a general understanding of Workflow theme shopify
Continue the next seventh section about Workflow theme shopify
HUGE SHOPIFY UPDATE!! Create Email Automation Workflows and More! TUTORIAL
HUGE SHOPIFY UPDATE!! Create Email Automation Workflows and More! TUTORIAL
hey guys it's the ecom bull here and,today i'm bringing you super good news,shopify has finally released automation,workflows which will allow you to create,automated welcome win back or upsell,emails all within shopify,you will have access to an automation,editor where you can edit the conditions,view the summary page that shows the,status of your workflow email results,and much more everything for free i got,early access to these two and i've been,playing around with it for a little bit,and now i'm ready to show you how to set,it up so let's get started in three two,one,okay so let's get started so to access,the new marketing automations you're,gonna go to your shopify admin and click,on marketing and then,automations,and click on create automation,and right here,this is all new,all new before you cannot do that before,you had to use different apps some of,them paid but right now everything is,here so i'm super excited about this,um we're going to start with a welcome,new subscriber automation,because what i want to do is check this,out,if you go to my website and just scroll,all the way to the bottom,you can see how i am offering a 10,discount,if you put your email there and sign up,for the newsletter i also have a pop-up,but on every single page you can see,this thing at the bottom,and before i had to use third-party,tools so let's try this with the,official shopify automations so as soon,as the customer enters their email i,want to send them a message with a,coupon code welcome blah blah blah and,here's your coupon code now you can buy,and if they don't buy i have their,emails so i can retarget them later,so,very important always you have to offer,something okay offer something in,exchange for their email,so let's go back here to,the automation panel and click on,welcome new subscriber,and this is the workflow editor okay,here is where you specify,the the campaign start here's where you,put the conditions and then also where,you put what to do if these conditions,are met okay it already pre-populates,okay with some basic stuff because we,chose welcome new subscribers and here,you can see that the campaign well the,workflow will start when a customer,subscribes to email but it's gonna check,if the subscription method is not equal,to checkout because sometimes when,people,subscribe it's because they just went to,checkout and they put their email you,don't want to send them a coupon code,after they already purchased they're,gonna feel horrible okay don't do that,you wanna you wanna make sure,that you're sending this coupon before,they check out once they check out,no they already spent the money i'm,sorry you know so okay so it's gonna,check for that and then what's it gonna,do is gonna send a marketing email,automatically instant okay,so,let's click here,because we want to modify the email,and we're going to click on edit email,content,so let's put a subject for this welcome,email,thank you for joining here is your,discount code,and now this i
After seeing the seventh section, I believe you have a general understanding of Workflow theme shopify
Continue the next eighth section about Workflow theme shopify
How to use Github with Shopify (Online Store 2.0)
How to use Github with Shopify (Online Store 2.0)
hey everyone welcome back to this series,on shopify online store 2.0 in this,video we're going to talk about the new,github integration with shopify this is,a very powerful and exciting tool that,has come out in the suite of changes,that shopify have labeled as online,store 2.0 i'm going to jump straight,into the tutorial today and show you how,we can automatically synchronize shopify,themes with branches on repositories,using github,so in today's tutorial what i'm going to,do to illustrate using github in shopify,is to take an existing project create a,git repository connect it to github and,then use that remote repository to,connect to our theme library here on the,shopify store that we're working on in,my case it's chris testing shop as,always all right so,for those of you who haven't really been,across version control in shopify before,this,virtually there's only one native way to,do version control in shopify and if we,click on edit code and look inside here,we can see what it is,let's open up any particular file and as,you can see next to the file name if we,click on older versions this drop down,menu appears and we can revert to an,earlier version,this is a very primitive form of version,control it doesn't work as good as git,git has so many more features in terms,of looking at line by line differences,between commits and branches creating,branches for that matter merging in,branches and pushing and pulling codes,so,git is a much better version control,system than this which was all that,shopify offered you up until now,so clicking out of that i want to draw,your attention to an article i wrote,last year about using git with shopify i,encourage you to still read it even,though it's a little outdated now,because we do have this shopify github,integration now but essentially this is,how i used to do my git before the,integration came out,and because there was no integration,what i would do is i would of course,have to move the code locally,so i talk about the development workflow,here,i would have to move that code locally,as i recommend for all developers to do,and of course i was using themekit at,the time,as shopify cli has only just been,extended to work with themes which we'll,cover in a later video so what i had to,do,was i had to synchronize my theme code,with my branches manually so as you can,see here in this little diagram,you of course have your current live,theme i synced that up with a master,branch and then have a staging branch,and then if there's multiple developers,working on the theme you can have a,branch for each of them and then they,would merge into staging you would look,at staging and then you would merge into,master and go live but the problem with,this is you had to do this all manually,and the changes only went one way,so,using this one-to-one relationship,between themes and branches we were able,to determine which changes had been,carried out on which theme and the only,issue is that this relationship this,structu
After seeing the eighth section, I believe you have a general understanding of Workflow theme shopify
Continue the next ninth section about Workflow 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
Congratulation! You bave finally finished reading Workflow theme shopify and believe you bave enougb understending Workflow theme shopify
No difficulty
