tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch

Shopify Theme from Scratch – learn how to make your very own Shopify theme!


stfs_banner

Over the next few weeks I’m going to be releasing a series of tutorials on how to make a Shopify theme from scratch. I will be walking you through how to make a super-basic theme to give you a basic understanding of how Shopify themes and Liquid work.

You can take a look at the demo of the basic theme here.

I will be updating the Table of Contents below as the new parts are released, so feel free to bookmark this page :). My goal is to finish one part every week.

basic theme

Basic theme! (Design subject to some changes as each part is completed)

Pre-requisites

  • Some understanding of HTML/CSS – although I’ll be doing my best to keep everything as basic as possible.
  • A Shopify store that you can upload a theme to. More info on this in the next step.
  • A steady internet connection.

Table of Contents

Should you have any comments or questions about this series, please feel free to leave a comment below!

Cheers (^0^)/

-tetchi

UPDATE: I’ve closed the comments for this tutorial series now, as I won’t be able to get back to questions here. A lot has changed with Shopify theme development since I wrote this series – I recommend checking out official Shopify documentation for more up-to-date guides :)

34 Comments

  • Paul
    Paul on April 8th, 2013

    This maybe outside the realm of what you’re doing here, but I’ve been wondering, does it slow your shop down or effect load times in any significant way if you go very modular or DRY with a theme?

    For example I’ve got a theme I’m working on and most any bit of Liquid I find I’m repeating more than once I pull and make into a snippet and just use include.

  • tetchi
    tetchi on April 8th, 2013

    Hey Paul, AFAIK it doesn’t affect load times all that much. I can check with the devs for a definite answer though!

  • Paul
    Paul on April 10th, 2013

    So to clarify, I hope, what I was saying on Twitter is that when I started using Liquid I thought of it more or less as a simple templating language. I knew from reviewing the Shopify Resources page that there was logic and variable capabilities built, but the way I tend to learn is by absorbing what I need in that moment for a specific task and I think all I was able to “see” was if/then statements and loops. Which I mean with your average theme you could get away with using just that.

    I’ve since come to realize after looking through some themes that you can do things with Liquid that you might otherwise rely on javascript or to accomplish.

    SO, getting to the point, what I’d like to see for a tutorial would be more “cool” real work examples of using Liquids logic and variables. Maybe even a short one off of something that made you go, “Awesome! I didn’t know I could do that with Liquid.” I’ve had that experience myself, more than once.

  • tetchi
    tetchi on April 10th, 2013

    Oh! Well, I do kind of do that on this blog: https://www.tetchi.ca/category/tutorial/. Whenever I have a “oh snap, you can do that?” moment, I write about it here. Most of them involve a combination of Liquid and jQuery. For example:

    https://www.tetchi.ca/shopify-tutorial-captions-for-blog-article-and-pages/
    https://www.tetchi.ca/shopify-tutorial-limiting-storefront-search-to-certain-product-types/
    https://www.tetchi.ca/shopify-tutorial-how-to-create-a-part-picker-form/

    … to name a few. :)

  • Kevin
    Kevin on April 12th, 2013

    This is radical and you are radical.

  • tetchi
    tetchi on April 12th, 2013

    @Kevin oh you… stahp it

  • Ricky
    Ricky on May 20th, 2013

    Excellent, many thanks for this!!

  • tetchi
    tetchi on May 22nd, 2013

    thanks for reading Ricky!!

  • Jessica
    Jessica on June 5th, 2013

    Just have to say thank you for posting these tutorials. It’s been extremely helpful to see things being built step-by-step with easy to understand explanations. Will be following along as you add the remaining tutorials! Thank you!!!

  • tetchi
    tetchi on June 5th, 2013

    Thanks so much for reading Jessica! I’m happy to hear it’s been helpful for you! :)

  • Rahul
    Rahul on June 6th, 2013

    You are awesome!!!

    Thanks a lot for these wonderful tutorials.

  • tetchi
    tetchi on June 6th, 2013

    Hey thanks Rahul :D !!!

  • Christo
    Christo on June 22nd, 2013

    Dude! Thank you so much! It’s super fun to build this site and you write very well. You’re truly awesome

  • tetchi
    tetchi on June 22nd, 2013

    @Christo oh shucks, thanks so much for the kind words! Glad you like the tutorials!

  • Shawn
    Shawn on July 3rd, 2013

    Hi tetchi

    Your Tutorials are great.

    Is there any chance you can do a tutorial on how to integrate Jquery UIs and plugin with Shopify?

  • tetchi
    tetchi on July 3rd, 2013

    @Shawn Thanks! I was actually thinking of doing a tutorial that uses jQuery UI to drag and drop products to the cart, but I don’t think I’ll be able to work on it until I’m finished this tutorial series unfortunately!

  • Abdus
    Abdus on August 14th, 2013

    Thanks for great tutorials. These are helping me a lot :)

  • tetchi
    tetchi on August 14th, 2013

    Cheers Abdus – thanks for reading :)

  • Gaurav
    Gaurav on September 17th, 2013

    Superb work Tets!

  • tetchi
    tetchi on September 17th, 2013

    @Gaurav thanks buddy! :D

  • Mark Dunkley
    Mark Dunkley on September 18th, 2013

    How do I make add to cart?

  • Mark Dunkley
    Mark Dunkley on September 18th, 2013

    This is the most comprehensive tutorial I’ve seen to date! Well done Tets. Start working on the print version next ;)

  • tetchi
    tetchi on September 18th, 2013

    LOL Mark :D

    A print version would be frikkin sweet for sure! Would absolutely love to get on that

  • Shawn
    Shawn on September 18th, 2013

    You should do a tutorial about how to make a Groupon like website

    Any plans for that?

    Cheers

  • tetchi
    tetchi on September 18th, 2013

    @Shawn Not really, no. Shopify wasn’t really built for that kind of system, so I don’t think I’ll be working on a tutorial for that any time soon.

  • Max
    Max on December 4th, 2013

    Awesome! Thank you so much!

  • Petur Petursson
    Petur Petursson on January 4th, 2014

    This tutorisl is great.

  • Masud
    Masud on March 4th, 2014

    Awesome tutorial!!!!! Helped me a lot. I haven’t enough words to thank you buddy :). Will be waiting for more tutorials. Do you have any plans to write tutorials on PSD to Shopify and HTML to Shopify conversion? Will be waiting for your next series on Shopify.

  • Toby Powell
    Toby Powell on April 2nd, 2014

    Fantastic tutorials! thanks for creating these! I’m new to shopify and all excited, these tutorials are just what the web doctor ordered! great stuff!

  • Ramon
    Ramon on March 24th, 2015

    Nice! Thank you for sharing this wonderful tutorial.

  • Umer Prince
    Umer Prince on December 11th, 2016

    Amazingly perfect guide for newbies and even masters.

    Thanks for the help :)

  • sandhya mohapatra
    sandhya mohapatra on November 17th, 2017

    I am following this tutorial to develop a theme but unable to show the sliders and i have three sliders in the homepage

  • sudhershab
    sudhershab on June 7th, 2018

    How to run this liquid code in an editor lets says ATOM, I just tried the basic theme from scratch but I don’t know how to execute that in ATOM. Do you have any idea or else can I use any other editor and let me know how to execute it.

  • Soumya
    Soumya on March 4th, 2019

    The Basic theme gives a simple navigation menu how can I make it a drop-down menu can anyone please help me.

Post a comment