tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch: The Setup

Shopify Theme from Scratch – 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.


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.

partners page

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 ;)

theme upload

Click the button here to upload the zip file

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.

product page

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.

bulk add

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

theme editor

The Shopify Theme Editor is frikkin sweet. Created by the awesome and strikingly handsome meeech

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

template editor

You can keep it straight OG and just use 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.


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

← Back to table of contents


  • Alexander the Great Magician
    Alexander the Great Magician on April 9th, 2013

    So just for clarification when you say “keep it straight OG” you’re referring to the Original Guru, right??

    Nice post, can’t wait for the whole series.

  • tetchi
    tetchi on April 9th, 2013

    Haha, that’s exactly it! :)

  • ryan
    ryan on May 18th, 2015

    There is no snippet folder on the basic theme I upload?.. :/

  • Mike
    Mike on October 23rd, 2015

    Great tutorial. I got a bit hung up on offline theme editing – the tool you linked to may be deprecated? (https://github.com/davidmurdoch/shopify-theme-sync) Ended up using the official shopify-theme gem (https://github.com/Shopify/shopify_theme). Works great, and now I can edit my themes from Sublime Text in Linux!

Post a comment