Shopify tell you not to edit content_for_header for good reason. The output could change and any modifications 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 simply 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 liquid code is doing

  • Wraps the {{content_for_header}} in a comment so that it exists in the themes.liquid file
    • The reason for this is because Shopify checks for if exists and won’t save themes.liquid if not. The comment also means nothing 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!