Shopify

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. While it may not seem like it, getting the design and flow of your store right is a challenging process and includes some tough calls. The look and feel of your store does impact your bottom line and can have a profound influence on first impressions and conversions. 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 of 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 develop 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. While the speed to launch may be appealing there are some limitations to pre-built themes including themes and categories that don’t always work for niche businesses. Sometimes, an attractive theme that’s the perfect fit aesthetically lacks the functionality and flow you envision. Ultimately, going the inexpensive and easy route has its downsides:

  • Forgettable branding with designs shared by other stores
  • 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 aint much to look ati. 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.

Understanding Liquid

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. Liquid 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 (what 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.

Moz uses this ecommerce mockup as an example of elements to optimize on a product page.

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 as you go. 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 you’re 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:

Homepage

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

Landing Page

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

Product Page

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

Collection Page

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.

Collection pages can be easily created and customized in just a few simple steps using the Shogun editor.


Blog Page

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

Conclusion

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.

Still have questions about Shogun?

Get in touch with us and we’ll put you on the right track towards making unique, fully customizable storefronts.

Contact Us

Name

Email Address

Company

Message

What platform do you use?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.