The technical reasons Shopify apps can cause problems

When you’re actively running a lot of software applications on your PC, it will start to slow down. The same basic principle applies to Shopify Apps. For instance, apps can require time to communicate with Shopify’s API, or can be reliant on communicating with other servers that aren’t as speedy. 

With apps, less is more, and we recommend testing your loading speed with or without an app to determine if it’s a weak link in your loading speed. In researching your apps, you may even find that you have installed apps that you’re no longer using in essence, dead weight.

What is Shopify?

Shopify is a web application that allows you to create your own online store. It provides you with a wide range of ‘themes’ that can be customized to meet your own branding requirements, and allows you to sell either physical or digital products.

A key aim behind Shopify is to let people without coding or design skills build an online store themselves (i.e., without the assistance of a developer). However, people who are familiar with HTML and CSS will be pleased to know that the platform provides access to both.

How does Shopify work?

Shopify is a ‘hosted’ solution. This means that it runs on its own servers and you don’t have to buy web hosting or install software anywhere. You don’t own a copy of the product, but instead pay a monthly fee to use it and so long as you have access to a web browser and the internet, you can manage your store from anywhere.

With Shopify, the key things you need to build and market an online store like templates, a payment processor, a blog and even email marketing tools are provided ‘out of the box.’ That said, you can customize your store to meet more individual requirements through the addition of apps more on these later  or using custom code.

The Shopify app store

In addition to Shopify’s core functionality, there is also an app store which store owners can visit to obtain apps both free and paid that add new features.

This contains a huge number of apps (over 4,000) more than any other e-commerce platform that I’ve come across. These apps either add specific functionality to your store or make it talk to another tool (like Xero or Zendesk).

This wide range of apps is one of the strongest arguments for using Shopify over its rivals but also possibly an argument against.

On the plus side, it means that you have a fantastic range of options not only when it comes to adding functionality to your store but when it comes to integrating it with other tools and platforms too.

On the downside, it inevitably leads to a lot of situations where getting the functionality you need (relating for example to product reviews, AMP, additional product options and custom fields) involves installing a paid-for app.

Competing platforms like Wix and Squarespace, by contrast, tend to include more functionality like this out of the box — meaning you don’t end up paying as much on apps. Examples of Shopify apps available include:

• data capture apps
• accounting apps
• abandoned cart saver apps
• multi-currency selling apps
• advanced reporting apps.

Key third party apps that are supported via integrations include Xero, Freshbooks and Zendesk.

It’s worth dwelling a moment on an app for which an official integration which doesn’t exist: Mailchimp. Unfortunately, due to a dispute about data protection and privacy issues, this has been withdrawn from the app store.

You can still use Mailchimp with Shopify, but you’ll have to use more manual workarounds to do so. However, with the introduction of a new email marketing feature, you might not actually need to integrate an e-commerce tool with Shopify.

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. Also, 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.

Wrap up

Shopify apps help to run your business, trust them with your store’s performance. The apps are safe, reliable, and maintain high levels of quality. More than 1.7 million independent businesses use Shopify everyday to sell every type of product. And the apps cover a wide range of functions and features, but you can do some basic actions with each of them.

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.

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.