what language is shopify written in
Published on: January 28 2023 by pipiads
Table of Contents About what language is shopify written in
- Beginners Guide To Shopify Liquid in 2022
- SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
- Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
- 10 - Shopify Theme Folder Structure and Rules for Developers
- The New Shopify Dev Documentation for Liquid is AMAZING right now!
- How To Autodetect Local Languages In Your Shopify Store
Beginners Guide To Shopify Liquid in 2022
SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
[Music]: [Applause]: alarm. welcome to this crash course on Shopify liquid, the templating language of Shopify themes. first of all, I want to thank you for bearing with me over the last three months. it's been a busy three months with the release of my latest Skillshare class Shopify theme programming which, by the way, the link is in the description. but in today's video we're going to cover an overview of Shopify liquid, a very practikal run-through of what you can do with Shopify liquid, which you can think of as the kind of back-end programming language of Shopify themes. so this crash course is gonna be split up into four, four parts. the first part: we're gonna cover the absolute basics. we're not even gonna touch the store data, just get you up to speed with some of the syntax. the second part: we're going to actually bring in some store data and use liquid objects. and in the third section we are gonna incorporate theme data. so theme data allows us to take user input from the admins of the store. they can customize their theme using the customizer and then we can use that data inside our themes- very cool feature of Shopify. and the fourth and final part: I'll be toking about some of the limitations of the templating language, what you can do and what you can't do with Shopify liquid and also covering an important topic within Shopify liquid, which is the topic of scope. we've got a lot to get through, so I'm gonna jump straight into the video. let's jump right into the computer and get into it, all right, so we're now inside my computer and we're looking at the Shopify admin of my testing shop: Chris testing shop. now, if you haven't done so already, you can create your own development store through your Shopify partners account. if you don't have a partner account, it's free to join. you just go to partners Shopify comm and join now, okay, and the great thing about a partner account is it allows you to create what's called development stores that are basically free store that you can use as a development environment to practike your programming. okay, so that's the first thing you'll need you'll need in an actual store, and the second thing you'll need if you want to follow along is the theme I'm using, so you can use any theme to follow along with. in fact, maybe it's the theme you're working on right now, but if we look at a fully developed theme like debut, for instance, there is a lot of code and files here, so I don't recommend, if you're trying to just learn Shopify liquid, that you work with a theme that's already been built out, because there's a lot of HTML in here. there's a lot of different files and lines of code, so my recommendation is to start with a blank theme, and the theme that I use is the one that you can generate through theme kit using the theme new command. what I've done for this tutorial is I've already generated that theme and I've put it on my github page. so if you just want to download the theme, it's at github. comm- slash- christopher dodd, slash, Skillshare. okay, this is my resources for my classes on Skillshare, comm and also on youtube now. so here you can see theme kit template theme and if I download that zip file, I'll just download it to my desktop. it's a very small file, should download really quickly. then I can go back to my store and simply upload that theme. all right, so now if you have a store and you have this theme, then we're starting from the same starting point, and if I click into actions, edit code, which is where we'll be diving into in today's lesson, I'm going to expand this out. you'll see that we have much less code in here. we don't have any sections or snippets and our index file is only ten lines long, okay, so this is ideal for practike purposes. we don't want to overwhelm ourselves with too much HTML, and definitely liquid and Shopify themes in general can get quite messy and hard to understand when you have so much code and stuff going on. so I definitely recommend you start from a starting point like this. all right, so how this tutorial is going to work is I'm going to basically follow what I wrote here. so this is a guide that I have on my website. you can find it at Krista freelancercom slash Shopify liquid guide and it's a comprehensive artikle, basically a text course, on how to do Shopify liquid programming. I toked about different styles of objects. I discuss all the objects available, where you can find them: objects, scope. it's a mammoth artikle that I don't expect you to read in one go, but if you get lost at any point throughout this tutorial, you can come here and read up on a section that you didn't quite understand or maybe something that you want to use later on. maybe it's a filter or an object or a tag that you didn't see before and you can come back here. you know, use control F to find that filter and see what it does. okay, so what we're gonna do is we're gonna start with pure Shopify liquid, without touching any of the store data or theme data, and then we're going to introduce store data and theme data to show you how you can use Shopify liquid to actually present the store data on the page. Shopify liquid, of course, is the templating language for Shopify themes and it allows you to represent what you've got stored in your store into your website. all right, so without incorporating store data, it's pretty useless. but what we're gonna do- just so you get the concepts- is start without any store data and then introduce it. all right, so I've done a lot of toking so far. let's actually jump in and write some code, okay, so what I'm gonna do? it doesn't matter what template that you do this in, I'm just gonna do the index dot liquid template. I'm gonna get rid of all of this code and I'm gonna start with the first basic example, which is assigning a variable. all right, if you've done any programming in the past, this is a very basic function. so I'm going to create a variable and assign it the value of hello. okay, so this is obviously going to be a string variable. so what you can see here is we've got a opening curly brace, a percentage sign, we've got our code in here, so we've we're running the assigned tag and we're just doing our variable assignment there. then when we're done, we close with the percentage sign and the curly brackets. so pretty much all the time you're doing Shopify liquid, this is what a tag looks like, except when you're outputting stuff on the screen, in which case you use the double curly braces, and that's what we'll do right now. we are just going to assign this variable and then output the variable to the screen. I'm going to hit save on that. one extra thing I'm going to do, so that we only have what we wrote here on our page, is get rid of some of the layout code. so in my themes art liquid file inside the layout folder, I'm gonna get rid of everything except this main tag here with the content for layout. so although this header content, I'm just gonna delete. all right. so now we can view what we've made here by hitting this link here to preview our theme and I'm gonna open up in a new tab. so it stays in the same window. now when I open up the theme. you can see it says hello. so, as you saw, we assigned a string to a variable and then we output it on the screen. this is very basic shopify liquid. actually, I think we should have them side by side. so what I'm gonna do is take this out of full screen, create a new window with a preview, and then we can place them side by side on Mac like this. there we go: all right, cool. so here we have our code and we have our output. so we've created our own string variable. this could easily be a number as well. so let's just say the variable is 5. refresh the page. you can see it's 5. okay, we can perform math on that variable. so what we can do inside our output tag here is run a filter. so in Shopify liquid we have three types of syntax. we have tags, which you can see here. we have objects, which you'll see when we introduce store data, and we have filters. filters are a piece of syntax that is pretty unique to Shopify liquid, so it might take you a litt.
More:The 3 Things you Need to Start Dropshipping on Amazon
Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
More:Little to NO cost Small Toys & Games bring big profits on Ebay & Amazon
10 - Shopify Theme Folder Structure and Rules for Developers
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 tok 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 tok about in this video. so, speaking of that, let's go to our computer and start toking about this amazing update. welcome to the new documentation of shopify liquid. now, the first thing i notiked 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 notiked 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 toking about? you can change the object. say, for example, i'll use shop dot url and that will automatikally or update the output in real time, and then you can highlight this and then open this in a new tab and that should open the polyness potent potions. our store will be opening when the moon is in the seventh house- a stroke anyway. going back to the topic, if you're a shopify developer and you want to go through the objects real quick without without opening a new page, this is a great tool for that, because you can just go through the objects. for example, i want to use product and then i can just scroll through the attributes without opening the product page and that will automatikally update the output in real time. and there it goes. you can see it's saying health potion and you can also create conditions here. as you can see, here we have the if. if page description is set, then output the following meta tag: another thing that i really liked is the performance of the pages, or the speed of the pages. now i'm not sure if that's because of my connection, but i notiked that it's faster compared to the old documentation. once again, i'm not entirely sure, but i think they have lazy loaded most of the content and they are cached. i'm not sure. if my assumptions are correct, they'll be really nice. so i've gone through the objects tags and a little bit of filters and i don't think there's something new in objects. correct me if i'm wrong, please, but i notiked that there is a new tag under the syntax. if we open the tags now you need to click the plus icon to open this. if you click this tags, it will open the tags page, so you need to be careful, but that so click the plus icon. it will open the following: and then under the syntax, there is a new tag called inline underscore comment. i really like this new tag because the comment tag is really dreadful to use if you want to create a comment, all you need to do is to use the number sign. you don't have to type comment anymore. as you can see right over here in the um code snippet, we can erase all of this. you can just create a tag and then you can type number sign- not that number sign- and then followed by the comment that you want to say so. for example, i want to eat pizza right now. that's how you make comments. you don't have to type tag comment. you don't have to do this anymore like this. previously, we were using comment and you still have to close the following tag with and comment. you don't have to do this anymore. you can simply type number sign and then type your comment. i am shaking and crying: rn, that's faster, right, i know you can get rid of this. don't need that anymore. but personally, if i'm going to use this tag, i'm going to make it like this: as you can see, i'm using um- plenty of equal signs just to create a line and, as you can see, it's much cleaner. looks really nice. this is what i'm going to do. if i'm going to use the comment tag or the inline underscore comment, all right. so those are the things that i really liked. let's tok about the things that i don't like. or, let me just put it this way: i wish they have done this, they added this or they kept this. now, just a disclaimer: this is not something that i would say, quote unquote, important or should be prioritized. so if ever shopify is watching this, thank you for watching. first is: i know this won't really matter to some, to some of you, but i notiked that the color palette changed, or the color of the documentation changed. previously it was green, but now it's blue. i don't know, it just just bothered me. it's just the documentation, though. if you open the themes page and the apps page or other pages, as you can see, the color is different. right, it's darker greenish, darker green, but in the documentation of liquid or under the api references, if you open other pages, like the graphql admin, api, that is, oh, it's different. why am i toking about this? i don't know, it just bothered me. i guess this is so nonsense, but my point is: it's different and i don't know, it just bothered me. i really like the um green theme, but yeah, we'll get used to this. the second is: i wish they have added like a badge to, especially to all of the new things, like the inline underscore comment. that is a new tag. i wish there was a like a badge in the sidebar or the navigation sidebar, like beside, should be like new, just to, you know, show that, hey, this is new, try us out. or, you know, open this. or maybe shopify devs could have added like a separate section here where they, you know, say something about the new features or objects or tags or filters, just like what they did to their apis. if you remember, there is a um. if you open, all there is the release notes. i think this is just everything about their api. yeah, maybe there is one. no, there is none. so, yeah, i wish there was something like this in liquid, or just a badge saying that, hey, this is new would be nice. those are just my ideas to make it easier for us to go through the updates, because who would want to scroll the entire documentation of liquid um just to see what's new? correct, once again, it's just an idea, might be dumb, i don't know. the next is: this might be really out of the topic, but i really hope, or i really wished, shopify updated the um. the
How To Autodetect Local Languages In Your Shopify Store
[Music] from local apps. here and in this video I want to show you how you can make it that when somebody comes to the app from a different country, it'll automatikally populate in their language, right? so what we've done is we have an IP detection that we use on that. so somebody in, for example, France comes or show in French, or so in Germany comes a show in German, right same thing with Chinese in the every other country, right? so that's kind of how the app works. but in order to do that, you need to turn on. so if you don't have the Apple include below this is a pro feature in the app. just, clear is a constitu. I'm doing this for us in it and what you would do is you basically go in here and you would hit this button here: auto detect language. so if you turn this on and then save it, you'll know how to access to hundreds of countries on where people show up. so, for example, I'm in Canada and if somebody from Canada showed up on the app, it will show up in English from Canada, say they with the us, same thing with Denmark, same thing with Mexico, same thing with Sweden and all these countries. now let's say you don't want that to happen, because if you have a country like, um, let's say, Arlen, for example, some in Ireland shows up and they don't want it to show up in Irish, right, ok, because no one that really speaks Irish- most people would prefer to have English, right? so all you need to do is you need to just go in the back end and you just need to move. remove Ireland from the list. so if I remove Ireland from this list, all of a sudden someone in Ireland will not get in Irish. don't just get in the default language. so, whatever your default language of your story is, that's the language that it will show up for that person, right? and that's kind of. that's kind of the way we wanted. and the way we also do is we use the analytiks in order to find that out. so if, for example, you'll have this section, your analytiks, down here, which will tell you: oh, people who were in Irish switched over to English. if you see that a lot, that means that maybe you shouldn't have it in that language available right on there. so, yeah, so if you want to have it auto detected from the person's location, I think that creates a better user experience for the customer and this app is all about creating great user experience for the customer. right, we do a lot of what we do in here with the menus or locations, the colors, the font sizes, everything, so that way your customers have a great customer service experience and that way looks really nice on your website as well. right, and I think that having a audit attack- they have an auditor net properly- is a really big part of that, right. so some countries they may prefer to have English or they prefer not to have. they can, they can also do that, right, in other countries they don't. so, again, all you need to do is you need to go in here and you need to just click on the auto detect button right here and that will make it that when somebody comes in to another country, it'll automatikally show up in their language and they always have the option of switch. so if, for example, I'm in France, it shows up in French. I can always come here searching to do whatever line other language I want. all right, thank you very much again. the smoke alarms translate pro. if you don't have the app, include a link or go to the link and grab the app, and if you like this, I do like and subscribe to this channel. please leave any comments or questions below or reach out to the customer service team. we're always happy to help you and we want to create the great experience for merchants and we want to create new and better experience for your customers. thank you very much, you.