Although Shopify apps are a great way to add functionality to your Shopify theme, it’s also important to understand that many apps can cause conflicts with certain themes or even the Shopify platform itself.
We’ve talked before about how using too many apps can be problematic, but what exactly is it about certain apps that makes them cause issues with your Shopify theme and store?
To be clear — we're not trying to discourage you from using apps that truly impact your business. However, we are trying to explain what can cause conflicts so you can make smart decisions based on that.
External Shopify theme files
While this approach is often necessary to add the needed features, these files can cause issues for a variety of reasons.
First, and perhaps most importantly, is that every external file used in your shop adds to the time it takes to fully load a page with all functionality or design elements required.
The external files that Shopify and your Shopify theme use are essential to how your store looks and functions — whereas app external files are designed, by definition, to extend functionality.
Because most apps store their files on third party servers, the user’s browser must therefore send a request to another server, in addition to Shopify’s servers. The time is minimal, but it can add up fast.
This is especially true if these servers aren't optimized for fast loading times — which can cause your site to become sluggish.
In most cases, the more functionality an app adds, the larger these external files will be; and larger files (even “minimized” ones) are more likely to add to page load time.
The end result is a slow Shopify store.
In fact, in many cases of users reporting slow Shopify stores, most of the page load time is due to app files, images and theme files.
CSS, meanwhile, relies heavily on what’s known as specificity or “priority” of what code is applied to a specific element to make it look a certain way, and it's relatively easy for a style added by an app or third party integration to inadvertently change the way things look.
Even a simple app that appears to do something fairly simple can add a surprisingly amount to load times.
For example, an app may only make a small change in the appearance to your store — such as adding a badge or button, for example, but it’s also important to consider what happens when the user clicks that element (maybe it triggers a popup, adds dynamic variant options or subscription functionality).
This added functionality can require more code than might be obvious at first glance.
It’s also worth noting that even if you install multiple apps with external files that are relatively small, the overall load time adds up quickly.
There are also other important elements that many Shopify stores use, which may not be considered full blown "apps,” but which nevertheless link to external files.
Apps can also conflict with these types of files.
Shopify app conflicts
Also keep in mind that, while most app developers have solid programming backgrounds and thoroughly test their app in as many scenarios as possible, there are always some that can slip through:
App developers may not have anticipated or tested every condition, variation or theme, which can cause design issues or broken functionality.
It’s also possible that if your store has unique needs, design or functionality, an app can add complexity that needs troubleshooting to resolve issues.
Each layer added by an app adds another area that needs to be troubleshooted by the app developer to resolve conflicts with the theme files.
Images in Shopify themes
Since most stores require relatively high quality imagery and theme files are needed to make your store look the way it does, you can look at the time it takes to load these resources as a “good investment” for running your store — much like brick and mortar stores need electricity to operate.
Images on the web only need to be 72 dpi (rather than the higher 300 dpi required for print, for example) so they can usually easily be kept well under one megabyte.
Image compression (via a free app or settings in your photo editing software) can also help decrease image size and therefore help reduce image load times.
In addition, image files in the latest Out of the Sandbox Shopify themes are loaded using "lazy loading" or asynchronous techniques, which mean the shopper can still interact with the page before it's fully loaded.
By contrast, often all of the files an app needs will need to be fully loaded before that feature can be used.
Michael P. Hill
Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.