4 Essential Tips for Building Your First Shopify Theme

Every month, thousands of merchants flock to the Shopify Theme Store to find the perfect look for their online shop. But not all of them find what they’re looking for—instead, some will want a custom theme, or are migrating from an existing platform. This presents a unique opportunity to add Shopify to the list of services you as a freelance web designer or developer offer.

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. Check them out, and learn more about Shopify Theme Development and using Shopify metafields.

1. Spend time learning 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 it's easier than you imagine.

Liquid is a highly readable and expressive Ruby-based language that powers all Shopify themes. As a templating language, it acts as an intermediary between the content in a Shopify store and the HTML content 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 and building Shopify themes. Here are a few bookmark-worthy ones:

• Shopify Liquid Code Examples—A searchable library of code examples based around theme components that can be added directly into themes, to allow you to build and customize themes faster and more reliably.
• 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 Shopify 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.
• Theme Kit—A single binary, cross-platform tool for building Shopify Themes. If you are starting a new theme or working with an existing one, Shopify Theme Kit will enable you to work locally on your computer and push theme changes to your store.
• 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.
• Shopify Design Tutorials—Though older, this 24-video tutorial series makes working with Liquid and designing Shopify themes very digestible; just be careful become some things have changed (specifically: dropdown menus, Shopify sections, and the how images are rendered).

2. Learn with the Shopify Partner Academy

If you’re looking to understand Shopify and its ecosystem, the Shopify Partner Academy is the right place to do it. To build themes, you need to understand Shopify’s core features and functionality as well as the front end development tools and frameworks. Shopify Partner Academy has several self-study fundamental courses that help you shorten your path to success as a Shopify Partner. To gain access to these free courses, you must sign up for a Shopify Partner account.

Here are some courses you should consider when building Shopify themes:

• Shopify Fundamentals—From storefronts to analytics, become familiar with Shopify’s core features and functionality. Learn how the platform’s benefits set Shopify apart and uncover the vast support network available to partners and merchants.
• Shopify Plus Fundamentals—Learn how Shopify Plus offers a scalable, customizable, and secure solution for high-volume merchants. Discover the many ways partners can help Shopify Plus merchants with migrations, automation, and integrations.
• Design and Theming Fundamentals—Build striking commerce experiences by leveraging Shopify’s front-end development tools and frameworks. Learn the basic of installing, customizing, and developing themes as you familiarize yourself with Liquid, theming APIs, and the Slate framework.

You may also like: Announcing Shopify Partner Academy — A Certification Program to Help You Succeed.

3. Leverage the Slate theme toolkit

Slate v1 is Shopify’s response to the theme community’s demand for modern tooling and a better developer experience. Essentially, Slate acts as a toolkit to help developers produce high quality themes and be more productive. When you begin building with Slate, a new project is scaffolded with Slate’s Starter Theme.

Starter Theme strives to include up-to-date best practices and solutions that we have deemed needed for the majority of themes we build internally at Shopify. It contains all the files the Shopify Themes team considers to be the bare essentials to building a Shopify theme, such as templates and snippets, and standard Liquid tags and logic. There is little to no markup, classes, or other code that you will need to remove. You’ll also notice that there is very little CSS in this theme, and that’s intentional—Starter Theme is not a framework, but rather a starting point for your project.

Here are a few useful links to help you when building with Slate:

• Slate Wiki—A getting started guide, along with definitions and a clear breakdown of all the documentation for Slate. It includes key concepts, definitions, guides, references, and direction on how to contribute to Slate as an open source project.
• V1 of Slate—This is a breakdown of Slate’s amazing features and the decision making and intent behind Slate’s newest release.
• Create your own Slate Starter Theme—A great tutorial that walks through how to build your own starter theme to work with Slate.
• Theme Development Workflow—A helpful analysis of tried-and-true methods, tools, and resources that help speed our development process of building Shopify’s free themes.

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

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. Since merchants have specific requests and functionality they need for their stores, ensure 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 or 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.

A few more resources you might find helpful when building themes:

• A Beginners Guide to Sass with Shopify—A three part guide to Sass with Shopify. Learn the basics of the SCSS syntax and how to work with SCSS and Shopify.
• A Beginner's Git Guide with Shopify—A three chapter guide to Git with Shopify. Understand the benefits of version control, how to get started, and workflow for teams.

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!