Blog

The Merchant's Guide to Shopify Apps

Helium's guide

An Intro to Apps

The Shopify App Store overflows with helpful tools to grow your business.

It can also be a wild west where installed apps make changes to your storefront that you didn’t realize, or stick around even once you uninstall them.

We created this guide to help you make informed decisions on adding apps to your store.

In this guide we will:

  • Explain the different types of Shopify store apps
  • Show you how to identify the best apps for your needs
  • Share best practices on testing and installing apps on your store

70 apps on average are added to the Shopify App Store every week.

Apps Overview

The Basics - What’s an app?

Shopify apps are software you can install onto your store that add functionality not available with a standard Shopify store.

Some apps are free while others come with a monthly subscription cost, most apps that cost money offer a multi-day trial.

You can explore all approved apps on Shopify’s App Store. Installing an app is as easy as signing into your Shopify storefront, finding the app that’s right for you and clicking the “Add app” button.

While apps come in all shapes and sizes most can be bucketed into one of two groups: storefront apps or backend apps.

Customer-Facing Apps

In general, storefront apps help you sell your products and affect your customers’ shopping experience. They add new features like building landing pages, creating scarcity, and cultivating social proof through product reviews and social-media.

Since these features can create leads, increase sales and are generally seen by your customers, we would classify them as storefront apps.

Examples:

  • Custom registration forms
  • Landing pages
  • Contests and giveaways
  • Popups
  • Cart customization
  • Custom menus

Backend Apps

Backend apps help you run your business. They save you time and money, they help you better understand your customers, and they add value to your daily workflow. Backend apps typically don’t affect your website’s load times.

Your customers most likely won’t interact with these apps but you and your team will typically access them from your Shopify Admin page.

Examples:

  • Inventory management
  • Productivity tools
  • Data collection
  • Orders & shipping
  • Dropshipping
  • Integrations

customer fields app store listing on the shopify app store from 2021

What to Look for While Browsing the App Store

It can be hard to know which app is right for your store. Later in this guide you’ll learn how to avoid common app install and uninstall mistakes, but a few things you can lookout for on the app listing page are:

The Support Section

On every app listing you’ll see a “Support” section on the right hand side of the page.

Some things to look out for are a legit email address, an FAQ page that suggests they have strong customer support, and an active website. If the email associated with the app is something like “iluvsDawgs@gmail.com” and the website associated with the app isn’t professional, it may indicate the quality of the app.

Check for:

  • A legitimate email address
  • FAQ or support page
  • Professional website

The Demo Store

A really cool feature that Shopify built into the app store is the ability for app developers to create an “example store” where you can test drive the app. It’s a great way for you to make sure the app supports the features you’re looking for before installing it and potentially making changes to your store.

Don’t forget, always duplicate your theme before installing a new app!

The “Integrates With” Section

Already using tools like Zapier to sync up all your tools and data? Well you can see if an app supports native integration with your favorite tools by clicking on the “Show full description” under the app listing and at the bottom of the description you’ll see a section, “Integrates with”.


5 Mistakes Merchants Make When Installing or Uninstalling Apps

1. Not Reading the App Listing

Shopify apps come in all shapes and sizes. While Shopify does test every app before allowing them onto the app store, you will still run into varying degrees of quality. So it’s always wisest to do your homework upfront. We suggest these three things:

DON’T TURN YOUR STORE INTO AN APP-FRANKENSTEIN

• Know your must-have features

Don’t turn your store into an App-Frankenstein. Cherry-picking features from similar apps creates a confusing workflow for you and poor site performance or broken pages.

Start your search by getting a general understanding of what the apps in your desired category offer and find one that lines up closest to your needs.

• Review the reviews

It’s always helpful to hear someone else’s experience with an app. Reading reviews can be a great way to understand if the app is intuitive and effective.

Use reviews to see how well the developer supports their app. Do they have a dedicated support team that people found helpful? Does the app contain code that’s hard to get rid of even after uninstall that other customers found frustrating? Learn from other merchants’ victories or bad experiences.

