how to code shopify theme

going on everyone it's Jamie here from,Shopify master class and today we'll be,looking at how you can customize your,theme code for your Shopify store I'm,going to show you here how you can,access your theme code and how you can,make edits also how to create a,duplicate so if you make any errors you,can quickly revert it back to a working,version of your theme so make sure you,stay to the end of the video here before,I dive into it I just want to thank our,sponsor profit calc the one click profit,calculator app available on the Shopify,app store it's going to allow you to,skip your spreadsheets and get back to,Growing your store with real-time,calculations it comes with a 15 day free,trial and there's a link in the,description below to access that trial,there I'm also going to show a quick,video detailing their full feature set,are you a Shopify business owner who,spends hours doing your accounting have,messy spreadsheets kept you from growing,your business discover profit cap the,affordable and easy to set up Shopify,app that crunches your numbers in just,one click it automatically syncs with,all your accounts and expenses to,calculate your profit displaying,everything in an easy to read dashboard,so you understand your business in real,time start for free on the Shopify app,store today so now let's dive into how,you can customize your theme code I'm,going to start by finding out first how,to access that you and your Shopify,homepage here you want to head to the,left hand side click on online store,once that loads that's going to lead you,to the theme section currently this test,store is running the debate theme and so,that's we're going to make the edits,today and so before you dive into,editing any code I always recommend that,you create a duplicate of your current,Shopify theme this way if you make any,errors or you screw anything up along,the way you can quickly revert back to,this version so your customers aren't,seeing any store that is breaking you,want to make sure it's alive at all,times and working as you're probably,gonna be paying for traffic to come to,your site so you don't want that to be,wasted ad spend so how you do that is,under this section here current theme,next to the customize button there's,going to be three dots you want to click,those three dots and hit duplicate I'm,going to duplicate everything about that,theme it's going to create a copy of it,so it says copy of debate or debut and,you can click the three dots I'm going,to rename this I'm just going to call,the copy here you could insert the date,here so it's going to give you a,chronological order of the different,theme changes you made and so once,you've done that you can feel free to,edit the code and test how it's going to,work so how to edit the code you want to,click on those three dots there again,then go down to edit code that's going,to bring up the code editor for your,Shopify theme as it says here you can,edit your themes files they're all gonna,be dot liquid which is going to be,shopify's templating version for their,themes so overall it can be intimidating,there's gonna be quite a few pages now,where you go is going to depend on what,section of your Shopify site you want to,change so it could be the card page it,could be the collection page it could be,the password page the overall page there,are quite a few files here now as,mentioned it's going to be extremely,intimidating you're going to not want to,know exactly what you want to change,before you start making any edits you,don't want to check exactly if it's,working because if it's not working,you're going to have to go back and,reset it so you want to have a clear,idea of what you want to do before you,start doing it so I'm going to do an,easy example here just to show you the,kind of overall process it's just going,to take a few clicks and only a very,minor change but let's say on your blog,page Shopify is going to start,paginating these pages when there are 12,or more blog posts so let's say you have,13 blog posts it's going to show show,more on the next page it's going to,split it up between page one and two,let's say for whatever reason I want to,make this blog post just one here I have,to go now find in the blog section to,find out where it's making that limit,and where it's cutting it off so again,it's just gonna be changing so it's,going to show one blog post per page,rather than up to 12. the way I do that,head over to the Shopify blog section so,on the left hand you can see blog.liquid,so I'm going to click on that one,because that's probably going to be,where the blogs are located we can see,here that it's located in the section,for blog template so I head over to this,section is probably going to include,everything related to the blog I know it,does because I've tested this before,recording the video but just for,exploratory's sake let's search for blog,template here then on the left we get,blog template.liquid so that's where,this section is located so once I hit,there there's been quite a bit of code,on this page now I know this one is on,the top here so we can just edit that if,we take a scroll through you can see,it's just separated in different,sections I'm going to show the page,title then as if there's blog tags and,it's greater than zero it's going to,include this element that has a Blog,filter you can select by group now if,you don't understand HTML error and,watching just a quick HTML course,there's probably videos out there as,well understanding the different,sections of shopify's dot liquid,template files and I'll give you an,overall better understanding mainly it,just requires reading through here so I,know that this section is located at the,top so it's going to pagenate blog,articles by 12. so instead let's just,change that to one that if I hit one,there and I click save that should,update that section I'm just going to,add some random text here to show,further change I'm going to show the,page title I'm just going to add master,class blog post just for an extra change,here hit save then once I go to the blog,page again hit that reload button to,reload those changes I can see this,section is now news Dash masterclass,blog posts so it's gonna be the title,section we can see now it's been page,needed by one blog rather than 12. so if,I click to the next page there's my,random intro blog post and here's my,random post here these are posts that,were created in another video and,there's no real content but they're,great here just for an example to show,how to edit the code for your Shopify,theme if you want very thin specific,stuff as well if we head over to assets,and you head to the theme.js you also,get theme.scss not liquid this will be,more The Styling here this can give you,further ability to customize different,files for your theme and how certain,functions are running this one was,actually done JS so it's going to be,JavaScript this scss is going to be a,formatting for CSS so overall tons of,different customizations you can make,I'd really recommend defining what you,want to do first and then trying to,figure out how to do it if you just go,and start editing things and starting to,play around with things you can very,well just make a mistake that is hard to,fix again that's where we create a,duplicate file but just denote that,there so overall this concludes the,video on how you can customize your,theme code we're going over an example,here and just customize the blog,template not exactly changing the theme,settings but just to give an explanation,and an example on how to actually change,the theme code and see how it updates,overall this concludes the video If you,enjoyed it I would love it so much if,you hit that like And subscribe button,below if you have any questions leave a,comment lastly I want to mention our,sponsored profit calc again the one,click profit calculator app available on,the Shopify App Store it comes with a 15,day free trial there's a link in the,description below to check that out,there thank you so much for watching and,I'll see you in our next video

Congratulation! You bave finally finished reading how to code shopify theme and believe you bave enougb understending how to code shopify theme

Come on and read the rest of the article!