Lmao dude I've been trying to work out how to sort my scss theme file out all day, then I find out I don't even need to use it anymore... Thanks for finally saving me
Great video as always Chris! I was hoping to hear there was a workaround for preserving Liquid variables in the Gulp task but doesn't seem to be the case. Appreciate you walking through this setup and was looking at implementing local development with Gulp or some other bundler like Webpack, but Gulp seems to be pretty simple/ideal for the Shopify dev flow.
'Themekit watch' watches for any file change within the theme so all you would have to do is put the JS file into your assets folder and include the script tag in your theme.liquid to bring it in.
Hey Chris, if you download the theme file from Shopify Admin, you can turn theme.scss.liquid to theme.scss. In fact, you will get 2 files after you download it, then you can work with gulp.
That's another idea, yes! But essentially it's the same amount of work as if you just used the SCSS file in Shopify. One benefit is that you could use the latest version of sass as you're processing locally.
Great video! Thanks for it! One note on minifying, I'd probably not do that if you're building for a client, as it will make making future edits by the client more difficult.
Possibly but remember the SCSS is not minified so as long as they have access to the SCSS files, they can turn off minification and regenerate the CSS ;)
@@CodewithChristheFreelancer Yes but I'm thinking of clients with minimal dev skills. A lot of people know a little CSS but most clients won't know how to compile the Sass files.
Hi Crhis coul you please help? it says Task never defined: sass when i try to run: gulp sass i was at the minute 20:45 seconds of your video when this arrow come up. thanks for your help
nice video, thanks for the tips. btw: theneKit,comand('watch', { env: 'development' }) not workig here cause it says i got to add --allow-live flag and for what it seems gulp dont know how to run it if i add the flag there. any insight?
Hi Diego. You must be trying to run 'theme watch' on the live theme. In order to add in the live flag, I'm pretty sure you add it to the options object. Think someone already asked about that 🤔
@@CodewithChristheFreelancer Good day! What's flag name in order to allow --allow-live flag. in docs, its say Not applicable. Searched everywhere. Couldn't find anything
Hey Becky. It's on my to-do list to do a Shopify CLI of this video. You can of course continue to use Themekit in the I talk about in the video. I've just applied a very similar concept to a CLI project in my own workflow.
What do you use for the API password now? It seems they have changed that part of it, I added the site API token but then when running theme download i get an error?
@@CodewithChristheFreelancer mate, I don't know lol. I'm a complete beginner who's literally asking you 'cause you run a channel on Shopify development and you seem to be more knowledgeable on it.
@@biggieg3881 Sure but your question had to come from somewhere right? What gave you the idea that it might affect performance in a bad way? To cut straight to answer: the answer is definitely no if you compile the SCSS locally but I'm curious to understand your thought pattern here.
@@CodewithChristheFreelancer The assumption came from the understanding that libraries and using JavaScript affects performance. Gulp, based on what you presented is a library, and it affects performance. And then you install numerous packages for SCSS (which is a ton of file size). Just wanted to err on the side of caution so I figured I'd ask.
This video was inspired by Shopify's recent decision to deprecate SASS from themes. This is important, especially for my newer students who realise that there is now a css file in their theme instead of an scss file.
![Shopify CLI for Theme Development (How to use) [Version 2.0]](http://i.ytimg.com/vi/YM0XOa2LZSs/mqdefault.jpg)
I think you are an underrated Shopify Development youtuber.
Yeeees he’s back!!! Good to see you mate.
Thanks Michael
Nice of you to come back with another great video!
Lmao dude I've been trying to work out how to sort my scss theme file out all day, then I find out I don't even need to use it anymore... Thanks for finally saving me
I'm new to Shopify Development, and this has been VERY HELPFUL! Thanks for this! Keep it up!
Why does the video have about 1000 views and so few likes? injustice! the video is cool and informative, thanks !!!!
Great video as always Chris! I was hoping to hear there was a workaround for preserving Liquid variables in the Gulp task but doesn't seem to be the case.
Appreciate you walking through this setup and was looking at implementing local development with Gulp or some other bundler like Webpack, but Gulp seems to be pretty simple/ideal for the Shopify dev flow.
that's so helpful . would you please tell how to use custom javascript file in theme kit and update it on shopify? thanks
'Themekit watch' watches for any file change within the theme so all you would have to do is put the JS file into your assets folder and include the script tag in your theme.liquid to bring it in.
Im learning the Shopify environment, thanks Chris!
You have saved my life with this video thank you!
Hey Chris, if you download the theme file from Shopify Admin, you can turn theme.scss.liquid to theme.scss. In fact, you will get 2 files after you download it, then you can work with gulp.
That's another idea, yes! But essentially it's the same amount of work as if you just used the SCSS file in Shopify. One benefit is that you could use the latest version of sass as you're processing locally.
Great video! Thanks for it! One note on minifying, I'd probably not do that if you're building for a client, as it will make making future edits by the client more difficult.
Possibly but remember the SCSS is not minified so as long as they have access to the SCSS files, they can turn off minification and regenerate the CSS ;)
@@CodewithChristheFreelancer Yes but I'm thinking of clients with minimal dev skills. A lot of people know a little CSS but most clients won't know how to compile the Sass files.
Hi Crhis coul you please help? it says Task never defined: sass when i try to run: gulp sass i was at the minute 20:45 seconds of your video when this arrow come up. thanks for your help
Hi Caio. That error message sounds pretty descriptive. I would have to see your code to figure out what you're doing wrong.
nice video, thanks for the tips. btw: theneKit,comand('watch', {
env: 'development'
}) not workig here cause it says i got to add --allow-live flag and for what it seems gulp dont know how to run it if i add the flag there. any insight?
Hi Diego. You must be trying to run 'theme watch' on the live theme. In order to add in the live flag, I'm pretty sure you add it to the options object. Think someone already asked about that 🤔
@@CodewithChristheFreelancer sorry i didnt read the below comments before ask, i bumped my head few times but got it to work, thanks
Here is the modified code to allow deploying to a live site:
const gulp = require('gulp');
const themeKit = require('@shopify/themekit');
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('styles/custom-styles.scss')
.pipe(sass())
.pipe(gulp.dest('assets'));
});
gulp.task('watch', function() {
gulp.watch('styles/**/*.scss', gulp.series('sass'));
themeKit.command('watch', {
allowLive: true,
env: 'development'
});
});
Thanks a lot ☺️ I'm new to shopify and grunt, very helpful,
@@CodewithChristheFreelancer Good day! What's flag name in order to allow --allow-live flag. in docs, its say Not applicable. Searched everywhere. Couldn't find anything
Great video! So helpful, thank you!!!
You're welcome Trixie ;)
Amazing content ! thanks for creating these videos❤
Hi Chris, followed all steps , it is still not converting in gulp scss.liquid file into css.liquid file ? Can you provide some support.
As I mention towards the end of the video, you can only do SCSS to CSS. It won't parse Liquid code for you as that is always done on the server side.
Hi Chris, is there anything to do differently since you aired this video, now that Shopify recommends using Shopify CLI instead of Themekit?
Hey Becky. It's on my to-do list to do a Shopify CLI of this video. You can of course continue to use Themekit in the I talk about in the video. I've just applied a very similar concept to a CLI project in my own workflow.
What do you use for the API password now? It seems they have changed that part of it, I added the site API token but then when running theme download i get an error?
How have they changed it? Honestly I haven't used Themekit much at all since Shopify CLI for themes came out.
Thank you so much !
hello sir i any tips for new developers on how to get first clients?
Hi Nisarg. Check out my video entitled 'How to become a Shopify Theme Developer'
@@CodewithChristheFreelancer thanks
Thanks man 🙏
Do you still recommend SCSS/Sass with Shopify theme development in 2024? Or does it affect performance in a bad way?
How would it affect performance in a bad way?
@@CodewithChristheFreelancer mate, I don't know lol. I'm a complete beginner who's literally asking you 'cause you run a channel on Shopify development and you seem to be more knowledgeable on it.
@@biggieg3881 Sure but your question had to come from somewhere right? What gave you the idea that it might affect performance in a bad way?
To cut straight to answer: the answer is definitely no if you compile the SCSS locally but I'm curious to understand your thought pattern here.
@@CodewithChristheFreelancer The assumption came from the understanding that libraries and using JavaScript affects performance. Gulp, based on what you presented is a library, and it affects performance. And then you install numerous packages for SCSS (which is a ton of file size). Just wanted to err on the side of caution so I figured I'd ask.
Yeah so if the process is run on build then I can't see how it would affect performance as the Shopify site itself is not processing your SCSS.
Amazing!)
Hi Chris! It's been a long time! But, why this? Why not talk more staffs about Shopify API? Waiting for your next course!
This video was inspired by Shopify's recent decision to deprecate SASS from themes. This is important, especially for my newer students who realise that there is now a css file in their theme instead of an scss file.
New class will be out by April 21st!
@@CodewithChristheFreelancer Perfect! I will definitely be there! What's it about?
Hello sir,
What is your Shopify theme customising charge ? Can you send email of charge details ??
The title is SCCS?
The title of the video? It includes SCSS, yes haha
Ah thanks for the spot! I'll fix it now.
@@CodewithChristheFreelancer Yea, sorry I wasn't clear lol I thought there was new css preprocessor, I panicked 😂