Update: I have since changed the way I develop my Shopify themes. Check my other blog post about using Themekit.

Motivation

As I begin to work on more and more web development projects, I find that Shopify is usually preferred for e-commerce. Many great websites I know use Shopify, and one great example I can think of is Nomad Goods. As I was editing themes for my clients, I find it a problem for not fully understanding how Liquid works. For example, I wrote inline CSS styles into the things I wanted to change and over time, it was really messy to manage. I know exactly how to add or edit the theme using CSS but I didn't have the time and motivation to actually understand how one particular theme works.

As a result, I promised my client to re-design their Shopify storefront using a custom app or theme, which led me to writing this post.

Current design

Choosing Slater

Customising with Storefront API

My first go-to option for customising my client's e-commerce was to use my favourite tool of choice: Vue.js. I went straight into setting up a private app in Shopify to get the API key for Storefront API and went straight into initialising a project with Nuxt.js and testing out the Buy SDK for Javascript. It took me about a few days to get used to the query syntax, and I managed to get most of the queries and mutations to work. And by most, I mean the most important ones. When I thought that I had all the queries and mutations I needed to make the custom website, I began to see things I couldn’t retrieve.

My client had a slider for showing the latest promotions and this used a theme customisation interface in Shopify to add the images and links. This was not exposed to the Storefront API in any way. So the only workaround for me was to create a separate admin site which will manage this slider. I figured that this was too much work for such a simple project. Another thing that I couldn't get was adding an email to the mailing list. On top of all these, I have no idea if I could even get their Shopify apps to run on my system.

As a result, I began to consider creating a custom theme instead.

Slate by Shopify

When I was researching on the various ways to start customising themes for Shopify, I stumbled upon Slate. The first thing I saw was the news on the discontinuation of Slate by Shopify and that wasn't very uplifting. Since this tool was deprecated, I figured I would find other means to ease my theme development.

Sections Architecture

Slate pointed to a new tool by Shopify called the Sections Architecture. After reading around, I realised that they were encouraging Shopify Partners to create a developer preview store in order to try this beta feature. After much digging around, Shopify website stated, "You can't transfer ownership of a development store that has a developer preview enabled." (link) That was a real bummer. If I were to use this new tool, I can't deploy it even if I manage to learn it. So what was the point of this?

Slater

After some intensive Googling, I stumbled upon yet another tool that is still maintained by a company (although I saw that it may actually be just a single person). Reading the GitHub inspired some confidence in building a theme with tools that I'm familiar with:

Asset pipeline via Webpack, Babel, PostCSS/SASS
Built-in deployment tool
Live reloading

These features seem good enough for me to live with and I decided to go ahead with this.

Getting Started with Slater

Having come this far, I'm well aware of how undocumented the entire Shopify API is. You will find guides that are somewhat what you're looking for but not exactly what you want. At this point, I'm not even complaining about the lack of documentation for Slater since this is apparently the norm here. This motivated me to write this post to guide other web-developers like myself who are new to developing for the Shopify platform.

Project Setup

To continue with Slater, you will need to install Slater's CLI. For the latest way to do so, head over to their website. What I did was the following:

npm i slater -g on your terminal/command prompt to install Slater.
slate init <root> with root being the path to the folder of your choice.
yarn or npm install to install the dependencies on the root folder of your project.

Once your folder is populated, you will need to configure slater.config.js to include some Shopify settings. Since we do not have any theme now, we can use Slater's default theme to upload into your Shopify storefront. So our next step is to simply build this theme first by using the following command:

yarn build

Once the build has completed, you can find the theme in /build. Zip up the folders in /build and upload this zip as a theme into your storefront. Once uploaded, click customise and note the numbers in the URL ".../admin/themes/79148023921/editor".

Going back to slater.config.js, configure the file with the following:

id: Use the numbers you have noted above
password: See this guide. After creating the private app, grab the Admin API password for this. Also, be sure to allow Theme templates and theme assets to "Read and write".
store: Grab your Shopify store link. For my client, it was in the format store-name.myshopify.com instead of shopify.com

Now that you have everything configured correctly, let's do a sync by using the command yarn deploy:development. If everything works without an error, you're ready to start developing using Slater!

Configuring Live Reload

Type yarn start to watch for any update in your local folder. Note the URL for your theme preview
Go to https://localhost:4000 instead of port 3000 to access Slater. Once you get past the insecure HTTPS warning, you should see slater running
Open up the link using the URL you noted in step 1. You should see a SSL certificate warning on your browser omnibox. This shows that live reload is working.
Edit any file in your project folder and it'll auto reload the tab with your theme link. Neat!