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