Shopify tell you not to edit content_for_header for good reason. The code that Shopify outputs here could change format and any modifications based on find and replace could break in unexpected ways. But sometimes it’s fun to live on the edge, or maybe you just need to debug something.

Use this in production at your own risk. The example (preloads.js) is a basic proof of concept.

Below is the way I’ve done it in the past. Also see another approach from OutOfTheSandbox on GitHub.

Step 1: Find the content_for_header line in theme.liquid

{{ content_for_header }}

How to locate:
Shopify Admin> Online Store > Themes > Edit code > themes.liquid

Step 2: Replace it with

{%- comment -%}
  {{ content_for_header }}
{%- endcomment -%}

{% capture custom_content_for_header %}
  {{ content_for_header | replace: '<script async="async" src="<script async="async" src="/checkouts/internal/preloads.js?locale=en-NZ"></script>', '<!-- removed -->' }}
{% endcapture %}

{{ custom_content_for_header }}

What the replacement code is doing

  • Wraps the {{content_for_header}} in a comment so that it exists in the themes.liquid file
    • This is because Shopify does a simple theme code check to test if it exists and won’t let you save the theme file if not. The comment also means nothing actually gets output.
  • Assigns a string to variable custom_content_for_header
    • The string becomes the modified output of the original CFH
  • The | replace filter is used to find, replace
    • Find the JS script to remove:
      <script async="async" src="<script async="async" src="/checkouts/internal/preloads.js?locale=en-NZ"></script>
    • Replace with an HTML comment to help verify it worked
      <!-- removed -->
  • Then we print the modified string

Step 3: Check view-source

Hopefully it worked the way you wanted it to!

Just a side note – remove or minify preloads.js in Shopify?

I don’t recommend removing or fiddling with the preloads.js file as it has very little real world impact and has some UX benefits. Counter-intuitively its presence on a page can increase the page load speed of following pages.

Some SEO tools (looking at you SEMrush) will generate some scary looking warnings which lead some website owners to crudely try and fix or remove or minify preloads.js from Shopify without a clear reason, other than “must get rid of all SEMrush errors”.

Blindly following an SEO audit report to try and fix all errors is not always a productive use of time, not a very good SEO tactic.

However, it would be nice if Shopify minified the file on output so that it didn’t generate so many scary looking errors.