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
Many Shopify apps, particularly ones that add functionality to your public facing store, use external JavaScript and CSS 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.
- To bring you many of the advanced ecommerce features that Shopify boasts, Shopify relies heavily on its own slate of “external” CSS and JavaScript files, which are hosted on its optimized servers and use advanced techniques to optimize load times.
- Further, all Shopify themes have at least one “external” CSS file and a handful of JavaScript files. These files are typically stored on Shopify’s optimized servers.
- 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.
Causing Shopify theme conflicts
External JavaScript and CSS can also conflict or “compete” with other JavaScript or CSS files needed by either the Shopify platform or your Shopify theme. This can cause elements to not appear as intended or cause features to “break.”
- JavaScript conflicts are some of the most common reasons for features breaking on Shopify stores and typically will be best troubleshooted by the app developer.
- 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.
- Facebook, Google and other advertising networks’ conversion tracking typically add at least one JavaScript file each.
- Social media “like” or “share” buttons often require an external JavaScript file and a connected CSS file to be loaded.
- Even Google Analytics requires loading an external file. In addition, Shopify’s built in tracking tools that help generate the reports you see in your admin also add JavaScript 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
While we’re discussing page speed, it’s also worth reviewing image files since these, much like CSS and JavaScript, are “external” files that need to be loaded and ultimately affect loading time.
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.
