Shopify Theme from Scratch
Shopify Theme from Scratch – learn how to make your very own Shopify theme!
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.
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
- The Setup
- Part 1: theme.liquid
- Part 2: index.liquid
- Part 3: collection.liquid
- Part 4: page.liquid and 404.liquid
- Part 5: product.liquid
- Part 6: cart.liquid
- Part 7: blog.liquid
- Part 8: article.liquid
- Part 9: search.liquid
- Part 10: list-collections.liquid
- Part 11: Customer Accounts – The Setup
- Part 12: Customer Accounts 1/2
- Part 13: Customer Accounts 2/2
- Part 14: Theme Settings 1/2
- Part 15: Theme Settings 2/2
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 :)
35 Comments
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.
Hey Paul, AFAIK it doesn’t affect load times all that much. I can check with the devs for a definite answer though!
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.
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. :)
This is radical and you are radical.
@Kevin oh you… stahp it
Excellent, many thanks for this!!
thanks for reading Ricky!!
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!!!
Thanks so much for reading Jessica! I’m happy to hear it’s been helpful for you! :)
You are awesome!!!
Thanks a lot for these wonderful tutorials.
Hey thanks Rahul :D !!!
Dude! Thank you so much! It’s super fun to build this site and you write very well. You’re truly awesome
@Christo oh shucks, thanks so much for the kind words! Glad you like the tutorials!
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?
@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!
Thanks for great tutorials. These are helping me a lot :)
Cheers Abdus – thanks for reading :)
Superb work Tets!
@Gaurav thanks buddy! :D
How do I make add to cart?
This is the most comprehensive tutorial I’ve seen to date! Well done Tets. Start working on the print version next ;)
LOL Mark :D
A print version would be frikkin sweet for sure! Would absolutely love to get on that
You should do a tutorial about how to make a Groupon like website
Any plans for that?
Cheers
@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.
Awesome! Thank you so much!
This tutorisl is great.
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.
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!
Nice! Thank you for sharing this wonderful tutorial.
Amazingly perfect guide for newbies and even masters.
Thanks for the help :)
I am following this tutorial to develop a theme but unable to show the sliders and i have three sliders in the homepage
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.
The Basic theme gives a simple navigation menu how can I make it a drop-down menu can anyone please help me.
You have written an excellent article! This article contains a lot of important information. Thanks so much for sharing this kind of informative article.