It happens to the best of us: deadlines loom, stress rises, and sometimes we rush our work just to make a client happy. Though this might result in a beautiful custom theme for your client’s new ecommerce business, you’re now left with the pieces — no comments to continue working on custom code, too many nested snippets, and lots of large, complicated lines of Liquid.

Don’t get me wrong, there’s nothing technically wrong with working this way — everyone has their own development style (and some of us may naturally be a little messier than others). However, always keep in mind that when building your themes, they should be created in a way that makes it easier for yourself, other developers, and (especially) your clients to interact with.

That being said, here are a few lessons learned from Shopify theming veterans — Disco’s Gavin Ballard and Shopify’s Carson Shold. Use their advice to enhance your own design process and implement best practices into your theme development regime. We’ll also cover techniques you can use to enhance your overall process, as well as best practices for coding with Liquid, JavaScript, or CSS.

Best practices to improve your design process

1. Add structure to your design process

Adding basic structure to your design process is good for multiple reasons: scalability, usability, and overall productivity. In essence, structure is anything that allows you to develop in a consistent fashion that accommodates growth and change.

Creating structure could be as simple as outlining processes for creating GitHub issues, to developing complete workflows — constantly iterating to become as efficient and effective as possible.

Here are a few examples of how you can easily create structure in your design process:

An easy way to consistently implement this keen eye into your coding process is to separate each element of your theme into a module — any piece of code that you can build aside from any other piece of code. You can add these modules to a spreadsheet, like the one Carson Shold presented at Shopify’s Unite Conference.

First half:

Second half:

Here’s a brief explanation of each column in the sheet:

Module/Template — The various elements of your theme, “details” are the more specific details and objectives of the modules.

Pages — Outlines where the module/template will live on the ecommerce site, once it’s complete.

1, 3, 5, and 8 — Each number represents the amount of time and effort required to finish a specific module. One is a quick win; three requires more time but is still relatively simple; five begins to take more time and is a more complex project; and eight is indeterminate (until more information is acquired to make a decision).

Resources to Grow Your Skills

Get your free copy of the Module Organization Sheet sent directly to your inbox.

Email

By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime.

Our virtual cogs are turning. Please note that it can take upto 15 minutes for our email to reach your inbox.

3. Prototype, prototype, prototype

Before deep-diving into the actual developing of your Shopify Theme, it’s important to prototype. Why? Because you want to be able address issues, and create solutions, early on in your design process. That way you’re not hitting any development roadblocks when you’re nearing the completion of your theme.

Prototyping saves time, resources, and ultimately creates a feedback loop that can only benefit your new Shopify Theme.

Here are a few prototyping tools that you can use:

Sketch ($99) — Sketch is a Mac-specific program that allows you to quickly create wireframes and prototypes. There are a variety of open-source resources available for Sketch.

InVision (Prices vary depending on your plan) — Not only for prototyping, InVision also acts as a project management suite and collaboration tool. Great for freelancers and design agencies alike.

Marvel (Prices vary depending on your plan) — Marvel is browser-based and free to get started. Easily mock-up prototypes and share them with your colleagues. However, only paid versions of the plan allow for collaboration.

If you’d like to learn more about prototyping, visit the Shopify Partner resource below for more information on prototyping tools and which one is best for your next Shopify Theme project.

Another key consideration is performance. Does your code work together cohesively to make a performance-first theme? Are there any scripts that are slow to load that are bogging down the user experience?

5. Hold a design review and bug hunt

Once you’ve completed your build, hold a design review. Part of this review can include allowing a special subset of users (who were not part of the development) access to the theme, with the intention of finding bugs and glitches.

You can even motivate these users to dig through your theme and find this errors, by paying them. For example, Shopify has held bug hunts and paid users $10 per reported error. However, if you’re going to go with this approach, make sure that your theme is as perfect as possible to minimize costs.

If you haven’t, a bug hunt can get really expensive, really fast, and will ultimately lose value as a reliable source for feedback.

Best practices to keep Liquid, JavaScript, and CSS tidy

Now that we’ve gone through some best practices for your overall design process, it’s time to get to the nitty-gritty: tips and tricks for keeping your code simple and clean.

1. Have lots of large, complicated Liquid? Create a new snippet

You’ve probably already included snippets in your theming workflow, but for those who haven’t, here’s a refresher. Similar to “partials” and “includes” common in server-side languages, snippets are .liquid files that contain reusable code — items that are typically on multiple pages of a theme, but not throughout the entire theme itself.

For example, if you’re adding “related products” to each of your product-type pages, you should create a related-products.liquid snippet. That way, you can simplify your coding experience by adding {% include ‘related-products’ %} where applicable — instead of the complicated string of Liquid.

Other common uses for the snippet functionality of Shopify theming include:

5. Extract as much JavaScript as possible and create new JavaScript files

Make use of your theme’s assets directory by creating new JavaScript files for each script you have running on your Shopify Theme. This not only allows you to pull assets from the directory throughout the theme, but will allow browsers to cache the JavaScript instead of reloading it every time someone visits a page on your client’s ecommerce site.

Another JavaScript best practice, according to Gavin, is to write JavaScript defensively — creating Module JavaScript items that don’t depend on each other, but that can work cohesively with each other. This will also help with performance, and mitigate the chances of your code breaking with the implementation of a third-party product.

6. Remove stuff

If your theme has slow-loading components, or components that require a lot of bandwidth, remove them. This will not only improve the performance of your theme, but also the user experience on your client’s ecommerce website.

Need a quick place to start? Lose the JavaScript carousel. Carousels are typically a UX nightmare — users who miss a slide more-often-than-not have a difficult time navigating back to it. JavaScript carousels are also a massive bandwidth-suck and tend to load slowly, so opting to replace your carousel with an image is a more performance-focused, user-friendly decision.

In conclusion

Your design process will likely differ from your colleagues and your competitors, which is completely normal. However, it’s important to establish a workflow that implements best practices so you’re working efficiently, and effectively, to create Shopify Themes that are scalable and sustainable.

If you’re looking to learn more about building Shopify Themes, enroll in Gavin Ballard’s SkillShare course: Advanced Shopify Theme Development. Here, Gavin shares the best practices we shared in this article, as well with other tips and tricks to establish a well-structured theming workflow.

What are some best practices that you use in your development process? Let us know in the comments below!

About the author

Sara Chisholm

When she isn’t trying to wrap her mind around the expansiveness of the universe, you can find Sara catching-up on the latest web design & UX news. Oh, and reality television. She likes that a lot, too.