• Make the most of a free trial

We all love free stuff. Too often, though, we sign up for a 14-day trial and don’t put it to good use.

Carve out time in your schedule to walk through a full testing of the features you hope to use. See how responsive the developer is to customer support requests. See if it has any adverse effects on your store’s performance or if it doesn’t play well with other apps.

Don’t let the clock run out on a free trial without being well informed on if the app will or won’t meet your needs.

DON’T LET THE CLOCK RUN OUT ON A FREE TRIAL WITHOUT TESTING IT.

2. Installing an App Directly to Your Live Theme Before Testing

When trying out a new app, never install it directly to your live theme. Create a duplicate theme before installing the app, and test it there. Doing this ensures that your customer’s purchasing experience is not interrupted by an app that hasn’t been set up yet or is broken.

Creating theme duplicates also helps you compare two similar apps and see how they work within your shop’s ecosystem. When testing multiple apps, you may find one app plays better with your other installed apps.

With Helium, you always get to choose which theme you would like to install an app on. This isn’t the case with many other apps so please exercise caution. Some apps will inject code into your live theme as soon as you hit the ‘install’ button.

Read our blog post on duplicating your Shopify store’s theme: How to duplicate your Shopify theme

3. Not Reviewing the App Permissions Page

Shopify includes an app permission page when you start installing a new app. In the image on the right you can see our app, Meteor Mega Menus, and what permissions you would be allowing it to have on your website.

This App Permissions page is often overlooked but can prove very valuable. If you’re installing an app that shouldn’t need to request account data or make script tag edits to your store but is, that’s a red flag.

If something’s fishy and you’re still on the App Permissions page, there’s still time to hit cancel!

4. Installing two apps that do the same thing

Doubling up on any kind of app could break that part of your store.

This may seem obvious, but it happens a lot. For example, maybe you download a mega menu app, then find a second mega menu app that you prefer the design of more. If you have them both installed these apps will compete to embed their lines of code into the same spots and will break your menus.

5. Uninstalling an app without removing its code

This gets a bit technical, but some developers build apps that stay entirely self-contained. So when you uninstall the app, all of its code gets removed from your store. Other apps write themselves directly into your store’s theme, making it harder to remove completely. Both ways of creating apps have their advantages, but if you find you’re using an app that affects your theme, there’s a good chance it lives in your theme’s code and will have bits of code left in your theme after uninstall.

Before uninstalling an app like this, check the app’s landing page in your store admin and see if they offer an uninstall tool. If they don’t, contact their customer support team or visit their website to see if they’ve created a guide on how to clear out all of the app’s code.

Using apps effectively can launch your business into major growth. Avoid these five pitfalls and reach out if you need help.


2 ways developers build storefront apps & how they affect your theme

Installing an app from the Shopify App Store is a relatively painless process. A problem, though, is it’s hard to know how the app’s developer built the program and how it will affect your store’s theme code before installing. We’re here to help!

Each of the almost 6,000 apps on the app store were created differently and with varying degrees of thoughtfulness on how it handles your store’s theme.

In general, though, there are two main approaches developers use when building Shopify apps that interact with the storefront: ScriptTags and theme edits. Both have their draws and merchants should understand how they affect their store.

We like to think of adding apps to your storefront like making updates to your home. Theme edits are like changing the floorplan of your home, ScriptTags are like adding a new piece of furniture.

Like busting out a wall or changing the layout of your kitchen, apps that edit your store’s theme make direct changes to the structure of your website. They can remove components and replace them with more advanced functionality. In general, adding or removing them may require more work.

ScriptTags are like hanging a painting on the wall or putting a new couch in your living room. They’re self-contained units that can be added or removed without directly changing your home. ScriptTags get plugged into your site but don’t make code changes to your storefront. This comes with obvious benefits, like being easier to integrate with your store, but it also means they may not load simultaneously with your store.


