I am looking for advice on how to learn Javascript for theme development on Shopify

Hello everyone,

Background :

I quit my job in statistics a year ago because I was very unfulfilled in my work. I then found dropshipping (not really proud of it…) and thought this could be an opportunity to escape from my life as an employee. While I was trying to make my website through shopify, I realized I was actually interested and excited about it, I then dug deeper and was on my way to learn programming.

My goals:

It would be a real achievement If I was able to update a free theme to match exactly what I want to do. Not from scratch as my understanding is that it is very time consuming and there is no need to reinvent the wheel. Being able to make an app and interact with shopify’s API would be a goal as well.

Programming-knowledge :

I learnt html, css, sass and basic liquid in order to play around with shopify’s free themes such as narrative, debut and brooklyn. It took me some time to feel like I could understand the logic used in the different themes, but I think I am ok with it now or at least can find the relevant information when I get stuck.

Then I wanted to add and see how interactions were made on the website, so I took a look at the javascript files on the different themes. Obviously, it looked like chineese to me at first… On several occasions I superficially looked at javascript courses, without any results, stilll chineese…

Thinking I had not put enough effort into it, I recently finished the “javascript algorithms and data structures certification” on freeCodeCamp , I watched some basic Jquery tutorials as well.

Just now, I had another look at the free themes javascript files, and it still looks ever so complicated to me. I feel like everything is so well structured, as if there is a real programming pattern behind it. I eventually feel desperate and like I am a million years to understand it.

What to do now ?

I guess I should practice more before looking at these files again. Thing is, I am not sure on what I should practice, I don’t want to loose time going in the wrong direction. I have the impression that practicing my JS on simple DOM animations won’t get me far, and the real issue here is the whole data oriented object programming pattern.

Is there a structure that all websites follow, or standard practices I could learn?

Would you have any recommandation to practice and learn more JS that could be relevant to my goal?

If nothing happens, I probably have a couple of months ahead of me before having to get back to my old job. I feel so desperate thinking about it, and still hope somehow I could change my career path.

Thanks for reading me,

Hi and welcome!

You’re basically asking for a magician to stuff JavaScript and all its syntax and concepts and patterns into your brain with one hand gesture like POOF. It’s not possible.

Learning to code is hard and it takes time and effort. There is no easy way. I’m not trying to discourage you, coding is hard but it’s also very fulfilling if you enjoy it. However, if you’re only interested in “making stuff work”, you could probably get away with a lot of copying/pasting code from resources like stackoverflow and such. You’d still need a basic grasp of the matter though. The only advice I have is - just get your hands on that keyboard and code. And don’t give up :love_you_gesture:

Thank you for your answer.

I don’t want to give up and I am ready to code.
Thing is, I am not sure of what I should code in order to get better. I really enjoyed the freeCodeCamp challenges, I wondered if you knew a place where I could find more complex javascript challenges?
All the things I find are either expensive or really beginner.

Thanks

There’s a number of sites for programming challenges (codewars, edabit, to name just two), but they mostly concentrate on algorithms or specific concepts of the language. I’m not sure if you really need to dive into it that deep, if your goal is mainly to modify your shopify site.

Maybe in your case, a different approach would work faster for you, because you already have the code you want to modify, you just don’t understand it well enough to modify it the way you want to. So I’d suggest that you take that code and play with it. Comment out large portions, see where stuff breaks, why it breaks, what it does. Console.log every step. Follow the flow of the variables and functions being passed around. If you don’t know a certain method, you can look it up. And if you really can’t get your head around something - this forum is open not just for questions about the curriculum, you can always get help. The more specific you ask, the easier it will be to help. Maybe just give it a go and tame that monster of a JavaScript file step by step.

Your answer is much appreciated, and gives me some hope :).
I will try your suggestions, It does not look easy, but I guess nothing comes easy.

1 Like

I don’t have any experience with Shopify, but I can say with some confidence that FCC’s curriculum is not going to prepare you to customize Shopify templates. The FCC JavaScript course is basic programming stuff with very little intersection with the “real world.”

For example, say you wanted to click on a button to change some text on the page. That is something you could learn in about twenty minutes, but it is not covered in the JS course here.

Real world applications of JS in stuff like Shopify and WordPress are generally not going to have much to with getting the sum of primes or translating roman numerals to the 10-base system. But if you got through it, you do have a nice base and understanding of the language to start working toward your goals.

If I were trying to do what you were, I would focus in on how JavaScript works in Shopify and then explore those specific topics, as well as exploring Liquid (this is the first I heard of it, btw!). I would read the docs and look for blog posts dealing with the specific topics.

I would expect to learn jQuery and how it interacts with the Shopify environment. I would find a community with people doing what I want to do (Shopify development), and ask around and listen to see what I need to know.

Good luck on your project!