No tutorial next week!
Hello! Just a heads up that I’m going back to Japanland next week, so I won’t be posting Part 7 next Monday.
I’ll be heading to Fukuoka, Japan for a cousin’s wedding, then heading to Osaka, Kyoto, and a bit of Tokyo. I excite!
- tetchi
Shopify Theme from Scratch Part 6: cart.liquid
The cart page is where a list of all the products that a customer has added to the cart is displayed. Usually the products are displayed in a tabular format.
Let’s get started!
Shopify Theme from Scratch Part 5: product.liquid
The product page is where you see the details of an individual product. This includes the product images, options, descriptions, and more.
This part is a doozie, so grab a Red Bull™ and let’s do it up!
Shopify Theme from Scratch Part 4: page.liquid and 404.liquid
Today we’re going to be setting up our page.liquid and 404.liquid pages. The page.liquid template is responsible for loading the contents of the pages your create in the Pages section of the admin, and the 404.liquid template loads an error page for when a customer attempts to go to a page that does not exist.
Shopify Theme from Scratch Part 3: collection.liquid
The collection page is where you see a handful of products in a collection at once. This part is actually going to be a breeze thanks to all the hard work we did in Part 2. 
Let’s rock and/or roll!
Shopify Theme from Scratch Part 2: index.liquid
The index.liquid template loads the contents of the very first page that the customer sees when they enter the URL of your shop.
Away we go!
Shopify Theme from Scratch Part 1: theme.liquid
The first thing we want to do is set up our theme.liquid file. The theme.liquid file is the heart of our theme – it is required to load all of the other templates in the theme. All elements of a theme that should appear on every page of your shop should reside in theme.liquid. This includes the navigation, logo, search bar, cart link, as well as any calls for stylesheets or scripts.
This first part is a big one, so go grab a coffee, do some stretches, and let’s get going!
Shopify Theme from Scratch: The Setup
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!
Shopify Theme from Scratch
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. The Git repo for the theme can be found here if you’d like to keep an eye on it or download its zip file.
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: collection listings
- Part 11: customer accounts
- Part 12: customer accounts continued
- Part 13: theme settings
- Part 14: final tweaks and embellishments
Should you have any comments or questions about this series, please feel free to leave a comment below!
Cheers \(^0^)/
-tetchi
Bunny Rabbit
Today I decided to draw a rabbit. I think I’m going to replace the Tetchi dog on the site, as it doesn’t look too good in smaller sizes.
Sketch:
