Let's move on to the first section of Boilerplate theme shopify
Online Store 2.0: Building themes on Shopify | Shopify Unite 2021
Online Store 2.0: Building themes on Shopify | Shopify Unite 2021
hi everyone my name is tebow i'm a,developer at shopify and with matt and,ryan we're going to walk you through the,new theme architecture in online store,2.0,we'll start with what's changing in the,themes then talk about what meta fields,are and how will merchants use them,and finally how we're combining themes,and metaphase to make the theme editor,extremely powerful for all merchants,let's get started a few years ago we,released,sections section files go in the,sections directory of a theme,they use liquid or homegoing templating,language to produce,html as the name implies sections are,intended to be dynamic components for a,chunk of a web page,think header footer or in this example,the title and content of a custom page,resource,merchants can then customize sections in,the theme editor without ever seeing or,modifying theme code,here we see our page section rendering,an about page,surrounded by other sections,one of the great things about sections,is that you can make what they render,and how they render it dynamic based on,a configuration that merchants can,easily customize,in the theme editor we support settings,equivalent,to ui inputs in the sidebar of the,editor for things like check boxes,drop downs various kinds of picker we,also support blocks,as you'd expect there are containers of,settings that can be added removed and,reordered within a section,for example here is a schema for an,image with text section,there's a setting for the image and two,blocks for the content that goes beside,it,here's what this example looks like in,the ui,now as many of you know our first,release of sections came with a,significant limitation,you could only add remove and reorder,sections on the home page,you could use them elsewhere but they,were fixed this turned out to be a very,hard problem to solve,in part because of the way we store data,and themes and the flexibility we give,themes to be unique,but i'm happy to report that as many of,you guessed we finally have sections,everywhere let me show you how it works,template files are the root of the code,that renders a particular page,they go in the templates directory and,follow a name convention based on the,page type,like sections they contain liquid code,but unlike sections they cannot be,configured through the ui because they,like structure,here we have an example of a template,rendering custom pages like an about,page,today if you wanted to use a section for,this template you'd end up with,something like this,just one section tag in a liquid file,that's obviously sub-optimal,when we released sections a while back,we made it possible to render sections,in a template as a progressive,enhancement,but as you can see here the template,file doesn't serve much purpose anymore,and while the section can be customized,more sections can be added to the ui,since this liquid file remains,unstructured,so with uninstall 2.0 we're giving you,the option to create structured,templates,that can be customized through the
After seeing the first section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next second section about Boilerplate theme shopify
How To Use Javascript in Shopify Themes
How To Use Javascript in Shopify Themes
hey guys is your boy joe back at it,again codingphase.com in this video we,are going to be talking about,how to use javascript in your shopify,themes okay,now this is part of the course shopify,theme developer which is pretty much a,bundle of courses that teach you,everything that you need to know about,shopify okay i've already taught a,couple of the basic stuff inside of the,shopify theme development course now we,have the shopify online store 2.0 which,is basically a continuation of this,course,but with all of the new features and all,of the new ways of creating themes in,2021 2022 2023 2024 2025 okay so pretty,much everything that you're gonna be,seeing in the ecosystem shopify is,inside of this course okay so let's get,started by taking a look at this theme,that we are creating now this theme is,basically like a,child theme or a copy or like a starter,from the dawn theme that was released by,shopify which is open source which,allows us to use their their code and,use what they have already created um,but basically if we look over here this,is what shopify is using okay and this,is the cart.js,and this is what controls the cart,system okay now in here if we take a,look we can notice that they're using,class based uh components right and we,could say these are actually custom,elements now for those of you guys that,have never seen this before uh think,about this this is like react components,but natively okay with the browser okay,this is all part of vanilla javascript,like you don't need a framework to do,this again you can literally go in on,mozilla and check this out okay you,don't have to use webpack you don't have,to use any of that you can just write,your javascript and pretty much define,some custom elements okay,a few years ago i actually went in and,created a course on polymer and we,talked a lot about this uh because you,know in the future or supposedly in the,future uh we were supposed to all be,using,custom elements okay did that happen i,don't know some people use it some,people are too comfortable with react,and viewing angular okay so it's gonna,be hard for for people to take away,their their front-end frameworks even,though the you know the the browser can,already do a lot of the things that we,use frameworks for now why does shopify,decided to go with this route well,actually it's very simple the main,reason is because it just makes your,website way faster okay,now imagine this if you are using,something let's say like react right and,you are using,i don't know,some library out there like some,component library uh like let me show,you guys an example,like this one materialize i see a lot of,people that use materialize shout out to,chris shawn who love material ui okay,but if you're using this type of of,libraries right uh you're downloading,not only this component as a dependency,but then you also have react as a,dependency that you have react dom as a,dependency then you have whatever,dependencies that this material ui needs,
After seeing the second section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next third section about Boilerplate theme shopify
Shopify Liquid Objects and how to use them for Theme Development
Shopify Liquid Objects and how to use them for Theme Development
so,so,so,hello,what is up my friends how is everybody,doing happy friday welcome back to,another live stream,hopefully you guys can hear me okay let,me adjust some of my volumes a little,bit here,so that my voice comes in,all right,so,let's get right into things today um i'm,actually going to be talking about,liquid objects today and specifically,how to use these liquid objects for your,shopify theme development so,liquid objects are a way for you to,essentially output dynamic content in,your shopify themes so in the background,what shopify is doing is they are,creating these objects like for your,products or for your blog posts and,they're allowing you to query them using,liquid,tags so essentially if you look at this,example,what's happening here is you're querying,the product object and you are returning,the title within these little curly,brackets,right,so we're going to dive in and actually,start playing around with some of this,code ourselves,but i do want to,talk about three really important things,the first is the,delineation between,all of the different kinds of objects so,there are,global objects which are the ones that,you're probably most familiar with and,these include all sorts of different,things if you look over here on the the,left hand side you're gonna see quite a,few of them,and this includes your blog your cart,articles uh your address your customer,data,all sorts of different things are,considered global objects now aside from,these global objects which we're going,to get into,in depth during the stream there are,what you would call content objects so,what this does is it will return all of,the content for a specific,page or specific section so if we go and,we actually take a look at some liquid,code all i've done here is oops i've,gone and i've,expanded not too big there we go,this index.liquid file which is inside,of your templates folder and here you,can see that it only has one tag in that,file and that tag is content for index,so rather than,being like a global,object where we're actually querying a,specific object here we're querying,something larger i would guess like a,page or a template or something uh so,this your is pretty common when we're,looking at um these kinds of pages like,index um,404 doesn't have it,so let's see what else has this,content for header that's another one so,querying your actual header and pulling,in all that content,your layout,i guess this is another one,so there are a few instances in your,theme especially if you're using the new,dawn theme where you're going to run,into content objects okay,so content for header content for index,and then content for layout these are,the three different types we'll go into,this a little bit at the end and then,finally there are a few other objects,that i don't really run into too often,they're kind of uh for very specific use,cases so these are for things like,adding additional checkout buttons or,content for additional checkout buttons,i'm not sure if we
After seeing the third section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next fourth section about Boilerplate theme shopify
Shopify App Boilerplate with ReasonML, Hasura, Serverless.
Shopify App Boilerplate with ReasonML, Hasura, Serverless.
hello there I'm Logan call and this is,running from JavaScript today we've got,another video brought to you by sea,monster studios we've been developing a,Shopify app starter just to get the ball,rolling a little bit quicker when we,need to develop an app there of course,the front end is in reason ml as well as,our lambdas which are serverless,functions those are also written in,reason we've got hysteria to handle our,Postgres database in graphical API layer,as well as net liffe I to host our,front-end and century for error,reporting of course you're always,welcome to take this and fork it that's,the nature of open source and change,whatever you'd like but I've learned a,few things along the way and figured,we'd share it so okay so let's go ahead,and before we take a look at going,through the getting started here let's,let's talk about the repo and the layout,here we've got our lambda functions here,they have their own web pack file here,separate from the root level one that,handles the the UI we've got our server,list configuration and a few lambdas,that we'll talk about those along the,way and then of course some utils and,some bindings our public folder is just,what it sounds like it's gonna be our,next file and then of course our bundled,UI and JavaScript will get thrown there,as well and we gotta get graph QL schema,script here we've got some shared utils,shop queries the types the get graph QL,schema script is handy because we're,gonna you know we're gonna set up some,authorization so that no one can just,randomly access our API for graph QL and,that will go ahead and handle that after,we've set up that authentication okay so,we've got our source here this is all,for our UI and we've got or let's say,we've got our App Store and this is,going to set up our graph QL instance,it's going to make sure that when the,app initial low initially loads that,we're getting some key elements from,Shopify including the shop the access,token and the API key for the app and,then where if that's successful then,we're going to go ahead and store that,and then our app will be able to,continue on its merry way I've got our,App Store and then we can go ahead and,use the Shopify Polaris and Shopify,Bridge providers to go ahead and get the,UI up and running quickly there this,inner component is really just to,demonstrate that we're connected,properly to our hussar instance that,we're gonna set up it's really meant to,be replaced so all right so let's go and,get started here okay so first things,first let's go ahead and run yarn to go,to install our dependencies and while,that's happening we're gonna go ahead,and save our environment file the,example to just rather dot regular env,file and you can see those are the first,two steps right here the next step is,we're going to go ahead and go into our,Shopify partners portal and I'm gonna go,ahead and create a new app,and we're gonna set the create this as a,public application right and we need to,go ahead and set this
After seeing the fourth section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next fifth section about Boilerplate theme shopify
How to Migrate Shopify Themes to Online Store 2.0 (Liquid to JSON Templates)
How to Migrate Shopify Themes to Online Store 2.0 (Liquid to JSON Templates)
hello and welcome to this final video in,this series on shopify online store 2.0,in the previous videos we covered some,of the other big announcements with,online store 2.0 such as the new meta,field functionality the github,integration and the extension of shopify,cli to work with themes in this video,i'm going to talk about the new theme,architecture and show you guys how to,move a theme created with liquid,templates into the new templates as json,system,so as part of the online store 2.0,announcements shopify finally announced,the arrival of a feature they've been,talking about for quite some time,sections everywhere previously the home,page was the only template that,merchants were able to add reorder and,remove sections from,now with the advent of json templates,that functionality has been extended to,all templates such as the product,template the collection template and the,page template to name a few in the new,system templates can be of either liquid,or json the choice is yours however if,you choose to stay with liquid templates,the section functionality that you've,been accustomed to on the home page will,not be extended to the other templates,that's why in this video i'm going to,show you how to replace your liquid,templates with json templates therefore,allowing you to take advantage of this,new feature so let's get started,all right so in this tutorial i'm going,to keep things in the browser i've got,three tabs open at the moment number one,my development store chris testing shop,as usual,and in the second tab i've got the,official documentation from shopify on,how to migrate a theme to the online,store 2.0 system which is essentially,how to migrate your liquid templates,into json templates as you can see,there's quite a lot of detail here if,you want to follow along this feel free,to but i'm here to make the process a,little simpler and to show you a visual,representation of how you can move,through this process,as you can see there's nine different,steps here what i've done is i've,simplified it into four different steps,which are remove the section tags move,surrounding code into their own sections,replace the liquid template with a json,template and add in the references to,the sections in your new json template,okay so this is based off of what we,have here,obviously they're going to suggest that,you back up your theme,but,the real process starts here when you,identify and remove section references,then we move code from the template into,a section which is either adding code to,an existing section or i would say more,commonly adding code to a new section,we're going to delete the liquid file,replace it with a json template file,and then add the references to the,sections so as you can see there's some,extra steps in here but essentially this,is the process removing the section tags,because we can't have a section within a,section,and then moving the surrounding code,around those section tags into their own,sections as we can no
After seeing the fifth section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next sixth section about Boilerplate theme shopify
Free Headless Shopify Storefront Boilerplate
Free Headless Shopify Storefront Boilerplate
hey everyone my name is anthon kamerov,and i'm,founder and ceo of b2 storefront,we built a headless e-commerce shopify,and big commerce storefront so,it basically works for both platforms,and,um right now i want to present,uh our free,headless shopify storefront boilerplate,our goal was to implement as much,features as possible that are,making this usable right out of the box,and essentially stitch those,features with shopify natively,so everything is possible to,be customized from shopify,to certain level so i would,navigate through all the features and,probably will miss something but,essentially,it should be pretty much,entire system showed how how it,functioned,so let's start from uh from the main,menu,so those are the um,old categories that that are being,pulled from shopify,and we have ability to to shop by brand,we have ability to shop by by category,and here is the slider so,this slider is editable,from shopify level um,those boxes are custom code boxes,so this is something that is a part of,look and feel featured products,are taken from the collection and,those featured products have an option,of showing preview so,we have a multiple uh,pictures per product on a quick preview,we have uh variations uh displayed,so it's updating the price and so on so,of course we can share this product,we can add it to the wish list we can,add it to the,comparing,okay right now let's take a look,on other options here and,for example we can have different,variations,and different combination of those,variations are,is also implemented so you can see,how this product is different from,from this one,when we will go and open the,the product details we can,see that the page is loaded very quickly,and it is actually thanks to the,fact that it is server side rendered,uh storefront so all those pages uh is,static html but with full functionality,so,you can actually operate and make,purchases and so on so forth,so let's say i want to add couple of,those product items and you can see that,the specification,contain um complex,uh i items properties and stuff like,that,but it is vary from from,item to item so let's add this item to,cart,and we see immediately that the cart,is having six products because we added,six items,and this how the card preview looks like,uh this is uh multi-currency so if i,will choose,euro instead of usd,uh we'll see prices,given in euro so this way,when we adding those products,um to cart we'll see them,um as as,priced out in europe okay so let's go,and take a look on things,like like another product so another,product,you can see that the product description,could be could be totally different,and specifications could contain,different amount of tables and have,different shape of those tables,we have reviews and those reviews are,coming from yachtpaw,integration so,let's say we want to compare this,product,and we'll add this product to compare,list,and let's go and add something,else to the compare list we'll add this,one,and we'll add this
After seeing the sixth section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next seventh section about Boilerplate theme shopify
Taking a look at Shopify's App CLI boilerplate
Taking a look at Shopify's App CLI boilerplate
all right so in my last video i showed,you how you can create your shopify app,with php laravel and if you don't,remember uh it looks,like this this is the basic app this is,uh what your app will look like if you,just create your shopify laravel app,over the cli but we haven't taken a look,into the code and so we didn't look,what's under the hood yet so that's the,purpose of this video i just want to,briefly take a look of,all of the code that they bootstrapped,i just want to show you what they've,done for you already so you don't have,to configure anything anymore or,less it's not that you don't have to,configure anything just configure less,and,yeah so let me just jump right into vs,code right here and um,just to let you know the first thing,that i did um,is i initialized a,git repo i haven't pushed it to github,yet but um just initialized this uh get,repo if you don't know how to do that,just say get in it and,your repo will be initialized,i've committed all my changes already so,i'm out here,with a,uh newly cleared created git repo,all right,and um yeah so here we are in,our app jsx this means that we are,running react here this is because uh,shopify polaris,their front-end framework is basically,based on react,and they created a lot of,react components for you to use i,believe that there is also,a version for vue if you're using vue,but it's not officially supported by,shopify there are some,git repos that use view or try to,convert this into view components i'm,not quite sure you will have to,google it and then you can see,how that works,i just saw that something like that is,possible anyways uh we're working with,react here and you can already see what,they have done for us here they already,set up the uh a browser router they,already set us up with providers and a,client router,this app provider all of this is,necessary for you to,uh,really work with polaris and i've also,made a uh tutorial on how to use browser,router with react polaris and it's a,very very complicated topic so i'm very,happy that they set us up with that here,already so you don't have to configure,that anymore,so you can see they,took a lot of work a lot of,configuration work so the first thing,that you want to do in order to see some,changes that you make to your react app,is you always want to run npm,run,watch,that will make sure that any changes you,make to your react app will be seen and,the react compiler will compile your,changes,to the public folder here and,then you can see your changes on,the shopify,page,okay uh so npm run watch is,running and now let's just say,um i want to set a new navigation,link right here i'm going to show you,really quick how that is done because,that is really easy all you have to do,is go to this component right here app,navigation,and you can already see here,that you have this navigation menu and,you have those,other navigation menus here so all i,want to do is just copy those lines and,let's just say i want to create a new,tab cal
After seeing the seventh section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next eighth section about Boilerplate theme shopify
Build faster - Shopify CLI 3.0, starter templates and more | Editions 2022
Build faster - Shopify CLI 3.0, starter templates and more | Editions 2022
What's up Shopify app developers?,I’m excited to highlight the improvements,we’ve made to our developer experience.,This includes the Shopify CLI 3.0,,some revamped app starter templates,,and our new app distribution model!,It’s never been easier
to build with Shopify,,so let’s check it out!,To kick things off,
we simplified the build process,by reducing the number of commands
needed to get started.,As an example let’s say you want to build
a product subscription app.,That’s an app that allows buyers
to purchase subscriptions from merchants,in order to receive products
at a recurring delivery basis.,To build this you need,a web app to create
and manage subscriptions,,an extension to be able to assign
products to those subscriptions,,and another extension to show
subscription options,on the front end of the merchant’s store.,Historically,
in the old development workflow,just getting started
would require a lot of steps.,The first decision would be,how you want your app to be distributed.,Either through the app store
as a public app,,or through a single merchant install link,
that's a custom app.,And you’d have to decide this
before you even start developing.,Then, you go
to your local development environment,and you still have
a string of commands to get through.,These covered configuring, registering,and pushing
your code changes for your app,,and its extensions individually.,Let's take a look at what we’re shipping
to improve this experience for you.,We’ve really streamlined
the whole process.,Start by initializing the app,,even if you don't already have
the Shopify CLI installed,this command will also
download and install,the necessary dependencies
to build your app.,Next, you’d want to scaffold
and add in your app extensions,From here,
maybe you'd want to preview the app.,It’s possible to use a single command,to be able to preview your entire app
and its extensions at once.,Authentication has been baked
into commands like this one,,so you won't be prompted
to log in to Shopify,until you’re ready to test your app.,It's simple: you can build
and deploy your app,and its extensions to Shopify
in a single command as well.,And that's it!,Using the Shopify CLI 3.0,,you can now build and deploy
your extensions and your app easily,And remember when you had to decide
a new distribution mode right away?,With our revamped Partner Dashboard,,you won’t have to make that decision
until after the app is finished.,But wait there’s more!,Not only have we simplified
the CLI getting started process,,we’re also releasing
some new ‘Hello World’ starter templates,in PHP, Ruby and Node.,So diving right into the code
that makes your app, your app is easy.,We’re also releasing a sample app
that includes a real-world use case.,You can either download
this app in its entirety,,or even follow
one of our tutorials to build it yourself.,Now finally let’s dig into the code
to see what’s included.,Each extension generated by the CLI
will be in the extensions/ folder.,Using th
After seeing the eighth section, I believe you have a general understanding of Boilerplate theme shopify
Continue the next ninth section about Boilerplate theme shopify
No difficulty
