An Overview of Liquid: Shopify's Templating Language
hi this is clear from Shopify in this,presentation we're going to focus on,liquid if you're new to the Shopify,platform you might be wondering what,exactly liquid is well in actual fact,it's the template language that is used,to create Shopify themes it has a lot of,similarities to traditional web centric,programming languages such as PHP and,Ruby and in this presentation we will,have a look at the main features of it,and how they relate to the Shopify,platform,let's begin by actually asking what is,liquid well in its simplest form it's a,template language used in Shopify themes,I like to call it a language other,people might call it a syntax or an,engine there's various terms but to me I,think language is probably the most,applicable in as much as it has common,constructs that you'll be familiar with,if you have done any sort of programming,things such as if-then-else statements,or logic or filters and loops and things,like that so if you've done PHP or Ruby,as I said earlier then you will probably,familiar with a lot of the concepts and,find the syntax very very easy to pick,up what liquid actually does for us it,creates a bridge between our template,files and a datastore now in our case,the datastore is actually a Shopify,store and it allows us to have,constructs within our files that will,then when compiled on the Shopify,platform will be replaced with data from,a particular store and the search this,allows our themes to be agnostic and,reusable whether that's the whole theme,or a chunk of code as the templates,themselves and liquid in effect doesn't,have any concept of the actual data that,it's pulling in for example it doesn't,need to know the name of your store it,doesn't need to know what products are,in your store all it needs to know is,that if a product has been requested it,will go off and grab that data relevant,to the store that that particular theme,has been applied to this also means that,when you come up with a really,functional piece of liquid code you can,use that over and over again in all,future projects so let's have a quick,look at how liquid at,works let's say that someone is,requesting the URL of your Shopify store,Shopify platform then needs to work out,which store is being requested from that,URL and once it's done that it will go,off and hunt out the actual theme now it,will hunt out the active theme directory,obviously if you have a Shopify store,you can have multiple themes within that,store but you can only have one active,one so it will go and grab the,particular theme directory and then also,work out which template file is being,requested so for example is it a,collection page is it the home page is,it a product page once it's done that it,will work through the template it will,find out if there are any liquid,placeholders in there with a baby output,and logic both of which we'll look at,shortly and they will go off and grab,the data that's being requested for the,particular store from the Shopify,platform now wha
Let's move on to the first section of Fluid Framework theme shopify
Beginners Guide To Shopify Liquid in 2022
Beginners Guide To Shopify Liquid in 2022
whether you are new to shopify or you're,already a shopify store owner you've,probably encountered a code that looks,something like this,this is shopify liquid a template,language created by shopify that serves,as a framework for all shopify themes in,today's video we'll take a closer look,at shopify liquid we'll start by,understanding shopify liquid further and,then we'll learn about its features,are you ready,let's begin,to recap shopify liquid is a template,language used for creating or modifying,shopify themes if you are familiar with,ruby you probably have heard about this,template language because it's written,in ruby or it's known to be written in,ruby but in terms of syntax it's very,different compared to other programming,languages we'll get back to this in a,minute in addition shopify liquid is,very limited like there's a lot that you,cannot do with liquid for example you,cannot retrieve a data from a,third-party server just from shopify now,what is it used for in web development,there are two contents that you can,render static content and dynamic,content static content is a content of a,page that stays the same and is usually,hard coded in html whereas dynamic,content is the content of a page that,changes depending on specific parameter,for example we have the following,product page,it specifically rendered this product,for cats because in the url we specify,that we want to render the specific,product in shopify this is called a url,handle and by changing this to a,different handle of a product the,product page will render a different,product this is how dynamic content is,being rendered in addition shopify uses,its own architecture or template files,to display these pages for example this,page is using product.json it's a json,template that uses sections to complete,the page taking a closer look at the,section files you will see that there's,a liquid code mixed with html css and,javascript so to put it simply shopify,liquid is like the middleman between,shopify stores and the server of shopify,where all the data about your shopify,store is stored and then when a shopify,store asks for a data through liquid,shopify liquid will ask the server of,shopify if that data that is being,requested is available if it's available,then the server will give it back to,liquid,then liquid will give that to the,shopify store's theme,otherwise if it's not available then the,server of shopify will just return a 404,error response shopify liquid is,categorized by three features,objects,tags and filters objects also known as,variables are wrapped in double curly,braces and it's used to output pieces of,data from a shopify store for example,this is a shop object inside of this,object there are properties or,attributes that you can use by using dot,notation let's say we use the name,attribute so you're going to type it,like this so shop dot symbol and then,name this will render the name of your,shopify store there are plenty of,attributes that you can use
After seeing the first section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next second section about Fluid Framework theme shopify
Shopify Hydrogen and Oxygen
Shopify Hydrogen and Oxygen
hey everyone jan here codingwithyen.com,so hydrogen 1.0 and oxygen are both,brand new and have just been released to,the public,and if you guys are curious right now,today we'll go over what they are why,and when to use them in the first place,and also how to practically get started,and i really hope you find some value in,this so let's have a look alright so,then let's get started by answering the,what and besides being the most common,element in the entire universe hydrogen,is also a react-based framework for,building custom shopify powered,storefronts,and assuming that you roughly know what,react is and you roughly know how,shopify works the question would be what,is a custom storefront and just to catch,everyone up here really quick the way,that shopify websites are usually,structured is that on one hand we have,the back end so that's where we manage,products pages content,we have our orders payment settings and,so forth,and on the other hand we have the front,end which is usually built by using a,theme yeah so this is like the actual,website that visitors would see,so that's where we showcase our products,and we could say that a theme is kind of,like the interface between website,visitors and then all these ecommerce,features okay now in most cases when,people are getting started this,combination of backend and then a theme,works perfectly fine but there can be,certain circumstances where a theme is,just not enough,and we will get into the why here in a,second but for now just imagine that you,would want to sell groceries through a,smart fridge,like where would you even start using a,theme in that case right doesn't make,any sense so here you would need,something custom coded namely a custom,storefront,so that's pretty much the whole concept,you have a custom place where you want,to showcase your products but you still,want to use the shopify backend features,like managing inventory orders payments,because it's like so much easier to,leverage this existing infrastructure as,opposed to building everything from,scratch,and the way you connect these two and,how you exchange data is just through,the shopify api,alright now to be fair the smart fridge,was a pretty obvious example of why,someone would need a custom storefront,and you could make the same case for,in-app purchases or in-game purchases,where using a normal theme just wouldn't,make any sense right,however in the beginning we said that,hydrogen is a react-based framework and,react-based websites,look at least somewhat similar to normal,websites you could build with a theme,and at first glance you might not even,be able to tell the difference between a,theme-based website or a react-based,website so let's talk about some of the,reasons why you might want to consider,using hydrogen in the first place and,when i think about this three different,areas or three different things,immediately come to mind,so first let's touch on theme,limitations or to be more precise,performance,i guess that'
After seeing the second section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next third section about Fluid Framework theme shopify
Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
whether you're a shopify developer or,not if you use shopify chances are,you'll encounter your store's source,code,or your shopify store source code which,is mostly written in html,css javascript and of course liquid,if you're a developer you probably know,already what html is css,is javascript s but liquid,what is liquid is that something that,you,lick lick with,that was not a good joke jokes aside in,this video we're going to be talking,about liquid programming so you can,understand what is happening behind the,scenes of your shopify store,stay tuned for that,before i start this video this video is,sponsored by me if you're interested to,learn how to create shopify themes,you can enroll to my course shopify,theme development course,and in that course i will teach you how,to create a shopify theme from scratch,i'll teach you anything that you need to,know to create a functional shopify,theme if you're interested i'll put the,link in the video description below and,use the coupon code you can use the,coupon code,liquid to get 30 off of your purchase,all right let's go back to the video so,before we start learning liquid or how,to code using liquid,let's understand first what is liquid so,liquid is a template language created by,shopify and is written mostly in ruby,it is mainly used for controlling or,maintaining what is happening to your,what is happening in front end or,basically,is um it controls the flow of your,shopify store,so you can consider liquid as a back-end,programming language,html css javascript are what you're,seeing in your browser in your front end,and then liquid is what's working or,basically liquid is the guy who works,behind the scene,to control or to maintain your shopify,store,you can think of it like a cereal bowl,so basically the serial is the,html css and javascript and then the,milk that you pour in here,is basically liquid because,it is it's liquid so you mix them,and voila you have a cereal bowl you,have a shopify store,i think the milk is inspired on a,serious note though if you take a look,at your development store or your,shopify stores code editor,you will see there are a bunch of codes,that starts with curly braces,not the json codes what i'm trying to,say is the double curly braces or curly,braces followed by percentage symbols,those codes are liquid codes but don't,worry we're going to talk about more of,this later on so you get an idea what,are they so first of all liquid codes,are categorized in three,parts objects filters,and then tags,so objects is basically what you use to,tell shopify or,liquid what to render or display in,front,and so to put this simply basically,objects is like an echo statement from,php,or c out of c plus plus so you're,basically,telling shopify if you use an object,you're basically,rendering the value of that object,so say for example a variable so you can,use,that variable as an object and then,shopify will think of it or liquid will,think of it as an object and then,oh i will rende
After seeing the third section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next fourth section about Fluid Framework theme shopify
The New Shopify Dev Documentation for Liquid is AMAZING right now!
The New Shopify Dev Documentation for Liquid is AMAZING right now!
today is such an amazing day for all of,us because shopify has released quite a,few updates or changes and in this video,we'll be going through one of these,updates and that is the documentation,for shopify liquid now you're probably,thinking right now bernard there are,better topics to talk about there's,dehydrogen and oxygen there is the,improved shopify cli there's the,check check out extension the list goes,on i can't even count it with my own,fingers or hands but i just want to set,those topics aside for now and do videos,about them in the future now before i,begin this video i just want to say this,first from the bottom of my heart i want,to say congratulations to all of the,developers who worked hard on this,amazing updates you are amazing and you,are very appreciated by all of us from,the shopify community including my own,community thank you so much and you all,are amazing did i say that twice i say,that twice back to the video if you are,unfamiliar with shopify liquid you can,check out this video or you can take my,shopify liquid course i'll put all of,the resources down in the description,below including the documentation that,we're going to talk about in this video,so speaking of that let's go to our,computer and start talking about this,amazing update welcome to the new,documentation of shopify liquid now the,first thing i noticed when i went,through this page is the navigational,sidebar in the previous documentation in,the previous documentation you will see,here not just the liquid link but also,the api references the ajax api the,storefront api the hydrogen etc but now,all we have here is the liquid and,everything related to shopify liquid i,also noticed that they've removed the um,in this page sidebar on the right side,if you remember that they removed that,which is really really nice it looks,cleaner and less cluttered and i really,like that i really like the new design,now if this is your first time viewing,this page or this documentation you,probably have this in daylight mode so,if you want to,look at your documentation in night mode,you can check out or you can go to the,navigational bar and you should have,either a moon icon or a sun icon,currently i'm in the dark mode or night,mode so you can see um there is a sun,icon here that i can click moving on to,the next update and that is the code,snippets in the documentation and you,know what this is actually really really,cool you can now edit the content of the,code snippets let me show you what i,mean by that so let's open um,the liquid documentation and if we,scroll down as you can see here we have,the following code snippet or code,box whatever you call that and now you,can change the object or you can,customize this so as you can see if you,double click you can,customize or,what am i talking about,you can change the object say for,example i'll use shop dot url and that,will automatically or update the output,in real time and then you can highlight,this and then open this i
After seeing the fourth section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next fifth section about Fluid Framework 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 Fluid Framework theme shopify
Continue the next sixth section about Fluid Framework theme shopify
After seeing the sixth section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next seventh section about Fluid Framework theme shopify
Liquid tricks: How to use all_products in a Shopify theme
Liquid tricks: How to use all_products in a Shopify theme
hi this is Ken from Shopify today we're,gonna have a look on how to use all,products within your Shopify theme it's,gonna open up Safari and I've got my,test store ready to go I'm gonna do all,the editing online as a way so I'm just,going to show you how to get there if,you're not familiar with it you go into,online store click the themes link find,these three dots appear on the top right,and then go to edit HTML and CSS in,order to showcase how we use all,products I'm going to create a custom,template called page dot all - products,dot liquid which I have here,it's nothing special as you can see I've,just linked this up from the navigation,on the site as well so if we actually go,and preview the site you'll see that I,can just click into their current is,blank there's nothing there so this is,where our demo will appear once we put,the code in okay so what is all products,all products is a way that you can,access all the data pertaining to the,product without having to loop over a,collection or be on the product liquid,page up as in a product detail page you,can use this code anywhere within your,site whether it be in the layout file a,page template a blog article template,all those kind of places it's simply a,really simple solution to get details,about a particular product what you do,need to know is the handle of that,particular product now if you're not,familiar with handles let me explain,them to you if you come from something,like the WordPress world or maybe one of,the frameworks they're often referred to,as slugs these are unique,representations for this particular,object within the within the CMS in this,case Shopify so if we go into our big,breakfast special this is the product,and we need to find out where the handle,is we can just scroll down to the bottom,click Edit website SEO and you'll see,that the URL and handle are at the,bottom here so this is big - breakfast,now these are URLs safe representations,so they'll always be lowercase any space,ism will be replaced by hyphens and,there'll be no punctuation so a very URL,friendly and as long as you know how to,find them you'll be able to work with,all products just to say also that,handles aren't unique to products a,collection has a handle a blog article,has a,all products have handles they use quite,heavily within Shopify so they're worth,knowing about okay so this particular,product is big breakfast or the handle I,should say big - breakfast I'm just,going to copy that and then I'm going to,go back to my page within my theme and,show you how we can use all products,well this is loading up what instances,would you use this will really you only,should be using this when you really,just need one maybe two products that,you need the data for if you've got tens,of products hundreds of products,obviously a collection is the way to go,the advantage of a collection of course,is that you don't need to remember these,handles you don't have to hard-code,these handles into your theme you can,s
After seeing the seventh section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next eighth section about Fluid Framework theme shopify
The State of Shopify Theme Development
The State of Shopify Theme Development
and the this session for the next uh 25,minutes or so we'll be talking about the,state of Shopify theme development so,looking at different workflows which are,available for theme developers uh recent,features which have been released for,themes and our vision as well for the,future,so just just a quick introduction on,myself my name is Liam I'm a developer,Advocate at Shopify I've been with,Shopify for about seven years now so in,that time I've been creating a lot of,content for developers looking to learn,how to build on top of Shopify I've been,creating a lot of YouTube videos blog,posts and of course being able to be,here this is my first time visiting,Australia so it's extremely exciting for,me and yeah,it's yeah amazing connecting with our,developer community so yeah over the,next two days please do grab me for a,chat would love to to connect,so for this session this is going to be,the plan for our journey first we're,going to look at where we are right now,then we're going to look at where we are,going and finally we're going to look at,how we will get there and then we should,have some time for a q a towards the end,so to answer the question where are we,right now we need to take a slight step,back into the past back to Summer of,2021 and Shopify unite which was a,milestone event for team developers we,had the launch of online store 2.0 which,enabled sections on all pages we had,meta Fields natively launched for,themes which allowed us to have much,more flexibility and personalization on,different pages we saw the relationship,of apps and themes become much more,closely combined with Team app,extensions we had of course our vision,for custom storefronts for hydrogen and,last but not least we also had the,reopening of the theme store after the,Hiatus for a while,and in the months since then we've been,able to progressively enhance many of,these features so we've,improved with the limitations that we,had on sections and blocks by making,more sections more blocks available on,pages we have more Dynamic sections,available on more pages for enhancing,meta fields we also made the developer,experience of working with Team app,extensions much much better as well so,all this to say is themes are much more,powerful more adaptable and more,valuable to Merchants than ever before,so just to look more generally at the,ecosystem in general we see you know,quite strong and steady growth we're,seeing millions of merchants are looking,to improve their store looking to,customize their online experience and,their buying experience for their,customers we firmly believe there's a,great opportunity here for developers,looking to enter this space,if we look across to the App Store in,particular last year we saw that 400,million was paid out to our app,developers just increase of over 80,percent from the previous year and of,course we reduced our Revenue share so,Merchants who earn up to their first,million dollars don't need to pay,Shopify any Revenue share and
After seeing the eighth section, I believe you have a general understanding of Fluid Framework theme shopify
Continue the next ninth section about Fluid Framework theme shopify
Top Shopify Themes 2022 | Gretta Van Riel
Top Shopify Themes 2022 | Gretta Van Riel
hey guys i'm greta and in this video i'm,going to be going over everything that,you want to know about shopify themes,we're going to go through some tips and,we're going to go through some of the,best themes that you can be using this,year,so these are three things that i always,consider when i'm picking a shopify,theme so the first one is your product,range is it a,multi-product store or is it more a,single hero product store just because,it's going to affect the layout uh and,the overall conversion rate of the store,depending on which you end up going with,the second thing that i consider is the,niche of my store so from a design,perspective the same store won't always,suit electronics as it would suit,fashion for example so you want to have,a look again at the layout and make sure,that that layout is applicable to your,niche and the third thing and probably,the most important is prioritizing,conversion rate and so what i mean here,is like functionality over just design,so you want a theme that is fast,responsive fairly simple,and has an easy to navigate i guess like,interface so here are three shopify,themes that i would be using this year,and number one is debut and you cannot,look past this theme even though it is,kind of the most stock standard shopify,theme that is kind of where the beauty,of this theme lies as well because so,many stores use this same theme it,outperforms almost any other theme we,always try to introduce new themes or,custom coded themes uh,and we find that from a conversion rate,perspective they just do not compare to,debut so i really would not look any,further than this theme,until you're kind of at a point where,you can do enough a b testing and,conversion rate optimization to know,that your kind of like more design,orientated theme for example is,outperforming this theme so just to,really quickly show you guys through it,let's just hit view demo store while,it's really simple and straightforward,it's really really effective customers,are very used to using this theme as a,whole in fact one of our brands claytime,that's done over a million dollars in,revenue in its first few months of sales,uses this theme and while it's a really,simplistic sort of website as a whole it,converts so well,so as you can see,pretty straightforward,very straightforward very simple theme,but effective impressive,most impressive now we're gonna move on,to our dawn theme this is a theme by,shopify again so shopify,uh has designed this theme in the same,way it's designed debut says that it's,great for clothing and accessories,health and beauty home and gardens so,kind of like multi-sku stores so while,debut might have been better for kind of,a single sku store dawn is really really,great if you've got kind of like a,really broad product range so,let's view the demo store it's a really,clean sleek design definitely looks a,lot higher end as well so if maybe you,had kind of a higher perceived value,sort of product uh like especially yeah,of cour
Congratulation! You bave finally finished reading Fluid Framework theme shopify and believe you bave enougb understending Fluid Framework theme shopify
No difficulty
