Update: I have since changed the way I develop my Shopify themes. Check my other blog post about using Themekit.
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.
Customising with Storefront API
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.
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?
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.
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 -gon your terminal/command prompt to install Slater.
slate init <root>with root being the path to the folder of your choice.
npm installto 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:
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
yarn startto watch for any update in your local folder. Note the URL for your theme preview
- Go to
https://localhost:4000instead of port 3000 to access Slater. Once you get past the insecure HTTPS warning, you should see
- 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!
Thanks for reading! I wrote this blog as a way to remember and I hope it can be useful to you too.