Shopify Liquid Lesson: Conditionally Load Apps

Shopify Liquid Lesson: Conditionally Load Apps

2018-05-21T10:25:01+00:00 May 15th, 2018|Performance Optimization|2 Comments

Apps are awesome. They help your site look more lively and generate sales.

They also slow your page load speed by adding extra server requests and a heavier page weight.

Here’s a glimpse into one of the ways we optimize apps, and how you can do it too (if you’re into coding).

Loading Apps Only Where You Need Them

In this example, we have a website using a Facebook Page/Like Plugin on their About page, but it was placed in the theme.liquid file so it loads on every page of the site.

To fix this, we use Shopify’s Liquid code to wrap it in a conditional statement so it only displays on the About page:

That saved 3 extra files from being loaded on every page + lowered the overall page weight, which translates to faster load speed… which translates to more $$$.

Another Example

You might see a Shopify app snippet included in your theme.liquid file like this:

If the app needs to be loaded on every page, putting it in the theme.liquid file is the right thing to do.

But if you only need on one page, you should load it only on that page/template.

Using this example, say the app/plugin zooms your product page images like Amazon.

In that case, we only want to load it on the Product page, like this:

Now you’re saving that app’s scripts and CSS files from loading on every single page of your site, when you’re only using it on your product pages. Site-wide speed win!

How to Locate Optimization Opportunities

This will take a little bit of analysis, but finding these opportunities can help save wasted resources and make your site load faster.

Open up your theme.liquid file and read the code from top to bottom – look at each script loaded and snippet “included”.

A lot of times you’ll see a code comment like this:

<!-- This is a code comment -->
<script>// this is an example script</script>

That comment will tell you what app/plugin the code is used for.

If you know that app is only used in certain sections of your site, you can conditionally load it on those pages by using the technique I showed above.

Things like Analytics and remarketing apps need to be loaded on every page, so look for apps that performa a specific function or that only appear on specific pages.

You can learn more about Shopify theme structure here.

And in the same section of docs, you can see Liquid references here.

Give it a crack if you want, or if you’d rather work on your marketing or designing your next product instead of digging through code, you can order our Entrepreneur Package and we’ll handle this plus our full service of performance optimization.

Dev Notes

If you ever edit your theme structure like this, you should first duplicate your theme and work off that backup to make sure you don’t break your live site.

Once you’ve updated your code and tested, you can publish that new theme so your changes are live.

And if you’re unsure whether an app is necessary on any pages, you can always contact the app developer to make sure. Sometimes they’ll have the code load on every page to make installation easier, but you’r into performance so you want the speeeeeeed maaaaaaan.

About the Author:

Joe's a Shopify Expert, eCommerce entrepreneur, and founding architect of Speed Boostr. Outside of tech he's big time into trees and nature 🌲🤙

2 Comments

  1. Wendy Quick June 9, 2018 at 10:52 am - Reply

    It sure is necessary advice by making sure to keep what apps are needed, and get rid of what is not. Being a newbie I had at one time a lot of apps, but noticed some articles (like this one) saying less is better. I would also like to state that the staff at Speed Boostr are great, and it is an honest business. It was my experience to say this.

    • Joe June 13, 2018 at 7:34 am - Reply

      Ya apps are addicting aren’t they? 🙂 Thanks for the comment Wendy we’re always happy to help.

Leave A Comment