Northern x Fanshawe Shopify Course

Prerequisites

• Bash CLI
• Docker
• GitHub Account
• IDE

Download Quick Start Package

To download the quick start package, clone this repository and remove the .git folder by running the following:

$ git clone https://github.com/northernco/fanshawe-shopify-course.git <theme_name>
$ cd <theme_name>
$ rm -rf .git

Create a new repository and add this folder.

Downloading the Theme

In the project, run the following to download the theme from your Shopify store using Theme Kit:

$ chmod +x theme
$ ./theme get --list -p=[your-password] -s=[your-store.myshopify.com]
$ ./theme get -p=[your-password] -s=[your-store.myshopify.com] -t=[your-theme-id]

The password can be obtained by creating a private app in your Shopify store [gif]. The theme ID can be obtained from the ./theme get --list command.

Full instructions can be found [here].

Using Theme Kit

Theme Kit can be run using the ./theme script in the project's root directory. A full list of commands can be found [here].

4 Ways to Get Your Theme ID

1. From the URL
   • Go to your-store.myshopify.com/admin/themes select "Edit Code" from the "Actions" dropdown next to the theme
   • The ID should be in the URL of this page
   • e.g. your-store.myshopify.com/admin/themes/80643031095
2. your-store.myshopify.com/admin/themes.xml
3. your-store.myshopify.com/admin/themes.json
4. ./theme get --list -p=[your-password] -s=[your-store.myshopify.com]

Setting up a GitHub account

For this course, you are required to set up and maintain your own GitHub account and repository for your project.

Here are a few links to get you started:

• Adding a new SSH key to your GitHub account
• Adding an existing project to GitHub using the command line

Setting up an IDE

The course lectures and workshops will be demoed using the VSCode IDE, but you are free to use any editor that you are comfortable with. Recommended extension are outlined below.

To maintain consistent coding styles across various editors and IDEs, we have included an .editorconfig file. Be sure to install an EditorConfig extension on your IDE.

VS Code

• The 20 Best Visual Studio Code Extensions for Front End Developers
• At the very least, it is recommend to install the following extensions:
  • Liquid Languages Support
  • Shopify Liquid Snippets
  • EditorConfig

Configure File Associations

• Update settings.json by searching for Preferences: Open Settings (JSON) and add the following:

"files.associations": {
  "*.liquid": "liquid",
  "*.scss.liquid": "scss",
  "*.js.liquid": "javascript"
},