Why it’s critical to distinguish between Shopify theme and customization issues – and how to resolve them
Shopify theme and customization issues. The key distinctions between popular Shopify and theme-related words that often cause store owners to become perplexed are clarified.
The distinctions between these two are critical to grasp as you dive into your Shopify theme and begin changing the appearance and feel of your business — only to run into “problems” along the way.
Theme Issues
Compatibility with HTML, CSS, or JavaScript code is perhaps the most prevalent form of Shopify theme and customization issues. These issues are frequently related to how your Shopify theme’s design and layout appear in different browsers, operating systems, and devices. For example, your menu might look good on Chrome, but when viewed in Opera or Edge, it has all kinds of odd gaps and padding.
If you run across this problem, the easiest approach to get it resolved by the theme creator is to give them as much information as possible, such as what browser, operating system, or device the problem occurs on, and what steps they’ll need to do to duplicate the situation. The theme developer may now troubleshoot the problem and, after the flaw has been identified and fixed, release a fix.
Best outcome: your site has great opportunity for improvement, we optimize your performance so you don’t have to worry, and you earn more happy customers.
OR
You leave the call with a better understanding of your store’s metrics and exactly where you can improve.
Either way, it’s a great deal for you!
Theme customization options are typically the source of other common theme difficulties. The “Customize theme” menu, accessible from the Themes section of your store’s admin, comes with a default set of choices for all Shopify themes.
You may modify many features of the theme, such as colors, fonts, and sizing, as well as more complex options like inputting text, defining URLs or menus, and turning certain options on and off, from this area.
The customize theme panels are designed to give store keepers a way to control more advanced features of their Shopify theme without needing to write code.
If you find, however, that a setting under these panels isn’t taking effect properly or causing another issue, then most likely this is a theme issue that can, just like an HTML, CSS or JavaScript bug, be fixed by the theme developer.
Behind the scenes, Shopify theme customization settings are stored in a special file in your theme. Every time you make a change through one of the customization panels, the change is updated in this file automatically.
These settings, in turn, feed into the Liquid files that make up your Shopify theme and change how and what is displayed to your shoppers.
However, it’s important to note that changing theme settings only changes the theme settings file — no other core theme files are ever touched. This is one of the essential differences between Shopify theme and customization issues.
Customization Issues
Shopify theme customization issues, on the other hand, do involve code modifications to additional theme files beyond the theme settings file.
For example, many third party apps require store owners to directly modify the shop’s theme files such as the product.liquid or theme.liquid file, whether it’s adding a bit of code to it or modifying it in some other way.
The same applies for customizations to change the look and feel of your Shopify theme, such as adding a custom font or removing or altering some built-in theme styling for a page element, like the shape of a button or underline on page titles, for example These types of changes typically require updating CSS files.
Customization issues also extend to adding or changing features of the theme to work better for a particular store or situation, and are usually changes to the code that the merchant has done themselves or hired someone else to do
Unlike theme issues (which may stem from legitimate bugs in the original theme code) customization issues are typically very difficult for theme developers to troubleshoot and repair for several key reasons:
- The theme developer didn’t write the new code so they aren’t familiar with the structure of the code, what it’s supposed to do and how it does that.
- The customizations can conflict with the existing code.
- The new code hasn’t been fully tested.
- Any new code also hasn’t been tested with the existing code.
- Customization issues generally go beyond the base feature set of the theme, so they are considered “add ons” or “extras” and not native to the original theme
Because of this, theme developers typically aren’t required to provide support for customization issues as part of their theme support offerings. Remember that Shopify themes are designed to provide a pre-defined list of features, design and layout components — and not any specialized or custom shop functionality.
In many cases, the Shopify theme developer might be able to help point you in the right direction or advise you on where the best place for further assistance might be, including whether to call in an expert or not.
That said, the best way to avoid customization issues is to keep Shopify theme modifications and use of apps to an absolute minimum.
So if you’re contemplating reaching out to your theme developer for support with an issue, first try to identify if it seems to be a true problem with the original theme or if the issue may have cropped up because of modifications you made to the code yourself or apps you’ve recently installed.
If you really do suspect it’s a problem stemming from the original theme, check to see if the developer maintains a list of “known issues” in support documentation before contacting them. A reputable developer will correct any theme issue or bug as quickly as possible after it’s brought to their attention and provide you with a fix.
If it’s more likely a customization issue caused by theme file modifications, here are some alternative ways you can try to troubleshoot it on your own:
- Revert the changes you’ve made one by one to help identify what is causing the issue.
- Disable any 3rd-party apps one by one to see which might be causing an issue.
- Check with the app developer for any apps you’ve installed and see if the issue you’re experiencing already has a known solution.
- Evaluate if adding apps, adding features or performing other customizations is even necessary.
Book a free 30-minute video call with one of our Shopify performance experts where we’ll discuss your web performance and possible optimization solutions
Best outcome: your site has great opportunity for improvement, we optimize your performance so you don’t have to worry, and you earn more happy customers.
OR
You leave the call with a better understanding of your store’s metrics and exactly where you can improve.
Either way, it’s a great deal for you!
Shopify themes editor issues
A redirect code could exist in your Shopify theme or appear when you install an app on your Shopify store. It might cause unexpected redirects to URLs that aren’t connected to your Shopify store.
To disable the redirects, make sure to replace “window.location.href =” with “window.parent.location.href =” in the JavaScript code of your theme. Or else, you can use a reference to the window.Shopify.designMode variable in JavaScript.
Your Shopify site can be unable to load due to network connection issues or invalid Liquid code in your Shopify theme, especially during peak traffic periods.
Once you found the problems, you should navigate to the “Preview Theme” section in the “Theme Actions” of the theme editor to easily look for the errors and fix them, or contact Shopify support for help with your storefront.
- HTML error found
If your theme code includes a syntax error, you might see an “HTML error found” warning message in the editor.
Fortunately, you can easily solve the issue by examining the code in the Liquid file that is referenced in the error message. For instance, if there appears a message: “Broken HTML has been detected in your theme’s the.liquid file.
Check that there are no missing or extra HTML tags present”, you should press on the “the.liquid” that links directly to the incorrect file and you can fix it right off the bat.
I hope this post highlighed the many Shopify theme and customization errors that can arise and how to troubleshoot where the issue lies.