Through that the recommended way to work with SCSS/CSS and JS is by editing the custom files, there may be cases when you want to take your customizations to the next level and fully transform the design and layout for our Premium Themes.
To get started, unzip the theme package on your computer and run the following command to install all NPM dependencies
Then, create a new called "config.yml" on the root of your working directory and add the following code to it:
development:password: [YOUR-API-PASSWORD]theme_id: "123456789"store: my-store.myshopify.comignore_files:- assets/theme.css- assets/theme.css.map
password: Your API password. Please see the setup docs on how to get this value
theme_id: The theme that you want to work with. Please see the setup docs on how to get this value.
store: Your store’s Shopify domain
For more configuration options in the "config.yml" file and a detailed guide for it, please check the official Shopify guide.
Now, you are ready to run the following 2 commands, which we recommend running both at the same time:
npm run watch
which will watch, compile, and minify the content of the "_src" directory where we have all our styles and scripts for our theme.
The 2nd command is:
npm run theme-watch
which is an alias for "theme watch --allow-live". This command will watch for any changes on all files, not just for the '_src" folder, and upload them automatically to your Shopify store.
Now you are ready to work with the content of the "_src" folder. As soon as you edit a file on this directory, the first command above will compile and minify styles or scripts depending on whether is an "SCSS" or "JS" file and create the output on the "assets" folder. (theme.min.css or theme.min.js). The second command with watch for changes in the "assets" folder (it will not watch for changes in the "_src" folder) and upload the files to your Shopify store.