/ shopify

Lets Build a Shopify Theme - Part One

Wire Framing the front page and Getting Started with Slate

Introduction

I'm a bit of a geek. I like comics, maths, science, computers, I'm a web developer by profession. I'm also in to model trains. Let me tell you now that if you want to find a well designed website that belongs to an Australian model railway manufacturer your options are limited. The best two are easily OnTrack Models and Southern Rail Models. Some of the worse examples are Auscision Models and SDS Models.

Another problem that plagues the Australian Model Railway industry is lack of online purchasing. 99% of the time we're still required to print out and send an order form by snail mail. Very few of these companies have moved in to the 21st century and built a website that allows you to purchase, or pre-order a model. This is where I come in.

I'm trying to get better at design and plan on doing this by building things. I've also been meaning to learn Slate, the new theme framework from Shopify. I thought why not combine the two and build a fully customisable Shopify theme that some of these companies could use if they chose to move to Shopify.

Disclaimer

Full disclosure: While I have no professional interest in any of the companies above I consider the owners and employees of several of them good friends. I am not doing this for anything other than personal education and this is purely a learning exercise.

What we'll build

Our theme will have the following features

  • A customisable front page
  • Customisable collection templates
  • Product specific product templates
  • Pre-order functionality
  • Custom Sections such as the Exhibition Diary and Recent Arrivals slideshow.
  • More as we think of it.

Stage 1 - Wire Framing

I've alread designed a wireframe in Sketch of the Desktop Site. (I'll cover responsiveness later on. I know: "Mobile first" but thats not the point of this first post) This will be our basic simplest design that we build to. It doesn't have any colours or specific font choices and everything is subject to change.

Model-Train-Wireframe

As you can see we have a pretty basic header. Site name on the left, navigation in the middle and Cart button on the right with the line item count and total value of the cart.

Our next feature is a Section that will hold the Recent Arrivals slideshow. This will let shop owners inform customers of what the latest products to arrive are. Or it could be swapped out for a Coming Soon collection or any other collection.

Below the slide show are two sections side by side "Exhibition Diary" and "Recent Blog Posts". The best way for an australian model railway company to get face time with their customer base is to attend model railway shows. We'll build a section that allows shop owners to add different shows to the diary by using blocks. They'll be able to add or delete as many exhibitions as they want however the section will only show the first 3 or 4 "coming up" events.
The recent blog posts section is pretty straight forward. This is where the most recent news items that the store owner writes will go. They can use the blog to inform their customers of upcoming releases or any delays at the factory.

The final section (for now) before the footer that we'll show people is the featured collections (or products). Shop owners will be able to show up to 4 featured products (if they're on sale or running low on stock for example). Pretty basic section should be fun to build.

The final bit of course is the footer. We'll put copyright information in there and create a link list to put in the footer for customers to easily get aorund the store.

About Slate

Slate is Shopify's latest and greatest theme framework. It was announced in April at Shopify Unite 2017 and released a month later. It's extremely modular and an incredible step up from Timber, their previous framework. It includes modularised SCSS and JavaScript files for easy customisation and it includes markup for the new Sections that help super charge any theme they're added to.

For me personally the best part is that it starts with the bare minumum and I mean the bare minimum. This is what we start with when we deploy a fresh out of the box slate theme.

localhost-3000--_fd-0

It doesn't look like much and that's because it's not. A blank page with no styling and nothing else. The only SCSS the theme includes are breakpoints, reset, normalize and a few helpful mixins. It's about as unopinionated as you can get. You can change just about anything about a theme before even starting to build it. This obviously isn't everything there is to Slate but as we go on I'm sure we'll learn more and more about the framework and what it can do.

Have a read through the Slate help files on how to install and setup Slate. If you're already familiar with npm or yarn then you should be good to go getting it setup. Create a throw away theme on your dev store and use that as the theme ID for your empty slate theme.

Conclusion

This is of course a pretty basic design and I'm we'll make small tweaks over time as we develop the theme. In the next post we'll wireframe the product and collection pages and start adding some colour and style to our theme. Then we'll move on to building the markup for our theme starting with the homepage.

I'm hoping to put out these posts every other day but they'll obviously take some time to write and edit while I'm doing the work required.

Until next time,
Allan.