Advanced

Advanced SCSS/JS customizations and working locally with Shopify

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.

This process is the same as we use to design and develop our Shopify themes.

This guide assumes that you are already familiar with NPM, SASS, Bootstrap, and you have basic knowledge of JavaScript language.

To get started, unzip the theme package on your computer and run the following command to install all NPM dependencies

npm install

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.com
ignore_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.

If you are getting an error for the 2nd command you have to install first the official Shopify command-line tool for themes. Please refer to this guide on how to.

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.

We recommend you to check the official Bootstrap Theming page for a more detailed guide on working with Bootstrap and SASS