20 - Create Shopify Theme with Slate Tools - Shopify for Developers
hello and welcome in this video I'm,going to generate a Shopify team with a,lot more options so this is again going,to be a starter team and it does not,have anything out of the box but it is a,good starting point to develop your own,team so in the previous video as you,know we use the team kit to generate our,team but the templates are a lot,different than what we saw in the debut,team for example you don't have a,snippet you don't have sections you have,your missing muscle templates also if,you open some of them they have the only,thing they have it like the titles and,some subjects and if we come to the,customers if you open the login it does,not have the code even this could does,not do anything and this is not what we,want so I need something it should have,a little bit of coding out of the box,for me so it will save time and it is,going to be a standard team so how you,can do this one you can use this little,if you remember in the beginning of the,tutorial I said the air is a tool called,is literal this is developed by Shopify,teams but this is under low maintenance,you are not going to maintain it for now,because as I said this is not very good,because it does not work on Windows and,there are many more things about this,one I didn't like about this but the,good things they have they have a,stronger team like they can generate a,team for you which have most of the,feature out of the box it does not have,any styling but it has a lot of template,automatically like created if I come to,my account my account section it has all,the liquid file I need so I don't need,to coat the liquids and what is required,and what is not required it is already,there all you have to sell it so if you,come to the documentation here you don't,have to go through everything if you,want you can do this one but in the,guide how to create your own team you,can see if you have installed your in,your computer you can start creating,your own team so let's create team this,run this coming in our terminal and see,what happens so here in the directory I,am recording the video,I open power I will open the portion,here and I,test the code to see how it works oops I,forgot to copy this one sometimes,general does that if you copy it does,not take it so if you run this coming I,already have your install so make sure,you do have your initial and see what,this is going to create as you can see,it will download all the packages I will,do everything practically you don't have,to do everything I will push the code on,github all you have to do is you can,clone that repo and then you can start,creating your own tip that's all you,have to do for now I will do everything,manually if you are interested you can,watch it otherwise you can watch the,next video where I will show you how you,can clone it how you can push it and,pull it from github and start using it,so it will take a while to install,everything on configure so while this is,drink let's see what it has created here,is our team
Let's move on to the first section of tools theme shopify
Online Store 2.0: Performance tools and best practices | Shopify Unite 2021
Online Store 2.0: Performance tools and best practices | Shopify Unite 2021
hi i'm colin bendel director of,performance engineering,and today i'm going to talk about,performance and particularly performance,on the online store,now there's three things that i want to,talk to you today about first is about,improving theme performance with new,tools,second is the new tools to improve page,performance,and third tools to help you build fast,and stay fast in your teams,let's get into this now we saw earlier,today,i shared that page performance that,first experience that a buyer sees,directly correlates to conversion that,is ten percent increase in,page speed leads to a seven percent,increase in conversion on average,how do we achieve this this is such an,important aspect of all of our,sites so i want to talk about how do we,build fast and then stay,fast now i showed earlier about the,cli the new shopify cli and we've,extended it to support,theme developers so now you can do a,theme,serve so this will spin up a local,environment that will allow you to,iterate,quickly and get that instant feedback as,you,make changes to css into your markup and,even all of the aspects around meta,fields and block we've also extended,the shopify cli to include the theme,check a shopify theme check when it runs,inspects your theme,code for syntax errors and other,performance problems when it runs it,gives you,insight into how you can improve your,code,as well as not just about liquid but,also general performance,improvements you can get access to it,with a cli but there's also,a vs code plugin when you run the vs,code plugin the same syntax highlighting,is now in line in your code editor,and those hyperlinks to additional,information can be linked straight out,so you can get the cli by way of using a,brew install or you can use the,vs code plugin so the key things we want,to remember,use this to check for syntax errors,increase,you know parser errors as well as look,for performance patterns,you can see the extended docs and this,works for themes and,app extensions you can get the vs code,on the marketplace or,brew install the cli you'll also want to,look at how you can integrate your theme,development lifecycle,with your ci pipeline you saw earlier,the,integration with github actions so that,on a pr,create you can get that instant check to,make sure that,has the theme changes impacted,performance before you have you actually,merge,now to do that we've created a,convenient,shopify lighthouse ci action that you,can use in your github actions,that will spin up the environment for,your shop and if you need,to use a password you can even pass the,password along,in your github action secrets and this,will,on demand spin up the environment run,a full lighthouse controlling by,puppeteer,and provide the results and you can set,the thresholds for the different aspects,of lighthouse whether it be performance,or accessibility,so you can use the cli the shopify cli,to create these,these various ci actions and it does so,by creating these ephemeral themes,that
After seeing the first section, I believe you have a general understanding of tools theme shopify
Continue the next second section about tools theme shopify
Theme Development: New Tools, Better Liquid (Shopify Unite 2017)
Theme Development: New Tools, Better Liquid (Shopify Unite 2017)
well good afternoon everyone my name is,nathan ferguson i'm the front-end of,the themes team and Shopify I'm joined,today by Dave,a-kor new senior developer lead of the,online store channel,all right today everyone's have a theme,development more specifically we're,going to be talking about some new tools,we've launched for the editor and some,that are upcoming and we're gonna be,talking about some improvements of it,made in liquid that'll make customizing,themes easier as well take a moment to,remind everyone you can start asking,your questions now through the app using,the QA Code YYZ to be able to submit,those throughout the talk and at the end,we'll take a I pad and answer questions,you've submitted so last year you,Nightwind,announced a new way of building,storefronts using section and by October,of that year we launched a new editor as,well as a new starter theme called debut,that came with a wide range of section,types and in just four months February,of this year every theme in the theme,store was using sections and today there,are 45 unique themes powered by section,in terms of merchants adoption as Satish,mentioned this morning the vast majority,of customizations being done in the,editor today are being done on section,theme and partners have been using,sections to give their clients more,control over the site's content and its,layout this is a clean theme this is,expressed expression theme by clean,themes and here they have a static,sidebar where they let their merchants,choose customize their own sidebar from,a variety of block types and as well of,course reorder the sections the blocks,as they see fit,another example so the JavaScript API,makes customizing themes for partners,and merchants a better experience this,is a trademark screen by maestro who is,in the audience today I see so they have,their own custom script so it's able to,hook into editor events which make sure,that the appropriate content is always,brought into focus so the new editor in,sections have made customizing themes a,much better experience for partners and,merchants but this just isn't for themes,in the theme store shelf I plus,merchants and and shop buy no shelf I,plus partners and Java partners have,been using sections and creative ways,for the client since its release and I'd,like to give an example today from CTMS,a Shopify Plus partner,so this merger is called kalo it's based,here in California and they have a page,as promoting a product called stackable,let you design your own silicone ring,CTMS is using a static section to give,their merchants the control of what,feature combination is shown on that,template and they're using another,static section to let their merchants,control what related collections and,related products get shown alongside it,so sections and the JavaScript API,represent vast improvements and,customizing themes we've continued to,ship some improvements they'll make,building themes for this new editor a,much better experience to start w
After seeing the second section, I believe you have a general understanding of tools theme shopify
Continue the next third section about tools theme shopify
How to Get FREE Premium Shopify Themes
How to Get FREE Premium Shopify Themes
Shopify themes are extremely expensive,and they keep raising the prices just,take a look at this two years ago I,bought this thing for 180 and today it,costs 350 and trust me it is almost,exactly the same thing with very very,minor changes I didn't know that,inflation also affected the theme,industry but that leaves me with only,two options either I find a way to get,cheaper themes or I find a way to get,free premium themes hey guys is the Eco,Mode here and on this video we're going,to go with the former and I'm gonna show,you how you can get free premium Shopify,themes so let's get started in three two,one okay so let me show you the types of,themes that you can get they are all,premium very very high quality you have,themes for everything that you need,alright so first I'm gonna show you how,to access this for free and then I'm,gonna show you how to install it on your,store I'm going to leave a link in the,description where you can get envato,elements free for 7 days we will use,that time to download as many themes as,you want and then I'm gonna show you how,to install them on your website when you,click on that link you're gonna get to,this landing page and here you can start,your seven day free trial okay you will,have unlimited access to everything here,all the themes and all the other,resources that they provide and if,you're wondering oh well but I'm gonna,cancel the subscription you know so I,never get charged of course right uh,what happens then well don't worry,because you can cancel at any time and,you will still have access to everything,that you downloaded you don't need to be,paying for envato elements to be able to,use the themes that you downloaded so,let's go over here where it says CMS,templates and we're gonna click on,Shopify and these are all of the Shopify,themes that are available and there's a,lot okay there's 448 right now let's,look for a specific theme that I,actually found while I was browsing and,it's called broccoli,it is this one Shopify for online store,2.0 okay and let's take a look at it as,you can see you know the template or,good you can see you know the features,that it has these themes normally come,with a lot of features like let's check,some of them out so it's for online,store 2.0 okay the newer version of,Shopify it has a top bar you know it has,announced member you have to pay for,apps that give you an announcement bar,if the theme doesn't come with it but,this one's come you also have mega menu,search field multiple currency you know,a lot a lot of features okay so let's,just preview it so you just click on,live preview and they will show you some,examples of pages you know that you can,construct with this theme of course the,images and all of that is not included,in the theme okay but all the,functionality is you will have to get,your own images and your own text of,course let's just click on the homes,style number two just to see how it is,alright so,yeah,you have your carousels the products,with a ni
After seeing the third section, I believe you have a general understanding of tools theme shopify
Continue the next fourth section about tools 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 tools theme shopify
Continue the next fifth section about tools 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 fifth section, I believe you have a general understanding of tools theme shopify
Continue the next sixth section about tools theme shopify
Shopify Theme Detector. Steal Their Theme in Under 5 Seconds.
Shopify Theme Detector. Steal Their Theme in Under 5 Seconds.
what's going on everyone it's jamie here,from shopify masterclass and today we'll,be covering how to detect what theme a,shopify store is using this can be,really useful if you're looking for,inspiration on what theme you should be,adding to your shopify store because,many stores make customizations it can,be hard to tell which theme they're,using do they get it from the shopify,theme store do they have their own,custom theme it can be great to know so,you can take that theme and make edits,for yourself you may like the layout the,homepage the product page certain themes,will appeal to your store for different,reasons so we're going to cover how you,can steal their theme today add it to,your very own shopify store discover,profit calc 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 before i,dive into it i just want to thank our,sponsor profitcalc the one-click profit,calculator app available on the shopify,app store that allow you to skip those,spreadsheets and get back to growing,your business with real-time,calculations it comes with a 15-day free,trial there's a link in the description,below to access that there i'm also,going to show a quick video detailing,their full feature set all right so,let's dive into it now there's going to,be two ways to steal their theme here,we're going to go over the harder way,then we're going to go the easy way,using a specific tool we'll go through,the hardware in case the tool is not,working i've loaded up an example site,here it's going to be vitaly it's a,popular shopify store here and we,covered it in a video for shopify store,inspiration so the way you can figure,out what this theme is is you're going,to right click on this website and if,you're in google you want to go to,inspect here it's going to show up a,bunch of code this can be kind of,complex if you don't understand it but,we're not going to go diving into all,this here all you want to do is hit ctrl,f or command f which is going to open up,this find bar at the bottom and all you,want to do is type theme here and as you,can see it's going to show up it's going,to be theme it's going to be initial,dawn tally 2022 and so that theme here,is going to be don we can confirm this,in a sec using the theme tool we'll go,over another quick example so a site is,called silk willow so do the same thing,we'll right click we'll hit inspect here,we'll hit command f or control f search,for theme again it's going to be a,little more difficult as it's going to,show several different files we want to,keep on hitting enter until we get what,looks like the theme here and we found,it so shopify dot theme is equal to,symmetry so that is the theme for the,shopify store so all you have to do is,go find it if y
After seeing the sixth section, I believe you have a general understanding of tools theme shopify
Continue the next seventh section about tools 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 seventh section, I believe you have a general understanding of tools theme shopify
Continue the next eighth section about tools 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 eighth section, I believe you have a general understanding of tools theme shopify
Continue the next ninth section about tools theme shopify
How To Design A CUSTOM Shopify Store THAT SELLS!
How To Design A CUSTOM Shopify Store THAT SELLS!
Hey friends, Andrew here hope you're well.
In today's video, I'm going to show you ,one of my favorite Shopify apps to completely
customize and transform your store in only about ,10 to 15 minutes from scratch so without wasting
time let's jump straight onto my laptop here and ,i'll show you step by step how to build a
beautifully custom shopify store with this ,no code page builder app incredibly important
considering that your store represents your brand ,and your vision and by the way i'll be giving
away this exact store i've built in this video ,to a subscriber more details at the end of
this video so to build out a custom shopify ,store today the very first thing you want to
do is go on to the shopify app store actual ,first step is to get shopify if you haven't yet
already and if you haven't yet already i'll drop ,a link to an extended free trial down below if
you want to follow along with this video now ,once you have your shopify store go on to the app
store and then this is where we're going to get a ,crucial tool and this app is going to allow us
to build and design a shopify store without all ,the custom coding and it's called gem pages right
here so gem pages they're known as this no code ,page builder on shopify and it's really useful
in building a high converting store without code ,it's essentially a drag and drop builder that
myself and the team have used to design custom ,shopify sales pages and the plan of attack today
is to create a custom one product store simply by ,using the gem pages drag and drop tools right
here i've spent some time before this video ,creating the brand and all the assets like product
renders brand name and whatnot i'm calling it to ,charge because we all need to charge our devices
that's terrible i know i have all the assets to ,go in my folder right here as you can see and so
what we're going to do now is build out our page ,with gem pages using all the files that i've
created here so head on to the dashboard and then ,click create new from here is click more types and
you can see that you're able to create a bunch of ,different pages based on what you want to go for
so a landing page a home page a product page etc ,and so let's just click for example home page so
there's a whole bunch of home page templates here ,there's also a whole bunch of landing pages the
theory here is i'm going to build a one product ,store so i'm going to use a landing page
only and i found the one that i want to use ,and it's bluetooth headphones you can click
preview to preview the template first or ,you can just click start editing so i'm going
to click start editing i'm going to give the ,the page name a name and then click header and
footer i want this off only because we're creating ,a one product store and we don't want a header and
footer at the bottom really quickly though you can ,use a completely blank canvas but if you want to
get up and running really fas
Congratulation! You bave finally finished reading tools theme shopify and believe you bave enougb understending tools theme shopify