Shopify Theme Developer: A Day in the Life

what's up YouTube today I've got a different kind of video for you guys today I'm gonna take you through a day in the life of a Shopify theme developer you may have seen some of my kind of day-in-the-life videos on my other YouTube channel Chris the freelancer but while you can watch me work from beautiful locations and tap on the keyboard move the mouse around the real magic is happening inside the computer and so I think for you guys interested in web development you'll appreciate what I actually do on a day-to-day basis currently working as a Shopify theme developer working for an agency so in this video that's exactly what we're going to do I'm gonna hop onto the computer and I'm gonna show you a day in the life of a Shopify theme developer all right so before we get started a few things to note obviously depending on when you're watching this things might have changed right now my situation is I'm currently working with a single agency client so the agency has their own clients and then I just contract for the agency so I'm working with one agency and one of the projects that that agency is running at the moment a website project is something that I've been basically spearheading and doing most of the work on so you'll see that when we log in today you'll see that the most of my work is being done on this one website project just note however that I will be blurring out a lot of things in today's video because I want to respect my client and their clients privacy so I won't be giving away any identifying information but hopefully you can still see all that you need to see in terms of the workflow and the actual steps I take on a day to day basis so without further ado let's jump into the computer let's check the emails and see what has come through over the weekend so as I mentioned I'm working with an agency client and this agency uses the project management tool asana so the workflow working for this agency is I get assigned tasks I complete those tasks or ask for more clarification in order to complete the tasks and then I put the preview link back into the comments of the tasks for the client to review if they're happy they can mark complete if they need some changes they can ask for them in the comments and then I can do them and comment back so using asana it's basically just tasks with comments and back and forth until the task is complete so each day I'm starting with the communication within asana but I'm also starting with communication via email because my client does send me emails for perhaps things that aren't in a particular task so I'm going to click over to my work email inbox here and as you can see I've got a mixture of notifications from asana mixed in with emails directly from the client so that way I have all my client communication in the one place in my inbox I'm sure I could look at notifications for asana with in asana but I prefer it this way seeing my notifications for asana as well as my email replies here you can see I've got another email inbox and that's because my client gave me an email address under their domain so that when I talk to the client I can look like I'm coming from their company so I keep this one open as well but most commonly I use this one which is my own work email for my freelance business ok and the other tab over here I've got toggle this is the tool that I use to track my time the client doesn't actually use toggle they use some other one called minute doc I'm not a big fan of minute doc so I actually just copied my timesheet across from a toggle to minute doc if they were using one that was a little bit more mainstream I probably would use it but I'm used to using toggle and I like using it so here's how it kind of works I go into my email and let's have a look at this one right here so the client I have sent her the preview link for the completed work she says that's great make sure you pop it into the handover manual if I scroll down though there's been two comments made she's also made a comment that the reviews heading is being showed on products that don't have any reviews I thought I already corrected this but obviously this is an error so I'm gonna hit reply in a sauna so I'm going to open up that task and so now I've got this task open and I can see all the comments that we've had I need to now go in and make that change make that fix so what I'm gonna do is open up the admin address of the website click on online store and then inside my online store I've got this theme here that I'm working on for the new theme so from here I want to click preview remember you never want to work on the live theme especially when you're working with big clients if it's your own theme I guess you can kind of do it but definitely when you're working with clients do not edit their life theme you do not want to cause issues on their live website all right so now I'm into this preview of the theme that I'm working on and the issue is on a particular product page so I'm gonna go find that link maybe close down the other one and if I scroll down I can see that there's a reviews heading even though there are no reviews so what do I need to do I need to open my code editor and change this but before I do that I'm going to start the timer so of course I'm a freelancer I get paid for my time so I need to be tracking everything I do I'm gonna go in find the project name under that client and with the client we've got a bit of a naming convention going so I'm just going to use that alright so now we're running the timer let's open up our code editor which I'm using Visual Studio code at the moment and then I'm going to open up two tabs so for the second tab what I'm gonna do is run my git commands in here I'm gonna run git status just to make sure that my working tree is clean there's nothing to commit and if you want to know more about get there is an article on my website I'll just show you that really quickly with this particular client I actually implemented get for them using my own recommendations so if you're interested in using git with Shopify you can read this article on my website it's at Christopher calm slash get with Shopify ok so I open up two tabs because I'm connecting my code with two different places I'm connecting it with git and I'm also connecting it with the actual store so the code exists on a centralized git repository it exists on my local computer and then obviously on the store because a theme cannot run in any other environment other than a Shopify store ok so just making sure I'll get my work branch is clean and then in the first tab I'm going to run theme watch so that I'm running the theme kick command to check for any changes it'll say what the theme ID of the theme that I am currently connected to is I have been working on the same theme at the whole time so I don't need to double-check this but if you need to work on a different theme you would obviously have to make sure that you're connecting to the appropriate theme all right so now I am going to go back here right click to inspect the element see if I can find at some identifying piece of information here it is the class is reviews - sections underscore underscore title so a quick way for me to just get to that part of the theme is by searching for it now I'm on this file right here and I can see the heading now I was under the impression that I had a bit of JavaScript that would check whether there are any reviews and then it would hide the title so let me have a look at the code that I've written here and as you can see here I have got this code here for hide section if there are no reviews that was working up until now but obviously it's not working on this particular page so it's time to debug and have a think about why that is okay so it's searching for the data attribute on this particular element with the class name of J dmg so I'm going to search that and find that element and as you can see data number of your views equals zero so that is the correct number which is interesting so should hide the reviews section let's see reviews section right here yes so that code looks about right what I'm gonna do is I'm going to go into my console and run that it does come back with 0 so there could be a timing issue here here we're loading up the code when the page loads so here's the event listener for Dom content loaded so it's not running until the page has loaded perhaps this code is running before we get that data inserted into the element so let's just put a console log in here actually let's do it outside the if statement so I'll put this code inside the console.log and this will allow us to check the value at the time of execution now I'm going to refresh the page over here and in our console we will see that the value that comes through is undefined if I click on the source code you can see that that's definitely coming through from our console log so the value is coming through as undefined but once again if we run it in our browser it comes up as zero so this indicates to us that we have a timing issue in JavaScript there is probably a delay for the element to receive that data attribute and then we're actually trying to access it before that data attribute is in there so one way we can fix this unless of course we have a callback from the app that we're using which I don't think is the case in this instance is to simply set a delay so that's what we're gonna do above this console log I'm going to create a set timeout function that allows us to execute the code after a set period of time so the second argument in this set timeout function will be the time in milliseconds I'm gonna go with half a second and let's save and run that in our browser let's see what happens now when we run the code in our browser you can see that the heading has now disappeared and if you go to our console you can see that the correct value of zero is now coming through so obviously all we needed was an extra half second to wait and then we could access that data attribute so this is what we can use instead of a callback if there is no callback from the actual app we're using I'm going to remove that console log and refresh the page and as you can see the reviews heading will show up for just a sec and then hide shortly after and that's because this is all happening on the front end and we set that half a second delay all right so once we're happy with that we can go back into our code editor switch over to the tab we have forget and I'm going to commit these changes so first of all I'm going to check the get status you can see here that it is recognized that we edited a single file and then if I use the command git diff you can see the actual change that we made in that file this demonstrates the importance of using git so now I'm going to add those changes to my commit right my commit message and then I'm going to open up github desktop which is an app that will allow me to push my changes to the central repository I can always push from the terminal but with this project I'm having some authentication issues at the moment so right now I'm just using git desktop and as you can see I have one commit to push so I can click push and that will get pushed to the centralized repository now you can see no local changes everything up to date so now it's time to go over back to our browser head over to a signer and let the client know that this has been updated finally now that the task has been completed it's time to turn off our timer and move on to the next task so that right there is an example of executing a single change on the website but often times I'm working on building out features and pages so let's take a short break and I'll show you how that works in the next section at the beginning of this project a lot of the work I do is building out from a proved designs okay so here you can see a folder I've approved designs and so for all these pages on the website if I go into the home page for instance the client has given me Photoshop files of the approved designs so the workflow for me with this initial build has been taking the designs that have been designed by a designer and then been approved by the end client and transforming them into a real working copy on the website okay so let's have a look at one of these designs because this is made up a lot of the workflow for this particular project I'm gonna open up Photoshop and let me find that homepage design here it is right here sometimes you won't have the necessary fonts on your computer so I'm just gonna click don't resolve okay and here you can see we've got the design now the good thing about using Photoshop or any kind of raw file from a design tool is that I can go into particular elements and find out what the font size and font is and I can actually calculate positions between certain things so for instance if i zoom in here and I wanted to figure out B margin in between this column and this column I can take my what's this called the rectangular marquee tool and I can roughly draw a square between them and I can see that the width is around 31 so I would just round down to 30 here and I would make sure that there's a 30 pixel margin in between the other thing you can do with a PSD over just a PDF is I can click on one of these texts unfortunately I don't have the font here but at least I know the font now so I will include it in my project I'll click OK it will change the font which we don't necessarily want but at least I can see here what the font size is okay so what I like to do is find out that font size and then ctrl Z to put it back to the ridge or font okay so usually what I will do is I'll put this design on another screen I like to be portable because I'm traveling a lot so I actually put it on my iPad so I drag this over to the iPad and then on one screen I've got the actual website and then the other screen I've got the design and that allows me to both see what the intended look is and what I currently have at the same time so that's a little bit about how I would build pages working with an agency you often get approved designs which is really good as a developer I don't necessarily like to have to think about what the intended design is I feel like design is a bit of a specialized field designers know design and web developers know web development sometimes you might find that you have to do a little bit of design yourself and that's why there's a lot of hybrid designer developers I'm on more the developer side so I like working with agencies that have designers that will give me designs to work off of and if you're interested in learning how to transform a PSD or a PDF into a working website check out my class on Skillshare responsive web development I'll link that below in the description so you can check that one out it's two months free for new Skillshare users when you sign up through my link okay so that's essentially it guys we have at the core this project management tool obviously we have the actual store we have a theme that I work on I use theme kit which you can read about in an earlier video of mine check out my theme development series on anything technical here that you don't quite understand otherwise leave your comments below but essentially we've got tasks that come through in the project management tool client communication on email and then editing themes directly on the website making sure that's all synced up and get and running the code locally making changes and communicating back to the client so of course every day is going to be different there's new tasks to do new issues to solve but this is essentially the workflow you know you start in a you run the timer when you're ready to go connect a theme kit make those changes on the theme make sure that also committed to the git repository and then updating the client that you've made those changes and hopefully the tasks will be complete if not bit of feedback and you action that sort that all out and we move on to the next stage all right so there you have it guys a day in the life of a Shopify theme developer these videos are a little bit tricky to do because not every day is the same and some days are better to show than others so the timing on this video has been a little bit tricky but hopefully you've got some insights from it let me know if you liked the video by hitting that like button and leaving a comment in the comment section below I appreciate any feedback that you guys give if you haven't already subscribed to the channel it's something I probably don't remind you guys enough to do and definitely check out some other resources I will link them down below if you do want to become a Shopify theme developer I'm looking at developing a specific resource for that so check the description when you're watching this video and see what I have for you so thanks so much for watching and I will see you guys on the next video

Channel: Code with Chris the Freelancer

Views: 13,639

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Digital Nomad, Learn to Code, Day in the life, Software developer day in the life, Shopify theme developer, Shopify Theme Development, Shopify Developer, Skillshare, Shopify Partners, Shopify Theme Developers

Id: UVmVXbY7kAM

Length: 19min 45sec (1185 seconds)

Published: Tue Jun 16 2020