How To Use Shopify as A Web Developer in 2021

what's up entrepreneurs today I want to show you how to use Shopify as a web developer so here we are in Shopify have created a store now I want to be able to customize it right now I have the first starting out theme which is called the view and you can look at it here we want to be able to change this completely with HTML and CSS how do we do that first we need to download something called think it think it's is Shopify his own tool to be able to control Shopify from the terminal so you can download the code for your e-commerce platform and you can also edit the code in your favorite text editor Shopify has created a small tutorial for this and I have put a link in the description so to install theme kit you can do it either with this curl command which you put in your terminal or you can do it with homebrew homebrew is something I definitely recommend that you download and install if you're a web developer because with homebrew you can install packages extremely easily to install it you go to this website which I also have in the description and you just paste this whole command into your terminal once you have homebrew installed you can just copy this command into the terminal like that and I already have it downloaded so I'm gonna terminate this and you copy paste the next command which is brew install theme kit after you've done this you have think it installed now we have to create an API access point so that theme kids can modify your code an API access point is basically something that lets your computer or other computers change and modify something on a remote database this is how we create an API access point we go into apps manage private apps and generate API credentials here you can write it your name test store in my case and you don't need a contact email and if you want you can enable all access here if your if you want to change all aspects of your website with code okay now we have changed all fields to read and write or read access if read and write is not available then we can click Save so now Shopify is generating an API key for theme kit to be able to modify the code based on the database so now we have the API key let's download the theme and start changing it and you download a theme by copying this command theme figure password and so on you copy this command into where you want to download your files so create a folder where you want to download your code so after you created your folder just navigate to that folder in the terminal I have a trick so after I write CD which is navigate to that folder in terminal I can just drag the folder here and terminal automatically finds the path name for that folder so now as you can see I am in the Shopify test folder and I can use the command that think it gave me in this tutorial so now I've copied the command that simply gave me and we have to write in at the password the store name and your ID and you get these from here from the API key and the things you need is the password which is generated here in your API key so you just copy/paste this password and like that and then you need the store URL which is let's start a business dojo provider come here and then you need your team ID you get up from clicking customize in the first page of Shopify click customize then in the URL you get this number which is the theme ID so you just copy paste this theme ID and boom now you have configured your theme kit and then you can download the code base you do that by writing this command theme download so now we have downloaded the code base for the Shopify website you can see it here here are all the files which make up your store and you can see it uses the extension dot liquid that's because Shopify uses a programming language called liquid we can open this up in your editor in your favorite text editor and I love to use this command with atom where you navigate to your folder and then you can just write atom dot which opens up all the code for that folder so what do we do if we want to change this code well first of all we have to make it so that theme kit watches the folder which means that if we make any changes in the folder and in files and save them then think it will update the website automatically so we do that by just writing theme watch now think is is watching for file changes and if we change something it will change website so what's the advantage of using this well let's say we want to change this header and we don't like the search icon because or may-maybe our website is really small and we don't need people to be able to search and as you can see in the customizable section of Shopify we can't remove that search icon we have to change this in the code so let's find the header in our code here in our on our Shopify folder is organized into assets config layout local sections snippets and templates assets are stuff like images JavaScript files CSS files our header won't be there the config is all the colors and all stuff which sets the style over the entire website we don't really need to change here in the layout folder we have a theme that liquid file and this is the main page for all sides in Shopify theme that liquid is a dynamic page and it changes depending on what page you're on it's dynamic because you can see it has a variable and you see it's a variable because you have double e curly braces content for layout this variable is created when you go into different types of endpoints on your website if you go to about then it will render the about template if you go to catalog it will render the catalog template and above the div here we can see that we're rendering a section called header and it's header that we want to change but since we have the section header in the theme file it means that header is shown in all pages on the website the header is in the section folder as you can see here we are in the header and we want to remove the search icon how do we do that well let's make it easy and use search for search search research that's cannot matter because of shop refines customizability there is a lot of code that it's not being used at the moment and we can check which settings we have for the header display let's click customize and then header the logo alignment setting is not put in centered it's put in left then we know we have that setting so we go back here to Adam and we see that actually this part that we found has the section that settings that aligned go centered so if we change anything in this setting you won't get any effect on the website because we have the setting left we need to find left the the part where it says left let's continue to click through and see if we can find the left setting and here we are so if section that settings that aligned logo equals left which it is include search form so you use include when you want to add a snippet so search form is a snippet and but we don't want to use this snippet because we want to remove the ability to search on the website let's just take this away or comment it out I'm gonna delete it because I'm not gonna use it and voila it's gone we have removed search from the entire website that's great you could not be able to do that if you just used the Shopify normal tools you have to change the code in order to remove search now I want to show you how you create a totally new page such as an about page we can start with just duplicating this file page stat liquid and we can name it page that about like this let's add hello from about to show that we're actually changed making changes once you have created that file you go to pages here back at Shopify add page and you come to this place and here you have to choose the template for which you want to make your page from and you see that we in template civics we have page that about which is the one that we have created so let's change the title to about us and about us was successfully created we can view this in your online store and we see that we have created a totally new page and our changes are right there here we can do anything we have full HTML customizability let's remove page of content since we're not using it and add a paragraph can have a link to homebrew and this will update automatically I think that's pretty cool because this gives you total customizability if you want to create a CSS and change this page you create a new assets here new file about us that s CSS not liquid now we created a file we need to include it in the film the liquid file which is in layout and this is again like the main page where everything is added so we include it by first writing the name about s CSS and then this pie thing which is alt 7 in Swedish keyboard and then Asset URL pipe style sheet tag boom now we have it included and we can add stuff like a class for the paragraph oops my spelling is not what it used to be color red can add this as a class to the paragraph and this should not work boom so we have created a CSS for this page that we have created specifically through HTML and CSS then here we can do anything yes we can treat it just like any other website I'm just going to talk a little bit about what these folders are used for so template is an entire page and template is basically consisting of sections and snippets which we have right here so a section that could be something which is just on one page whereas a snippet is something that is recurring throughout the entire website such as icons or anything like that like this is a section for example and we could create a new section very easily just write a new folder image background but liquid we go here and we can just create any div just hello I am image background and now we since we have added it as a section we can put this in our about page if I just find my about page and we add sections with the liquid syntax with curly braces percentage image background so you add the name and then a percentage sign again and now we will have this new section that we just created hello I am image background so usually my workflow is like this I create one page with many different sections and for that page I create a CSS file so I can easily customize and have like clear overview of how my project is built so that's my workflow when working with Shopify as a web developer I hope you liked it also I'm vlogging about my own business and we use Shopify to sell decorative pillows online we're showing the entire process of how it is to create a company from coming up with the idea to finding the signers and making website like this video click here to watch a video of how we got a free office [Music]

Channel: Let's Start A Business

Views: 104,148

Keywords: shopify, html, liquid, programming, web developer, tutorial, how to, using shopify, customize shopify, change shopify with html and css, css, codoing shopify, make money, money, online, lets start a business, online business, shopify programming language

Id: 78N7hRwIZO4

Length: 15min 36sec (936 seconds)

Published: Fri Sep 22 2017