March 28, 2024

Intro Guide to Design Theme for Shopify

Webmasters and business owners alike have been steadily gravitating towards Shopify. It’s a fantastic system packed with all the features you would expect from an eCommerce shop. With Shopify’s growing popularity there are hundreds of new & upcoming shop owners who need custom themes built using the Shopify theming engine.

I’ll be covering a series of guides delving into detail about the Shopify engine and how it works. For this post I want to start with the basics of theme design, including the most popular features and how they should be implemented. Shopify is a large topic with plenty of ground to cover – so take your time studying theme design and have some fun with it!

Getting Started

Each major CMS has its own structure for theming. It just so happens that Shopify uses a version of the Liquid template language. This language is mixed into the HTML code much like you’d expect with Ruby or PHP. It behaves like a middleman so the backend language isn’t able to be directly compromised through code errors.

Since not everybody yearns the cruel process of learning how to code, Shopify has two distinct methods of theme development. First is a more basic customization menu where the administrator can update colors, fonts, page styles, and other common elements. But to perform any serious customization you’ll need to edit the HTML code which is contained inside the Liquid template files.

shopify partners website homepage

If you’re interested in the more generic customization style take a look over the customization docs. Those pages cover everything from the dashboard custom edits all the way through basics of HTML.

For this post and the next series of posts I’ll be placing a direct focus on theming Shopify manually with HTML/CSS. This is a powerful skillset because it allows you to create a plain HTML5 layout and convert it into a fully-functional Shopify website. Although Shopify is very different from WordPress or ZenCart, they all share a familiar development process.

Custom Dev Environment

First I’d like to mention how and where you should be creating individual Shopify themes. Regular shop owners must pay to have access to common store features, but developers can setup a free partner account which offers an unlimited number of dev stores.

shopify dev environment doc

These dev shops behave like individual sandboxes for custom theme design. All of the HTML/CSS theme data can be stored remotely or saved locally to your computer. Plus dev shops allow for a fake checkout process to see how the interface would behave during a real purchase.

One thing to note is that Shopify themes can only be edited & tested via the Internet. So you might be able to code HTML/CSS locally, but you cannot view those changes until they’ve been updated remotely. Shopify has its own internal page editor with syntax highlighting and all sorts of great features.

ide editor shopify browser ui

But for Mac users there is a free desktop editor available from the Shopify App Store. Granted there are plenty of alternative options, but it’s worth understanding all of the choices out there.

Personally I would suggest getting started with the web editor. If you’re brand new to the Shopify platform it’ll take some practice accommodating to all the features. By editing within the browser you’ll be able to code from any computer and mess around with a few different themes at once.

Primary Features

Anyone looking to skim a quick overview of features should check out the Shopify eCommerce features page. Each section is broken down into a category like SEO, shopping cart, hosting or analytics. Shopify is a huge benefit to anyone looking for a self-hosted platform without a lot of technical mumbo-jumbo.

But designing a theme brings these features into the forefront. It’s one thing to understand which features are available, but it’s another thing to build those features into a working theme. Much like WordPress or any other system it’s easiest to learn through example.

On the templates documentation page you’ll find a long list of each individual theme file. They use the filetype .liquid since each file is rendered using the Liquid templating language. You’ll quickly notice there are a lot of different templates such as blog.liquid, search.liquid, and gift_card.liquid.

skeleton theme shopify open source

To really learn about these files you’ll want to dissect existing themes and study their ever-so-intriguing intestines. Each Shopify dev shop comes with an existing theme to pick apart, but there are other examples like the free Skeleton theme on GitHub. To learn how features are implemented you’ll want to study existing code samples. This will introduce the Liquid engine while simultaneously exposing the underbelly of a completed Shopify website.

Shopify Theming Engine

I’ll be delving into much greater detail about the Shopify engine in a future post. Since this is an introductory guide I just want to outline the basics of theming and how a Shopify theme directory should be organized.

There are six primary folders in each theme: assets, config, layout, locale, snippets, and templates. The config folder just has a configuration file and locale is meant for translation files. Assets will contain all of the theme’s external resources like images, stylesheets, and/or JavaScript. Easy stuff so far.

The big split is between layouts, snippets, and templates. Working from smallest-to-largest, you’ll place tiny blocks of reusable code into the snippets directory. These behave like any type of code snippet, from a signup box to a piece of JavaScript. For whatever reason you can split these up into separate files for easier code management.

Each theme requires a set of templates which render the individual page content. These break down into all the common pages from cart checkout to 404. The templates primarily contain body content and are thus loaded into bigger theme files called layouts. The layouts folder contains one central file named theme.liquid. Think of this like a WordPress index.php file which includes header and footer content on every page.

themes liquid shopify templating code open source

Shopify uses a seemingly complicated system if you’re unfamiliar with custom theming. But once you get a grip on the concepts it should be a breeze to understand. The engine is powered on their server and requires no hands-on updating or technical edits. As a designer you are only responsible for what you do best – designing & building a kick-ass web shop theme.

Closing

Each individual eCommerce platform has its own strengths and weaknesses. Shopify is known for its lightning-fast hosting and wide array of features. The product also has fantastic customer support which really leaves design & development up to the webmaster.

This introductory guide should offer a demystifying view into the study of Shopify theming. If you’re not as knowledgeable about web development these techniques will seem daunting. However I believe it’s worth understanding at least the basics so that more detailed work is easily comprehensible. Internalize these precepts as fervently as possible and be sure to look out for upcoming Shopify guides in the future.

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

Leave a Reply

Your email address will not be published. Required fields are marked *