The do's and don'ts of customizing your Shopify theme

Even with a shiny new Shopify theme and a handful of apps, your store might be lacking something. From font size to footer styling adjustments, hover animation to header transmigration (okay, that last one is made up), customizing your Shopify theme can be the extra step needed to outshine your competition.

Customizations range in complexity. Some can be applied by anyone with enough time and patience, while most require a skilled professional. You’ll want to be careful and do your research before diving into the code. A wrong move can have serious implications and create a ripple effect that causes problems for your store.

In this post, we’ll go over some approaches, safeguards, and pitfalls of customizing your Shopify theme. By the end, you should have a clear idea of what it takes to make those much-desired modifications and decide if you’re comfortable making them yourself.

Do: Make backups of your Shopify theme on a regular basis

Your Shopify admin holds a maximum of 20 themes at once, but this capacity is often left unused by merchants. It's a common misconception that having more than the one published theme can be burdensome to a store’s page load speed.

While page speed is an important concern, having extra themes and theme duplicates in your store does not inhibit loading or contribute to issues with customer experience. In fact, maintaining a habit of duplicating your theme before making changes (ie. adding a new app, modifying CSS, etc.) can ease troubleshooting if page speed issues occur later on.

You can duplicate your theme by going to Actions > Duplicate

You can also add informative titles to your themes to keep track of backups. The "Rename" feature allows up to 50 characters to provide supplementary information about the theme backup, such as date, version/release, and what customization it precedes.

e.g. Reach v2.0.0 (July/18) before Alt Product Template

That being said, duplicates only really need to be made following significant changes to your theme files. While 20 may sound like a lot of theme versions, it can run out quickly if you're making a duplicate after every font colour adjustment!

Don't: Hire the cheapest, fastest developer to customize your Shopify theme

Freelance development services for Shopify merchants have become quite common, but finding a reliable and skilled developer is tricky.

Our support team has unfortunately heard from too many merchants who have been left high and dry with poor, incomplete customizations. It's important to look for vetted, reputable developers who will provide estimates of timeframe and cost before you give them any money.

If you're thinking of hiring a third-party developer to customize your Shopify theme, you may want to get in touch with your theme developer first. Often, the modification you're looking for is already in the works and will be included in a future release.

If not, theme developers often have preferred development partners who are familiar with their products and can complete a modification more efficiently and reliably than an unknown developer.

Do: Keep track of which files have been changed and update regularly

Every great captain has their logbook, and for good reason.

While keeping a written record of changes made to your theme may sound tedious, boring, or like a waste of time, it can be a hugely valuable resource when you're retracing your steps and trying to find the culprit behind an issue interrupting your sales.

This can be as simple as a document file with dates and notes with the who-what-where-how-when-why summary of a modification. Shared documents, like those available through Google Docs, can be used to track changes when working in teams.

e.g. July 22nd 2018: Katherine edited footer.liquid file to include note about pdf catalog (Sections > footer.liquid > Paragraph tags, Lines 202-206)

Another way to track changes is leaving comments alongside your code changes. In liquid files, CSS, JS, or HTML, you can leave informative notes for yourself and colleagues alongside the changes you make. Depending on the file type, you can add comments by framing text with certain characters so they remain visible only in the back end.

For CSS and JS files, such as the theme.scss.liquid or theme.js.liquid, you can add two forward slashes (//) to the start of the note:

e.g. // Comment goes here

For HTML files, such as the theme.liquid, you can place the text in the following format:

e.g. {% comment %} Comment goes here {% endcomment %} Tip: You can also disable native code snippets by wrapping the code you’d like to remove/conceal by bookending the code with comment codes.

Do: Get familiar with your browser’s developer tools before customizing your Shopify theme

Your web browser has a sort of x-ray vision for how a Shopify storefront is constructed.

By using an inspection tool, anyone can look into the HTML and CSS that compose a webpage. Try to think of HTML as the framing that makes up the central structure of a house. CSS takes care of how it all appears—windows, paint, sconces, etc.

You can use the inspector tool to focus on particular elements in your Shopify theme, then use the codes to make adjustments via your CSS file. In Google Chrome, for example, you can use the inspector tool by right-clicking (control + click on Mac) the area of interest and selecting "Inspect."

Don't: Try to transform a camper van into a catamaran

Shopify themes can sometimes work as foundations for highly customized stores, but every merchant should get a sense of their theme’s makeup and limitations before committing to extensive (and often expensive) modifications.

Each of our premium Shopify themes is specially engineered with specific functionality and built for certain catalog sizes, whether it's mobile-first, single-product-focused, or made for large-catalog, high-volume stores. It can be difficult, expensive, and counter-productive to try something that nullifies their best attributes.

If you have a specific design in mind for your store and can't find a theme to suit your needs, you may want to contact our Services team about building a custom theme. While there is a significant cost difference compared with purchasing a theme, in the long run it might be what takes your business to the next level.