What Are Some Better Ways To Troubleshoot A Custom Shopify Theme From The Theme Editor?

There have been a lot of questions on how to troubleshoot better custom Shopify theme issues than just using the theme editor in the backend. Most of us aren’t technical people, and sometimes tech support can lead you in circles when it comes down to troubleshooting a responsive issue. 

If you’re just getting started with Shopify or are looking for a quick fix to your theme’s code, the Theme Editor is a great place to start. You can make small changes to your theme in the online code editor or upload files directly to the server.

However, for most sites, the Theme Editor isn’t intended as a long-term solution. With the theme editor, you can only see the changes you’ve made. If you have added a lot of customizations to your theme, it might be difficult to figure out what is causing an issue with the design of your store. 

The biggest problem with using the Theme Editor is that you can’t version control your code. When Shopify Plus developers look at your theme, it’s also more difficult for them to find and identify problems in your code without some sort of version control system (VCS).

Shopify theme editor can be really helpful to do basic stuff like customizing CSS and adding JavaScript snippets. Still, it can be very difficult to troubleshoot when it comes to more complex issues.

If you’re not familiar with version control systems, they allow you to track and modify your site’s code changes easily. Each time you make a change, you can commit that change back into the baseline code. If there is an error, you can roll back changes until you find one that fixes it. So let me show you some alternative things to do that most people miss out on when trying to figure out why their shop won’t work.

Use the browser inspector.

One of the most useful tools you have at your disposal is your browser’s HTML inspector tool. Using this tool means that you don’t have to search through the CSS to find where a style is coming from; it tells you instantly. Here’s how to open it:

• In Firefox go to Tools > Web Developer > Inspector.
• In Chrome go to View > Developer > Developer Tools (or ⌘⌥i).
• In Safari, go to Develop > Show Web Inspector.

The Inspector and its many features also allow you to edit a page in real-time (without making any permanent changes), seeing what code change might fix an issue on the spot, which can be incredibly useful when working with complicated layouts and stylesheets. Let’s look at some of the main ways we use the Inspector when troubleshooting CSS issues.

Check for missing fonts and images.

• If you don’t have a file path, start from the root of your website and make a new image that is not registered.
• Check if your image is public.
• Make sure your image has a resized public version. A public version of an image can be viewed or downloaded without creating a private copy (and without affecting the original).

Verify Javascript is loading properly.

“I wish this theme worked,” you grumble to your cell phone. You’ve had reservations about using a theme editor before, but now you’ve reached the point of desperation, and you have no choice.

You’ve tried to work through some of the issues before and found that you were getting weird results—unexpected features, missing scripts, and styles, and even whole pages are reacting strangely without any traceable cause.

“Let’s check all these things one more time,” you say as you fire up your browser.

Check your theme modules and scripts are loading.

• The first thing you should do when troubleshooting a custom theme is to make sure that it includes all the right theme modules and script files it needs.
• Take a quick look through your theme’s javascript folder for any scripts that haven’t been properly loaded in your code.
• Make sure the correct version of jQuery is being used in your Shopify store, and check to see if other third-party scripts are loading correctly.
• While this might not be the root cause of the problem, it can help you eliminate some potential issues, so you don’t waste any time on them later on down the road.

Isolate the problem by reducing custom code.

It is important to ensure that your store’s custom code doesn’t cause any problems you’re experiencing. To do this:

• Remove any custom modifications you’ve made to the theme by removing or commenting on the code in your theme editor or through FTP.
• Test your theme to see if the problem still exists. If it does, then the problem is within your theme and not in your customizations.
• Check through all of the files in your Theme Editor to find where the issue may be hiding and fix it there!

Remove unused templates, stylesheets, and assets.

Whether you built the theme yourself or purchased it from a third-party developer, it’s important to ensure that you’re not loading any unnecessary files. A good place to start is by combing through your theme. Liquid file and check each line for non-essential markup. Next, check your sections folder to see if there are any unused section templates. Then do the same thing with your snippets folder, checking each snippet (especially if they contain styles) for relevance to your store.

Lastly, make sure that there are no other codes in your assets folder (like Javascript files). Once you’ve removed everything unused, check all of the remaining stylesheets and images to ensure they’re necessary and utilized somewhere on the site.

Check your theme settings overrides haven’t changed.

From the Shopify admin, go to Online Store > Themes.

• Click the theme you want to edit and then click Customize.
• From the bottom of the theme, the editor clicks Theme settings and then clicks Theme settings again from the new panel that appears on the left side of your screen.
• Locate any theme setting overrides by selecting Edit HTML/CSS from the left-side menu of your Theme editor.
• In your layout folder, locate and open the theme. liquid located in Sections > header or into any other section where you have added a code snippet that contains a reference to a theme setting override (e.g., {{ settings[variable] }}.5

Make sure your stylesheet has been uploaded correctly.

• In your browser inspector, verify the CSS file has been loaded by the Shopify theme.
• If you can’t see that the stylesheet has been loaded, check that your stylesheet is named “styles.CSS.liquid,” and it’s in the correct folder (the “assets” folder).
• If both of those are correct, your file may be corrupted or broken somehow, so double-check that too!

Review your code against CSS best practices.

Have you reviewed your code against CSS best practices? Is there a closing tag somewhere, or are you missing a closing curly brace? Are there missing quotations, semi-colons, colons, commas, parentheses, or spaces? All these things can cause your theme not to work. If you’ve checked all of the above and still can’t figure out what’s wrong with your code, it may be time for the second set of eyes.

Make sure Liquid isn’t causing problems.

• The Liquid is a templating language that Shopify uses in its themes. It’s used to create dynamic content that is displayed on your website. Liquid can be used to insert dynamic content on the page, and it can also be used for logic.
• There are two types of tags that are commonly used in Shopify:
• Output tags: Output tags are used to output content stored in the database, such as product titles and descriptions or customer information like first names. The default “Hello World” text shown above is an example; it simply outputs whatever text you have defined as the page title.
• Logic tags: Logic tags allow you to control what information you want to be displayed on a page depending upon certain conditions being met. For example, you might use logic to display a call-to-action button only if the customer isn’t logged in or only show a certain image if the user has reached a certain point in the checkout process.

Conclusion

You can use Chrome Developer Tools or Firebug to troubleshoot your theme. The theme editor doesn’t allow you to see what’s happening in your code, only how it’s displayed in the browser. With DevTools or Firebug, you can see what your styles are doing to the page. If something isn’t displaying correctly, you can see exactly why.

If you can’t get past this point and your store is not loading properly, the easiest thing to try would be to contact a designer who has experience modding Shopify themes simply. By paying upfront or in the form of a monthly retainer fee, they will check out your theme to see where the problem lies. It can be quite costly to go this route, though. Hopefully, after reading this post, you now have some ideas on how to troubleshoot using nothing but the Theme Editor and Google Chrome’s Developer Tools. This is usually enough information to narrow it down most of the time.

If you don’t have time to implement the above process on your own, then you can also hire a Shopify Plus agency.