LET’S DIG INTO THESE TWO APPROACHES IN MORE DETAIL


Theme Edits

Apps that edit your theme’s code embed their features directly into your store. This route works best for apps that need to load quickly and with the store’s theme rather than after.

Editing the theme also allows for a more direct integration with Shopify. For example, our Customer Fields app has to edit the theme’s code to add our advanced customer data functionality, like custom registration forms and automatic customer tagging features. Since we’re extending the functionality of customer registration and saving this data directly to Shopify, we have to make changes to the store’s theme code.

A drawback to theme edits is that uninstalling the app may not clean out all code now stored in your theme. So if you uninstall an app without removing their code changes, then you (and your customers!) may see Liquid errors or add unnecessary bloat to your store’s load times. Before uninstalling an app, check and see if the developer has created an uninstaller inside the app, like the one shown below.

one-click uninstall tool button from helium customer fields app circa june 2021

Why does code get leftover in my theme?

In short, it’s complicated, and Shopify is working on it.

Shopify revokes an app’s permissions the second you uninstall an app. This is a safeguard to protect your privacy but it also means that the app can no longer access or make edits to your theme’s code, so there’s no way for the app to clean up the changes it made. This is why reputable apps have built-in uninstall tools inside of the app, so you can easily undo the theme code changes before deleting the app from your store.

Why do apps need to load immediately?

Sometimes an app loading right away is crucial.

For example, our Meteor Mega Menus app adds customizable mega menus straight to your store using your Shopify collections. An app like this must be installed directly into the theme so that it loads alongside the rest of the page. You wouldn’t want your store’s mega menu popping up after the rest of your site has loaded.

What kind of apps directly edit my theme’s code?

  • Page Builders
  • Custom Registration Forms
  • Mega Menus & Navigation
  • Website Translation tools

ScriptTags

Shopify describes ScriptTags like this:

The ScriptTag resource represents remote JavaScript code that is loaded into the pages of a shop’s storefront or the order status page of checkout. This lets you add functionality to those pages without using theme templates.

Script tags are scoped to the app that created them. When an app is uninstalled from a shop, all of the script tags that it created are automatically removed along with it.

So ScriptTag-based apps add visual elements, tracking tools, and minor functionality that layer on top of your theme without directly changing it. They’re more like plugins or addons rather than tampering with the nature of your store’s theme. That means apps built with ScriptTags can be uninstalled easily too, since they’re self-contained and automatically removed by Shopify.

What kind of apps directly edit my theme’s code?

  • Discount Spinners
  • Custom product options
  • Print-on-demand
  • Exit-intent pop-ups

Can I tell how an app will affect my theme?

Yes! Shopify includes an app permission page when you start installing a new app. In the image below you can see our app, Meteor Mega Menus, and what permissions you would be allowing it to have on your website.

This page is often overlooked but can prove invaluable. If you’re installing an app that shouldn’t need to request account data or make edits to your store’s theme but is, that’s a red flag.

If you see that an app wants to “Modify theme templates and theme assets” that means the app is using the Asset API. You’ll see the word “script tags” under “Edit your Online Store” if the app is using ScriptTags.

If something’s fishy and you’re on the App Permissions page you still have time to hit cancel and that app will not gain access to your store.


At Helium, we’re on a mission to set a higher standard for app developers within the Shopify ecosystem.

Providing transparency regarding changes to theme code and giving the user control over these changes are critical pieces of the puzzle, yet they are often overlooked or in some cases outright disregarded. We want to be different. We want to be better. This is why we’ve detailed out exactly what the app changes in a theme, when it is changed, and how it is changed.

heliumdev.com

@heliumdev on YouTube

@helium_dev on Twitter

@helium.dev on Instagram

Related articles

Grow

Case study: Can a B2B Pet Nutrition Brand Run on Shopify?

Grow

How to Create a Confirm Password Field for Your Shopify Store

Grow

Case Study: Saving 2 hours a day on B2B signups for licensed professionals and retailers