Shopify Theme from Scratch

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

30 Responses to “Shopify Theme from Scratch”

  1. 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.

  2. 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!

  3. 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.

  4. tetchi on April 10th, 2013

    Oh! Well, I do kind of do that on this blog: http://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:

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

    … to name a few. :)

  5. Kevin on April 12th, 2013

    This is radical and you are radical.

  6. tetchi on April 11th, 2013

    @Kevin oh you… stahp it

  7. Ricky on May 19th, 2013

    Excellent, many thanks for this!!

  8. tetchi on May 21st, 2013

    thanks for reading Ricky!!

  9. Jessica on June 4th, 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!!!

  10. tetchi on June 5th, 2013

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

  11. Rahul on June 6th, 2013

    You are awesome!!!

    Thanks a lot for these wonderful tutorials.

  12. tetchi on June 6th, 2013

    Hey thanks Rahul :D !!!

  13. 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

  14. tetchi on June 22nd, 2013

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

  15. 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?

  16. 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!

  17. Abdus on August 14th, 2013

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

  18. tetchi on August 14th, 2013

    Cheers Abdus – thanks for reading :)

  19. Gaurav on September 17th, 2013

    Superb work Tets!

  20. tetchi on September 17th, 2013

    @Gaurav thanks buddy! :D

  21. Mark Dunkley on September 17th, 2013

    How do I make add to cart?

  22. Mark Dunkley on September 17th, 2013

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

  23. tetchi on September 17th, 2013

    LOL Mark :D

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

  24. Shawn on September 17th, 2013

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

    Any plans for that?

    Cheers

  25. tetchi on September 17th, 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.

  26. Max on December 4th, 2013

    Awesome! Thank you so much!

  27. Petur Petursson on January 4th, 2014

    This tutorisl is great.

  28. Why web designers should learn how to work with Shopify | Web Work Garage on February 25th, 2014

    [...] you want to get started building Shopify themes, there’s a great tutorial series on tetchi blog (by Tetsuro Takara) that walks you through the entire theme building process from start to [...]

  29. Masud on March 3rd, 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.

  30. 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!

Leave a Reply:




Comment