An In-Depth Look Into Designing a Shopify Theme

Committing to build a Shopify Theme is quite the endeavor. It can quickly become a long-term project that demands hard work, dedication, and an openness to change. And with thousands of merchants visiting the Shopify Theme Store each month to discover the perfect look for their store, it can be a lucrative avenue for any designer or developer to pursue. The challenge is how to stand out in a crowd.

Learn more about Shopify Theme development and using Shopify metafields to build great themes for your clients. And to help spruce up your proposals, check out our list of funny lorem ipsum generators.

To give you an idea of what it takes to design, develop, and publish a Shopify Theme, we sat down with Giraffic Themes to chat about their experience building the newest addition to the Shopify Theme Store: Label.

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

Who is Giraffic Themes?

Based out of Melbourne, Australia, Giraffic Themes is the brainchild of front-end developer and designer William Rainbird.

Rainbird started Giraffic Themes five years ago, when the majority of his work was focused on template design for Tumblr.

“Theme design really just started as a side project,” he says. “I was already doing front-end work for a software company but wanted to start earning some passive income.” His side project really started to see success when he concentrated his efforts on building templates for an oft-overlooked audience: creators.

When Will was still working with Tumblr, he noticed there weren’t many templates catering to specific professions like musicians, photographers, chefs, and publishers. Most offered little to no additional functionality outside of the core template pages, which wouldn’t suffice for his niche audience who often needed unique technical requirements embedded into their websites. Thus he began designing templates with built-in integrations for music players, social media feeds, and calendar capabilities.

Despite the success Rainbird has seen on Tumblr over the past few years, he became hungry for a project that would challenge his technical skill. He began working for the cosmetic brand, and 2014-2015 Ecommerce Design Awards winner, Frank Body as their lead developer where he was first exposed to Shopify. This new role allowed him to quickly become familiar with the platform and that was when the idea for the Label Shopify Theme was born.

Label: A minimal Shopify Theme for creators

Label is a Shopify Theme designed for musicians, publishers, and creators of all shapes and sizes. Its focus on simplicity makes it a great solution for merchants who offer a small number of products, but it can also be adapted for those with larger product lines and collections.

But despite its smooth appearance, Rainbird admits there’s more to the theme than meets the eye.

“Even though it looks simple, it definitely took me a few weeks and plenty of late evenings to get things perfect,” he says. “I was working full-time at Frank Body, and Label was something that I was doing outside of my 9 to 5.”

That dedication to perfection is apparent in Label’s design. The theme’s minimalistic layout not only establishes an elegant and clean interface, but also helps drive user focus towards products and calls-to-action.

“I noticed that most templates targeting musicians and creators on other platforms were overloaded with information,” says Rainbird. “I decided to strip Label down to focus on the core ecommerce elements, which I think resulted in a much more refined user experience.”

At its core, Label is all about the homepage, which features up to nine customizable modules. Merchants have the ability to include a Single Product Feature to highlight their best-selling or newest product for customers who arrive onsite. It also incorporates a few unique functionalities typically used by creative merchants, including an embedded Instagram integration as well as a calendar feature to showcase tour dates or events.

Label’s simple structure also translates exceptionally well to mobile. The stacked layout and prominent product imagery feels seamless on a mobile device, and customers can easily add products to their cart straight from the homepage with only two taps. This eliminates the hassle of navigating too deeply into the website for users who shop on phones or tablets.Like most Shopify Themes, Label comes in three distinct styles: Rainbird has named his Record, Create, and Publish. Each style features a unique style and tone that makes Label extremely functional for a variety of brands.

“Development was a lot more complicated than design since each style is so different from one another,” he explained, “but by keeping things simple I was able to circumvent a lot of those challenges early on, and the styles really stand on their own.”

Let’s take a look at Label’s three distinct styles.

Record

Record was the first style Rainbird designed for Label. The look and feel was largely inspired by his previous work on Tumblr, but without all the bells and whistles. By focusing the design around one core product and a few secondary pieces of information, Record was built for a specific audience: musicians and record labels.

Create

Rainbird found inspiration for Create from his friend’s cap business. With its emphasis on multiple products, the design is reminiscent of the typical apparel brand site. In its original state, Create is designed for low inventory or single product stores, but it can be adapted to accommodate stores with much larger product collections.

Publish

The initial idea for the Publish style was to build something that catered to the needs of small publishers or digital good retailers — a segment Rainbird noticed was underserved in the Shopify Theme Store. Its minimal style features a prominent Product Feature Image as well as a video integration functionality.

You might also like: An Introduction to Theme Options

Giraffic Themes’ advice for first-time theme developers

A unique set of challenges emerged when Giraffic Themes transitioned from Tumblr to Shopify theme development. Designing for ecommerce requires an increased focus on technical functionality and usability when compared to content-based sites alone.

There were many lessons learned when building out Label. Here are Giraffic Themes’ top three pieces of advice for first-time Shopify Theme developers.

1. Discover market gaps

When Giraffic Themes launched, Rainbird knew that his success would be tied to his ability to identify and solve problems.

“Before you even start prototyping an idea, you should look at the market and identify clear gaps,” he says. “Research is a major part of my design process.”

If you’re thinking of designing a new theme for Shopify, start by conducting some preliminary research into the current Theme Store offerings. Try to identify what’s already listed and what’s missing — this could be a specific niche audience or industry, a certain product type or inventory size, or just a cutting-edge design layout. Then use that inspiration to build something that looks, feels, and functions differently than anything else currently available.

We’ve put together a Theme Brief Template to help ensure you’ve identified an appropriate market gap before beginning your design work.

2. Build for flexibility and adaptability

It’s rare to find a merchant who purchases a theme and uses it as-is. Most want to tweak some parts, remove others, and ultimately make it their own.

“Building for flexibility within a template is a tough problem to tackle,” says Rainbird, “You need to consider that people are going to want to alter what you’ve built once they’ve installed it.”

For ecommerce templates, Rainbird suggests focusing on product presentation and accessibility over other more niche features. Try to keep things simple by reducing theme settings and limiting options. Not only will this reduce the potential for performance issues, but it can help you build a theme that is flexible and user-friendly.

He also suggests designing and developing your theme concurrently. This may allow you to identify usability issues in your theme during the design process, rather than after. Adopting an iterative approach ensures you know that what you’re building will work smoothly for merchants wanting to alter or remove anything when applying the theme to their store.

3. Design for the user and the merchant

Rainbird’s biggest piece of advice is to ensure your design is as accessible for the merchant as it is for their customers.

“At first I kind of focused on Label’s design solely from the user’s perspective,” he says. “But I quickly learned that it’s just as important, if not more, for a theme to be easily used by the store owner, and that meant keeping things simple.”

This insight radically shaped the direction of Label, which was originally conceived with nearly 400 theme options. The developer was faced with a lot of hard decisions about what to include and what to remove, but by stripping out most of the additional functionality, Label ended up becoming much cleaner and easier to use for both the user and the merchant.

When you’re working on your own theme, try to put yourself in the merchant’s shoes. Think about how they are going to use the theme and identify what’s going to make their life easier or more difficult. Remember: creative and unique features are only useful when they don’t get in the way, so try to cut out the clutter from your theme design.

Looking to build your first Shopify Theme?

Are you thinking about building a Shopify Theme for the Theme Store? Check out our list of Essential Tips for Building Your First Shopify Theme and get started on the right track!

What have you learned building Shopify Themes? Share your insights below!

You might also like: 4 Theme Features Every Client Will Ask For