How to Make a Shopify Theme from Scratch
When creating or reskinning a Shopify store, there are a few ways give your online business a new look.
Store owners typically grab paid or free themes from the Shopify marketplace and apply them to their store for a quick change. Alternatively, some adventurous types opt to build a theme on their own starting from nothing in order to have the most control of the appearance and functionality of their store.
During the early stages of getting your business online, there are a lot of business decisions to make. In this article, we’ll look at the options to make a Shopify theme from scratch that matches your creative and business goals.
What is a theme?
Themes are a plug-and-play solution developed to make it easier to customize your website. Shopify has developed a marketplace where both premium and free pre-built themes give store owners a library of visually stunning themes that make short work of getting a store up and running.
The main benefit to pre-built themes, especially for a new store, is the ability to get up and running quickly. The marketplace gives you the opportunity to take a store from conception to complete launch in hours (or less) as opposed to weeks/months if you’re building a completely custom eCommerce store.
There’s also the benefit of keeping costs low since you’re not paying a developer or sinking a lot of your own time into line-by-line customization. Since they’re typically a one-click install with minimal adjustments to settings and flexible branding options, you can personalize a theme rapidly to give your store a unique look.
But there are also some reasons why you might not want to use a pre-built theme, such as:
- Limited scalability designed for non-technical users
- Limited customization
- Designed for aesthetics and not necessarily for conversions
The alternative to these pre-built themes is to create a custom theme for your Shopify store.
Why create your own Shopify theme?
It’s a reasonable expectation that your store will grow and expand. A custom Shopify theme gives you a lot more control over scalability and the freedom to change more as needed.
You’re also creating a more memorable and easy-to-recognize brand experience when you’re not using a theme that’s been licensed by hundreds (or thousands) of other online retailers. Most importantly, you have the most control over the layout of every page and element on your store. For conversion-minded store owners you’ll have the freedom to implement and test the placement of content and elements to see the impact they have on the customer’s shopping and checkout experience.
The downside of custom Shopify themes
While the benefits of a custom Shopify theme are substantial there’s still downsides with crafting a theme from scratch.
First, anything that’s built custom and made just for you is likely going to be a larger investment either in dollars and cents through a developer or in time by doing the work yourself. If you’re lucky, you might be able to team with someone willing to work with sweat equity.
The traditional approach to building a Shopify theme from scratch also has a longer build time. A pre-built Shopify theme can be installed with a few clicks, but coding a theme means a lot more time devoted to communication, design approvals, the design process, testing, and implementation.
The traditional approach
What makes a custom theme so costly and time-consuming?
Think of the store you want to create like a vehicle. The platform is a blank car rolling on the line with minimal accessories. It’ll go, but it ain't much to look at.
When creating a theme from scratch you’re singlehandedly retooling the body of the car and applying the finished paint coat while reworking the entire interior, placement of accessories, and how everything works. And that’s probably oversimplifying it to a great degree. It’s a daunting experience. Even if you’re familiar with some design language like HTML and PHP you’ll still have to roll up your sleeves and prepare to learn some new things. Specifically, because Shopify uses its own language, Liquid, for creating templates and themes.
Liquid is an open source language created by Shopify that was written using Ruby. This custom language is the backbone of all Shopify themes and it’s used to load dynamic content onto storefronts.
Liquid acts like short code as a bridge between the data that’s stored for your store and the code in your customer’s browser. Much of the functionality for an eCommerce store is already built into Shopify. You just need to learn the language for altering how the content is displayed. You’ll still be working with CSS and such so there’s some traditional site design elements you may be familiar with.
This language isn’t just used by Shopify. Since it’s open source the language has been adopted by a number of major brands like SalesForce, Desk.com, Zendesk, Adobe, Mailblast and more. Theme templates for Shopify contain a number of files with a “.liquid” extension. Liquid files are just HTML files that contain embedded code. That embedded code is what allows you to manipulate the output dynamically and include logic in your pages without having to write a ton of back-end code on your own. Here’s an example from Sitepoint on how Liquid is used:
Mark Dunkley of Shopify curates an up-to-date Liquid cheat sheet for those creating their own Shopify themes.
The simple approach to a custom Shopify theme
There’s a lot involved when writing your own Shopify themes. On top of learning the ins and outs of Liquid you need to put time into trial and error as you work on your own store in the sandbox.
If you need a site up fast and you’re facing a looming launch deadline then coding a Shopify theme from scratch might not be possible. But that doesn’t mean you have to settle for a pre-built theme. You can still make a Shopify theme from scratch using other tools that give you plenty of control over the layout and flow of your store. Here’s what you’ll need to do that.
Create a plan of attack
Before you can start building, you need a plan for your online store.
This is more than just the color scheme and placement of your logo. Your store layout should be based more on the ideal flow of customers from where the enter to the point where they leave. Hopefully, that’s the checkout. That ideal flow is your funnel. It’s similar to the way retail stores are carefully plotted to move customers toward the register.
When creating a plan for your store, consider the placement of your elements like steps in a journey. Think about:
- Where they enter the store (which page)
- What they’ll be looking for
- Where they click to get the first step
- Where they’ll click to get to the next step
- Where secondary elements/links will be placed (blogs, return policies, related items, testimonials, etc.)
Your plan for page layout should take into considering conversion best practices that create an enjoyable shopping experience while minimizing friction. It doesn’t need to be super technical – it can be little more than a line drawing depicting the layout of your website before decoration is added. This approach to a plan brings together site mapping and building a wireframe to help you decide how your store will be laid out.
Use a drag and drop page builder
Here’s where Shogun steps in to save you from having to deal with Liquid and coding the individual pages.
In a traditional approach the site designs are handed over to development in order to code the pages. Those pages then go through testing and QA in a sandbox and live environment before eventually being approved and published.
With a drag and drop page builder you eliminate the development process as well as the separate specking and outlining. Shogun allows you to go in, make the entire page and shift elements as you go, allowing you to basically do quality assurance in real-time.
When you’re happy with the template you’ve created you can begin using that layout for the rest of your eCommerce store. This is huge if you want to build a Shopify theme from scratch because you can design every page visually, without any coding, and the pages you create plug right into your eCommerce platform just like any of themes in the Shopify marketplace.
If you’ve used any kind of drag-and-drop program, even Word, then you’ll be comfortable using Shogun. Any of the elements you need throughout your store can be easily added to any landing page.
The benefits of this approach are ideal for anyone who needs to get a store launched quickly or reskin an online store without sacrificing control:
- You’re not forced into a theme with page layouts that don’t fit your vision
- Individual landing pages can be launched faster than your competitors
- Get promotional content up fast
- Reduce the cost of changes since you don’t need a developer for every store update
- Fully scalable and room for customization with custom elements
- Drag and drop snippets for reusable elements to save more time
The key pages to create for your Shopify theme
Shopify lets you create pages of all types when you’re setting up a store, and Shogun allows for unlimited page creation when you’re working with the platform.
While your store will likely differ from others in the content and products you’re selling you’ll still have standard pages that are crucial to running a successful store. You’ll want to focus on building eye-catching and easy-to-navigate layouts for the following pages:
This is a must for any storefront and it’s typically where most of your customers will land.
Since 38% of consumers will bounce from a site if they find the layout unattractive, you want to get your homepage right. When designing the homepage layout, make sure you include key aspects like:
- A clear value proposition that explains your product and how you’ll solve the customers’ problems
- Simple navigation so your customers can easily find what they need
- Contact info to make it easy for customers to reach you
- High-quality images that are engaging and improve the shopping experience
- Calls to action that direct the customers attention to the next step in your funnel
Each landing page will be different but designing your base template helps you plan a consistent layout that maintains your branding no matter what you do with your landing page. Elements to keep in mind when designing your landing page include:
- The placement of hero, product and other images
- Testimonials and other trust signals
- Stock levels and sales countdowns that create urgency and scarcity
- A focused, single call to action
- Simplified navigation and minimal links to make it harder for customers to leave the page
Every page on your site is essentially a landing page so separate from your product and collection pages you’ll want to consider the design and layout for pages like:
- About us or company page
- Contact us
- Return policy
- Promotional pages
There’s no concrete way to layout and design product pages for the perfect shopping experience. With that said, it’s important to design product pages in a way that fits the overall feel of your store, conveys all the necessary product information, answers customers questions, and make it easy for them to shop. Elements to include on your product pages include:
- Optimized product titles
- A short product description covering the key benefits
- A longer and more detailed product description
- Placement for product images
- Placement for videos (product videos or user generated content)
- Customer testimonials/reviews
- Product tabs if necessary (specs, sizing charts, shipping information, etc.)
- Call to action for purchasing products and adding to cart.
Scrolling through an endless stream of products creates a lot of friction that will make customers shop elsewhere. Collection pages simplify the shopping experience and make it easy to browse products based on things like brands, customer interests, seasonal products, and more. Really it comes down to whatever collections make sense for your products as well as the type of keywords your customers are using when they search for your products online.
If you haven’t considered a blog for your eCommerce store you should add it to your strategy and develop a layout for it, even if it won’t come until later. Blogging is a terrific way to grow the audience to your store when you consider the reduced cost of content marketing.
Instead of paying for ad campaigns that only produce results while running, blogs stay live forever and continue to help acquire new customers and increase engagement with existing customers long after they’re posted.
It can be helpful to look at some popular blogs to see what kind of content and elements are included in blog pages but here are a few to keep in mind:
- Individual blog posts
- A space for promotional call outs or featured items
- A button or callout for opt-ins like a newsletter signup
- Social links for your brands social media pages
- Blocks for popular, related, and recent posts
- Blog navigation including categories and topics.
Pre-built pages from the Shopify marketplace are without a doubt the easiest way to get your store online fast with an attractive design, but they sometimes fall short of meeting the vision you might have for your store.
Instead of committing a considerable amount of time to learning Liquid you can instead create a Shopify theme from scratch using a simple drag and drop builder like Shogun. Once you’ve designed the theme for each of the page types listed above it becomes incredibly easy to further customize and maintain any online store.