What to learn before learning liquid ?

Tourist
20 0 0

Hey guys,

 

I already know basic CSS and HTML, and now I want to get into Javascript. 

 

I understand that Shopify's themes are built on those three + liquid. do you think proficiency in javascript is important before getting into liquid ? or should I learn JS first and then move on to liquid ?

 

What are your thoughts and experience ?

 

thanks !

0 Likes
Shopify Partner
1838 172 549

You can learn Liquid in less than a week. Liquid is just a templating language and a simple one at that. Javascript, a full fledged programming language with so many runtimes, runtime environments, adjacent APIs and over-caffeinated developer community sprawling with new projects and frameworks on a weekly basis might take a few years to learn. And even then there are things that shall remain WTF forever in Javascript ;-)

I turn coffee in to code - since 1998
1 Like

JavaScript is not needed for liquid as JavaScript is used for client-side manipulation, while liquid is server-side template engine. You can build and tweak Shopify themes without JavaScript (here are liquid commands and syntax http://cheat.markdunkley.com/ ). Given that you want to work with Shopify themes, you probably won't need advanced JavaScript knowledge (so no need for "wtf" moments when you try to understand how "this" keyword works, or understanding what is hoisting). Go for liquid, learn only what you need for JavaScript (probably jQuery and how to add click events and etc, simple stuff), and then build knowledge as you go.

Helping Shopify merchants prepare for the mobile-first world.
0 Likes
Shopify Partner
248 9 50

I would say liquid is actually easier to learn than javascript. You can start by having a look at your theme files and look at what kind of commands it seems to use for building each part of the page. 

Here is the really helpful cheat sheet that tells you all the things you can do : https://www.shopify.com/partners/shopify-cheat-sheet

You can use that to refer to the liquid statements that you see to help understand what it's doing.

 

Javascript can be finnicky and annoying. The whole thing breaks whenever you have even a tiny error or typo. Liquid should at least give you some error messages to help you try to figure out what you did wrong, it's more forgiving.

0 Likes
Shopify Staff
Shopify Staff
537 4 78

Hey Roee,

 

Identifying what you need to learn before diving into Shopify development is a great idea, so I'm glad you asked this question :) As previous commenters have mentioned, Javascript is not a huge part of Shopify themes- although it does play a part. For example, many themes use a JQuery plugin written in JavaScript to load images in a way that improves the page loading performance, so it's worth looking into how lazyloading works for that purpose.

 

There are other cases where you will encounter Javascript- especially if you are diving into the API, but for the most part you will be working with HTML, CSS and Liquid. If you have a good handle of HTML and CSS, you'll be able to start working with Liquid pretty quickly. 

 

If you're looking for a nice introduction into Liquid, our blog article An Overview of Liquid: Shopify's Templating Language is a great place to start, and you'll also find a pop-up on that page which will get you a downloadable Learning Liquid PDF. We also have a ton of webinars on our Youtube channel, like Getting Started with Shopify Themes

 

You'll likely want to expand your own skillset in time, so I wouldn't discourage you from learning Javascript- in fact you'll be able to do a lot with it, but it's not going to be a major requirement when you're starting off. 

 

Hope this helps Roee, and if you have any other questions, just let me know :)

 

Liam Griffin

 

Shopify Partner Education

 

PS: I also want to say a "thanks" to the other responders in this thread!! 

0 Likes
Tourist
20 0 0

hey ! Thanks everyone for your support and replies, much appreciated !

 

So I now understand that I need to first get more proficient in Liquid and then slowly learn specific JS tools to get into Shopify development.

 

 


@alex_ampify_me wrote:

JavaScript is not needed for liquid as JavaScript is used for client-side manipulation, while liquid is server-side template engine. You can build and tweak Shopify themes without JavaScript (here are liquid commands and syntax http://cheat.markdunkley.com/ ). Given that you want to work with Shopify themes, you probably won't need advanced JavaScript knowledge (so no need for "wtf" moments when you try to understand how "this" keyword works, or understanding what is hoisting). Go for liquid, learn only what you need for JavaScript (probably jQuery and how to add click events and etc, simple stuff), and then build knowledge as you go.


 

0 Likes
Liquid is way much simpler than js. I suggest you should learn JavaScript— just the basics. HTML and CSS is mandatory.


Https://Justshopified.com
0 Likes
Highlighted
Excursionist
20 0 5
Hey Roee,

great questions you are asking here. If I would start learning Shopify development from scratch today, this would be my way to go:

1. Get familiar with the Shopify backend and the live customizer.
2. Learn the basics of HTML and CSS
3. Learn the basics about Shopify Theme files. (which part of the frontend corresponds to which file)
4. Try to make small modifications to the frontend and see how liquid is used as a template language to fill in data dynamically.
5. Learn about Shopify Sections
6. Learn the basics of Javascript + Jquery.

Try to improve all the above on a small real world project with an actual client.

You can further learn about AJAX, SCSS, local development and GIT repositories.

There is alot to learn and I think the best way is to improve along the way.

:-)


Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
0 Likes