Streamlining Shopify Theme Development: From Page Structure to Liquid Code

Honestly, the main reason is that I already feel right at home working with the Shopify programming environment.

If you’re active on the forum (http://shopify.com/editions/), you’ll find the latest updates helpful—they make life so much easier for developers. When I’m building themes or add-ons, I don’t even have to worry about making a database mock-up; Shopify sets everything up for me as soon as I start a development store. Compared to other CMS platforms, that’s a huge time-saver.

When creating a theme for any CMS, the first thing I do is look at the default sitemap. Here’s what you can expect from Shopify’s structure:

  • Homepage
  • Collections
  • Collections List
  • Products
  • Gift Card
  • Pages
  • Blogs
  • Blog Posts
  • Search
  • Password
  • 404
  • Cart
  • Checkout & Customer Account
    • Checkout
    • Thank You
    • Order Status
    • Order
    • Profile

I’ve worked with Shopify for quite a while, so I can usually figure out which blocks belong on each page (or which global UI components should show everywhere) without much trouble. If you have any e-commerce experience, it’s pretty easy to decide what goes where.

After that, my next focus is on building the tools I need to turn designs into code that works with the Liquid theme.