Using Javascript in Shopify Theme Development

Dive deeper into Shopify JavaScript with my dedicated course module at

Do you run a business on Shopify and want help with your store? Get in contact

Episode Overview
-----------------------------
So far on this channel, we’ve covered quite a bit of Shopify Liquid but in order to allow the user to update the UI without reloading the page, we’re going to need to use Javascript.

Javascript is essential in Shopify theme development as Shopify Liquid, the language that allows us to access the data layer of our store is executed server-side.

Using Javascript, we can add features like front-end variant switching, lazy loading and so much more. Basically any interaction on the front-end that you see on a Shopify store relies on Javascript code.

So, in this video, let’s talk about how to use Javascript inside Shopify Themes and talk about the two ways we can pass data from Shopify’s backend for use on the front end.

Links Mentioned
----------------------------
Understanding Web Development: A beginners guide to the Web

Shopify Theme Programming: Liquid, JSON and Javascript

Check out my stuff online...

My travel channel:

My website:

My socials:

[johnmcaulay]

Bro you literally saved me. I had a Shopify project for a client that I took on thinking "how hard can it be". Turns out quite hard.

I was hours away from trying to sell them on a Hydrogen store instead as I'm super familiar with React / JAMStack.

This video finally made Liquid and theme customization click for me.

I owe you big time.

Thanks!!!

[jeffborges]

Another great content on shopify
By the master.
Thanx Chris.
I am finishing your class in skillshare and it really helped me to understand themes.
Keep it up 🙏

[hassanmalik]

a mature professional way to describe the point thanks cris

[oshiba]

Dude is living the dream, dropping code and dropping creampies left and right ;)

[tatianatothe]

I'm working on my first couple Shopify templates for a few clients and while I'm not that new to webdev, I was still a little stumped with the Shopify API (differences between sections and snippets, working with schemas) and really getting into the nitty gritty. Your videos have been INVALUABLE, especially since I have a client project with a deadline in about a week. It's a simple project that I would've otherwise gotten out pretty quickly if it was say, a simple landing website, but the Shopify quirks were throwing me for a loop. THANK YOU SO MUCH!

[abdullahnasir]

Learned so much from your videos about Shopify. Thanks Chris.

[aiman_yt]

Thank you! Was exploring shopify and wondering how to use react with it. This helped a lot.

[kelvinmuriithi]

Thank you so much. I'm also really enjoying your documentation article. Extremely useful

[NoveltyKnown]

AMZIN VIDEO M8!
just for the example at 30:32 i think you need to parse the data with a JOSN class or some stringify.

[iamgideonaina]

Great Content! Just curious, I am would think that shopify has a standard way to query their storefront API in a way that will not expose the Shopify API Access token in the console; Any hints on that?

[TheRomane]

@ 31:12 ...Woud the console.log have worked in the if you parsed it's json response ?

[AbdulWahab-lhin]

Thanks for another valuable content on Shopify and JS.
Will really appreciate more insights on how to use JS with theme development.
Thanks so much @Chris

[moatazsaber]

Very useful information. I hope you make a full course on skillshare about using javascript for Shopify, I did watch your skillshare courses but I think they are still not enough to understand javascript for Shopify. I need more in-depth examples of how to edit those functions. Thank you!

[Hsa]

My country doesnt support skillshare please make your course available in youtube

[forsaken]

Hey Chris.. Really nice video explaining JS usage on Shopify.. however .. I'd like to see your video explaining coding and activating AJAX functionality in collection filters as well, this is also a basic necessity for all the theme developers when it comes to an eCommerce store. Will you please create a dedicated video on this subject? Look forward to it.. Thanks!!!

[joeltorres]

Great overview on the subject. On a side note. I see that Shopify is not continuing their support for slate. You can still use it but it wont add new features to it I guess. Do you still recommend for new shopify developers to jump into slate? or wait a bit for the new shopify theme creation process to get released from beta?

[mr.random]

Any chance on a Shopify App Development course? I know it’s just a regular web app that is connected to Shopify, but would be helpful. Trying to make my own app because these app subscriptions are too expensive and hit the bottom line.

[edgarchilviet]

Thanks for the explanation. What would you suggest to use to add a "note" (or edit the profile) of an existing customer using a "form" on the frontend?

[diegognoatto]

nice video, thanks for all the tips: im wondering if u ever tried to add barba.js for smooth page transitions on shopify theme, would i have trouble with routing or cache?

[jitendracshah]

Thanks for the great content.
can you give the reference link to the video in which you showed custom storefront website?