Before we get started with the coding, we need to set up a shop, upload some products, and choose what editor we want to use. Let’s get going!

1. Create a Shopify store

The first thing you’ll need is a shop where you can upload your theme to. You need to have a shop for creating themes because you cannot develop Shopify theme offline. You need to upload your theme to a shop in order to view and modify your themes.

If you’ve already got one, perfect; you can move on to Step 2! If not, what you can do is head over to the Shopify Partners page to create a Partners account.

Once you’ve created the account, you can create a dev shop through the “Dev Shops” page. You can create as many shops as you’d like, but one will suffice for now.

2. Upload the starter theme zip file

Download this theme zip file. I’ve created a downloadable zip file that you can upload straight to your shop to speed up the process a bit. Don’t worry though, it’s super barebones, I’ll be staying true to the “from scratch” part of this series ;)

3. Upload test products to your shop

Start off by going to the Products page in your admin, and deleting any products that is there by default.

Download this CSV file and upload it to your shop.

Once the import is complete, select all nine products, and click Bulk Actions > Add to Collection > Frontpage. This will add the products to the default “Frontpage” collection.

4. Choose a Theme Editor

Now, you need something to modify your themes. There are several options, so choose the one that works best for you. In my tutorials I’m going to be using the Shopify Theme Editor app simply because it’s the easiest to set up.

There are several options for modifying themes:

1. Shopify Theme Editor

The first (and my favourite) method is to use Shopify’s Desktop Theme Editor. This free app works by downloading your theme from your shop to your computer, and syncs whatever changes you make to the theme’s files with the copy of the theme that’s on your shop. TLDR: it’s frikkin magic.

The best part about this app is that it lets you use the Text Editor of your choice. Personally I like using Textmate, but you can use any text editor you want (including Dreamweaver!).

Unfortunately, the official Desktop Theme Editor is Mac-only. There is an unofficial release of the Editor that works on other OS’s, but I haven’t tried it out myself. You can download it here.

2. Shopify Admin’s Template Editor

The other option is to use the Template Editor that’s part of the admin. This really requires no setup, you just have to go the Themes > [Theme Name] > Template Editor.

Conclusion

At this point you should be good to go, and be ready to start codin’. On to Part 1!!

← Back to table of contents