Key Features:
- Use your favorite text editor
- View all your files at once
- Use SASS/SCSS and componentize files
- Live browser reload
- Version control with GitHub
Step One:
Install theme kit here (https://shopify.github.io/themekit/) and run the following command:
Once installed, run the following command to see that you’re up and running with the latest version
Step Two:
Make a directory that you’re going to be working out of and then move into that directory so something like this
cd mynewshopifysite
The create a config file using vim:
Once in vim, insert the following and then write and quit.
store: example.myshopify.com
password: secret
theme_id: "live"
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- “config/settings_data.json"
Step Three:
Initialize your git repository:
Then create a gitignore file and ignore the following files:
config/settings_data.json
prepros.config
Step Four:
Copy the example config file that we create so that we can put our secret information in there. Notice that it’s ignored above so that it won’t be exposed to the public.
Edit config.yml via vim just the same way we did earlier. Assuming you’ve create a development shop through your Shopify Partners account. You’ll want to update this config file with the actual info like so:
store: NAMEOFYOURSHOP.myshopify.com
password: secret
theme_id: "live"
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- “config/settings_data.json"
The password you’ll get by creating a secret app in the backend of Shopify:
Apps > Manage Private Apps
Create a new app and then you’ll want to copy the password right underneath the API key:
Also while you’re in here, go down to Permissions and make sure that Theme templates and theme assets are set to “Read and write”
Now, back in config.yml go ahead and paste that password in where we had the word “secret”
Viola! Now we can run theme commands that interact with the store.
Step Five:
Download the theme that’s on shopify so we have it for local development:
Now we should have everything up and running so that we can use our favorite text editors and do things like search and replace the entire project which is something you can’t do using shopify’s text editor. It also lets us utilize all of our favorite text editor extensions for rapid development. Not only that, we can commit all of our changes to GitHub and have a backup of our work.
Step Six:
Run:
There you have it! Oh ya, if you want to to set up Live Browser Reload, download this app (https://prepros.io/) and drop your Shopify project in there. Make sure to configure the settings once it’s in there.