4 Essential Tips for Building Your First Shopify Theme

4 Essential Tips for Building Your First Shopify Theme

Shopify Theme Development

Every month, thousands of merchants flock to the Shopify Theme Store to find the perfect look for their online shop. Considering many of our themes are created by Shopify Partners, this presents a unique opportunity for any freelance web designer or developer looking to earn some residual income outside of dedicated website builds.

Unfortunately, getting started on your first Shopify theme can be a daunting experience. Finding the time to get familiar with a new platform is never easy — especially when you’re busy building your own freelance design empire. With that in mind, we’ve compiled this brief list of essential resources for the beginner looking to build their first Shopify theme.

You might also like: 10 Top Questions About Developing Shopify Themes Answered

1. Spend some time with Liquid

Whether you are customizing a merchant’s existing theme or building one from scratch, you’ll need to be comfortable using Shopify’s open source template language, Liquid. We promise you it's easier than you imagine.

Liquid is a highly readable and expressive Ruby-based language that powers all Shopify themes. As a template language, it acts as an intermediary between the content in a Shopify store and the HTML rendered in a user’s browser. More technically, Liquid uses placeholder constructs to access a given store’s data (say product title or price) and output that relevant data directly into a template.

This concept might seem foreign if you’re new to templating languages, but luckily there are tons of great resources to help you get started with Liquid. Here are a few bookmark-worthy ones:

  • Shopify’s Liquid Reference Documentation — A complete and comprehensive reference to Liquid that covers Liquid basics and shows you how to use tags, objects, filters, and more.
  • The Liquid Cheat Sheet — A simple and detailed cheat sheet for Liquid markup. This page includes examples of most Liquid syntactical elements and descriptions of their purpose.
  • Shopify Theme Template Documentation — The go-to resource for learning the ins and outs of building Shopify themes, including detailed breakdowns of typical Liquid template files used as the basis for most Shopify themes.
  • Getting Started with Liquid — A simple, introductory walkthrough of Liquid by Shopify Developer Advocate Keir Whitaker that, focuses on its key features and benefits.
  • Shopify Design Tutorials — 24 easy-to-follow video tutorials on working with Liquid and designing Shopify themes.
  • 11 Easy to Learn Tips for Liquid — A collection of 11 essential tips for Liquid from existing Shopify Partners.

2. Leverage the Timber theme framework

A great way to speed up your theme development is by using Shopify’s open source theme framework, Timber. Essentially, Timber acts as a bare-bones theme template that designers or developers of any level can use as a starting point when learning Liquid. It comes ready to roll with everything you’d need to build your first theme, including a wide range of templates, snippets, and code that you can copy and modify in your own projects.

By removing backend integration from the mix, Timber simplifies the theme building process so you can spend your crucial design and development time on what users will actually interact with on the front-end.

Here are a few useful tools to help you use Timber when building Shopify themes:

  • Shopify Theme Gem — A custom command line tool that allows you to manage and edit theme files locally on your computer.
  • Desktop Theme Editor — A Mac OS theme editor that lets you sync your local theme files with a Shopify store’s theme. Perfect for those who aren’t comfortable with command line and prefer a more appealing interface.
  • Theme Kit — A single binary, cross-platform tool for building Shopify Themes. If you are starting a new theme and want to have some sane defaults, Theme Kit will create your theme based on Timber and update your configuration file directly on your computer.
  • Twigs for Timber — A collection of useful assets for building Shopify themes with Timber created by Shopify Partner Cam Gould.

You might also like: How to Optimize Themes for Performance

3. Familiarize yourself with the theme review process

Only a small percentage of submitted themes end up being published in the Theme Store. To ensure your precious hours aren’t wasted, you should familiarize yourself with the guidelines and review process for the Shopify Theme Store before committing yourself to your theme design.

In a nut shell, theme submissions are assessed predominantly on aesthetics, layout, and attention to detail. When submitting your theme for review, ensure you include the following:

  1. Mockup designs for the desktop layout of your theme’s homepage, collection, and product pages (3 total).
  2. Mockup designs for the mobile layout of your theme’s homepage and product pages (2 total).
  3. A rationale for your design choices.
  4. A link to your portfolio website.

If your proposed designs make it through the rounds of approval, you are free to start coding your theme. Use the following resources to ensure your theme meets all necessary requirements to be listed in the Theme Store:

4. Get creative with your design

While not a technical requirement, this may be the single most important piece of advice to consider when building a Shopify Theme. Considering the volume of themes submitted on a regular basis, one of the biggest requirements to be accepted into the Theme Store is ensuring that your design offers something new that existing themes do not.

Start by taking a look at the existing themes and try to identify any gaps you think exist. Your innovative theme design could fill a need that isn’t being met for niche industry merchants, specific product types or inventory sizes, or just integrate a cutting-edge layout style. Whatever you choose as your inspiration, be sure that your theme looks, feels, and functions differently than existing themes.  

These tips and resources will help you on your way to becoming a Liquid expert making money on Shopify's platform. Get creative and start building!

You might also like: An In-Depth Look Into Designing a Shopify Theme

About the Author

Simon is a coffee lover, former agency digital strategist, and Shopify Partners' Growth Marketing Manager. When he isn’t hustling at the Shopify HQ, you can most likely find him dining at restaurants across the city or brushing up on the latest design trends.

Grow your business with the Shopify Partner Program

Learn more