Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

The first thing you need to get going with a development store is a Shopify Partner Account.

Partner accounts allow you to set up an unlimited number of development stores free so you can build custom themes and set things up in a development environment before moving them live.

Before setting up a Partner Account you may want to have handy:

• The email address associated with your paypal account (if you have one)
• Your business number (if you have one)

Sign up for a Shopify Partner Account here

In order to start developing we actually need to create a store to work on

When you are logged in to your partner account click on development stores and in the top right corner click create a new store. You will be directed to a screen where you can make a name for your store (this will be the domain for your dev store with .myshopify.com appended) You will also need a password for your development store. Once you’re done you’ll be redirected to the admin panel for your development store.

Adding a New Theme

Under Online Store > Themes you will see that your theme has already been set up with the default shopify store. We want to swap this out for our own theme files that we will work on and edit locally. We'll go through the process of creating a new theme with Slate in this section.

Shopify Development Environment

As we discussed previously, Shopify is a closed ecosystem. This in part means that in order to access the data from your Shopify store you need to serve your theme files through Shopify. When developing locally this means that each time you make a change you need to re-upload that file to your theme in order to view the change in your store.

There are a couple of ways to go about this, but they predominantly fall into one of two categories: set up a local development flow with some sort of tool or script that allows you to upload changed files with facility (we'll explore this more next), or use the Shopify editor to make changes to the files already hosted on Shopify directly online.

Developing in the Online Editor

You can probably note a couple of issues or hindrances of the latter approach right away. First, as developers we use various tools, like specific text editors and frameworks, that allow us to expedite our work and optimize some commons tasks. This becomes more difficult when we are working in an online editor. Secondly, this limits version control to what is available through Shopify. They do allow for some rolling back, but it is not quite as robust as other version control tools you may be using (we are going to make use of github). Finally working in the online editor makes it more difficult to collaborate on projects with other developers. Hopefully you are sold on setting up a solution to facilitate local development, but what is out there?

Slate

There have been a couple of different tools for local Shopify Development. There are some great desktop GUIs that have been developed to facilitate local dev for example Motifmate which has a monthly subscription fee. There are also command line tools, some common ones include the theme gem and themekit. Today we are going to be setting up one such command line tool developed by Shopify called Slate. Slate provides the ability to generate a paired down scaffolded Shopify theme as well as a command line tool for local theme development, today we will focus on the latter. Check out the Slate Documentation.

Slate Installation

Let's go ahead and install slate on our computers so we can start using it for our theme development. Slate works on Linux, WIndows, and OSX. We are going to use npm to install Slate so make sure you have that installed before running the Slate install command. Open a terminal window and run the following command:

npm install -g @shopify/slate

This will install Slate globally on your computer so you can use it for all future theme development

To confirm it is indeed working. Type in

slate -v

and you should see a version number associated with your installed version of Slate.

Slate Theme Scaffold

Once slate has been installed globally, we'll want to move into the directory where we want to create the theme files in our terminal. Once there we'll want to run the following command (where [name] is replaced by the whatever you'd like to name your theme):

slate theme [name]

When it's finished running you'll see the line [name] theme is ready. At that point you can move into that directory to see all the files slate has generated. It might be easiest to open it up into your text editor.

All of Slate’s source theme files are in the root src directory. These are the files we will be editing. Using Slate commands, we compile to the theme into the dist directory. In order for us to be able to upload our themes, we use the build command or zip commands.

Running the following command will compile all of your changes into the dist folder. You'll notice that since this is a new theme there is no dist folder to begin with. This command will also create it.

slate build

We need to zip the files in order to be able to upload the theme to our Shopify store. To do this we simply run:

slate zip

The zipped version of your theme can be found in the upload folder.

To upload the theme, we now go back to the Shopify store admin to online store , scroll down a bit and there's a button to upload theme. Click that and upload the zipped version of the theme. When it's upload, click on actions then publish.

Common Slate Commands

watch this one will come in super handy once we get into a flow working on our theme development. watch will watch for changes in theme files and upload and replace a file when it is changed on our live stores.

deploy will perform a fresh build of your theme and replace any existing files with a complete new set of your theme files on the server.

migrate will convert an existing Shopify theme to work with Slate (make sure you have a copy of your exisitng theme before running this command as it will alter the file structure).

theme will generate a new blank Slate theme scaffold.

Configuring Slate

To configure Slate we will first need to create a private app for our store and then set up a config file in our theme. The steps are outlined below:

1. Set Up a Private Application - In the Shopify Admin navigate to Apps and click Private Apps and then make a new Private App.
2. Name your new app ( I like to call it slate for reference)
3. Update the default permissions for your private app. Automatically these will be set to No Access or Read Access. I like to switch them to read / write for all available categories.
4. Once the Private App is successfully created you will be given all of the information you will need to authenticate your local slate config against your online store.
5. Create the Config File - Next we are going to add a config file to your local theme folder. In the root folder of your theme create a new file called config.yml. Once the file is saved include the following:

development:
  password: [password_from_your_private_app]
  theme_id: live
  store: [your_store_name].myshopify.com
  ignore_files:

where the password is the password from your private app and the store is the domain for your dev store without the https://. We are also going to set the theme_id to live to indicate that we are editing the published theme on the store. You could equally set the id for an individual theme that can be found at the end of the url when you are editing that theme. Test it out - Still in the root directory of your theme run slate start This command will run a build, deploy, and watch.This will also open up a browser with Browsersync running, likely on http://localhost:3000. If your store is still password protected, you will be directed to the password page for the store. You can access the store and theme by entering in the password found in the Admin panel under online store > preferences.

Try making a change to one of your theme files. We will go over the file structure of a basic Shopify theme a little later, but for now under Layout open theme.liquid and add a string of of text right below the opening body tag. Checkout your store in the browser and make sure your test string shows up. Now you should be all ready to get started with local Shopify development, no need to venture into the world of the online editor again 🙌