Search code examples
shopifyshopify-app

Disable certain Shopify apps on certain pages


There are about 20 apps installed on our shop. Different apps are used on different pages. For example, there are apps which are used on the product page only.

However I see that all apps are loaded on every page. Looking into page source I see JavaScript function asyncLoad which is part of built-in {{ content_for_header }} variable. This function load scripts for all apps on every page. So, can I restrict this somehow? I mean - to avoid of downloading scripts/css/whatever of apps which I don't use on the specific page. For example, on the home page I need just a couple of apps active, not all 20 of them. Didn't find the answer in docs or Google.


Solution

  • It sounds like you've already figured out a lot about how Shopify allows apps to load their scripts, so you're most of the way there!

    When I've needed to selectively disable apps, I have removed them from the asyncLoad function using something like the following:

    {% capture modified_content_for_header %}{{ content_for_header }}{% endcapture %}
    {% if template.name == 'index' %}
      {% assign modified_content_for_header = modified_content_for_header | remove: 'some_app_url.js,' %}
    {% endif %}
    <!-- If you have a lot of templates you are checking, a case/when using template.name might be appropriate -->
    {{ modified_content_for_header }}
    

    I like using {% if template.name == value %} rather than {% if template contains value %} for template checks, as that ensures I don't accidentally get a false positive for a template suffix that contains one of the other template types for some reason, like a collection.alternate_product_layout or something silly like that.

    Disclaimer: Messing with 3rd party apps by removing their script files may have unexpected side-effects, so always be sure to exercise caution and test thoroughly on an unpublished theme!