Tetchi x Wordpress

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

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

Soumya

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.

sudhershab

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.

sandhya mohapatra

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

Umer Prince

December 11th, 2016

Amazingly perfect guide for newbies and even masters.

Thanks for the help ๐Ÿ™‚

Ramon

March 24th, 2015

Nice! Thank you for sharing this wonderful tutorial.

Toby Powell

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!

Masud

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.

Petur Petursson

January 4th, 2014

This tutorisl is great.

Max

December 4th, 2013

Awesome! Thank you so much!

tetchi

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.

Shawn

September 18th, 2013

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

Any plans for that?

Cheers

tetchi

September 18th, 2013

LOL Mark ๐Ÿ˜€

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

Mark Dunkley

September 18th, 2013

This is the most comprehensive tutorial I’ve seen to date! Well done Tets. Start working on the print version next ๐Ÿ˜‰

Mark Dunkley

September 18th, 2013

How do I make add to cart?

tetchi

September 17th, 2013

@Gaurav thanks buddy! ๐Ÿ˜€

Gaurav

September 17th, 2013

Superb work Tets!

tetchi

August 14th, 2013

Cheers Abdus – thanks for reading ๐Ÿ™‚

Abdus

August 14th, 2013

Thanks for great tutorials. These are helping me a lot ๐Ÿ™‚

tetchi

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!

Shawn

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

June 22nd, 2013

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

Christo

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

June 6th, 2013

Hey thanks Rahul ๐Ÿ˜€ !!!

Rahul

June 6th, 2013

You are awesome!!!

Thanks a lot for these wonderful tutorials.

tetchi

June 5th, 2013

Thanks so much for reading Jessica! I’m happy to hear it’s been helpful for you! ๐Ÿ™‚

Jessica

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

May 22nd, 2013

thanks for reading Ricky!!

Ricky

May 20th, 2013

Excellent, many thanks for this!!

tetchi

April 12th, 2013

@Kevin oh you… stahp it

Kevin

April 12th, 2013

This is radical and you are radical.

tetchi

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. ๐Ÿ™‚

Paul

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

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

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.