Does anyone know how to use this {{ content_for_header }} ?

Wenjian_Zhao · ‎09-03-2020

Hi, all?

Does anyone know how to use {{ content_for_header }} ? Is there any error on my syntax in the following code?

I wrote the following code for my website to try to stop loading these 4 apps on my home page and 2 apps on my collection page.

But this code doesn’t work. Would you please tell me what is wrong?

<head>

....

{% capture h_content %}
{{ content_for_header }}
{{ content_for_footer }}
{% endcapture %}

{% if template == "index" %}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}
{{ h_content | remove: "https:\\sdk.beeketing.com\js\beeketing.js?20200901" }}
{{ h_content | remove: "https:\\www.gstatic.com\recaptcha\releases\QVh-Tz10ahidjrORgXOS1oB0\recaptcha__en.js" }}
{% elsif template == "collection" %}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}

{% else %}
{{ content_for_header }}
{{ content_for_footer }}
{% endif %}

.....

</head>

After I inserted this code into my theme (Old version of Minimal ) and then tested my website: https://iloveforeverfashion.com/ from Google PageSpeed Insights, I still saw that google suggested to eliminate these javascripts. That means these apps: facebook app, brain bold app, beeketing app, and recaptcha app are still working when loading my home page.

Would you please help me?

Thanks!

Jane 09/03/2020

oreoorbitz · ‎09-03-2020

You commented out the original content_for_header right?

I've tried filters on content for header before and they didn't work, I didn't try capture though, maybe an shopify dev can confirm if capture works on content_for_header.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

Wenjian_Zhao · ‎09-03-2020

Thanks for your response!

Can you help me to ask Shopify tech if my syntax is correct?

If not correct, which part is not correct? How to make it right?

We can talk it out to discuss to get the correct solution.

Thanks!

Jane

09/03/2020

Wenjian_Zhao · ‎09-10-2020

Hi, anyone can help me with the following code?

I wrote the following code for my website to try to stop loading these 4 apps on my home page and 2 apps on my collection page by
using {{ content_for_header }}.

But this code doesn’t work. Is there any error in my syntax in the following code?

Would you please tell what is wrong?

<head>

....

{% capture h_content %}
{{ content_for_header }}
{{ content_for_footer }}
{% endcapture %}

{% if template == ' index '%}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}{{ h_content | remove: "https:\\www.google.com\recaptcha\api2\bframe?hl=en&v=NjbyeWjjFy97MXGZ40KrXu3v&k=6LckSxkUAAAAAPsPs4TtrT-Yp3S9..." }}
{{ h_content | remove: "https:\\www.gstatic.com\recaptcha\releases\QVh-Tz10ahidjrORgXOS1oB0\recaptcha__en.js" }}
{% elsif template == 'collection' %}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}

{% else %}
{{ content_for_header }}
{{ content_for_footer }}
{% endif %}

.....

</head>

After I inserted this code into my theme (Old version of Minimal ) and then tested my website: https://iloveforeverfashion.com/ from Google PageSpeed Insights, I still saw that google suggested to eliminate these javascripts. That means these apps: facebook app, brain bold app, beeketing app, and recaptcha app are still working when loading my home page.

Would you please help me?

Thanks!

Jane 09/06/2020

BananaMoon · ‎09-10-2020

Try the "console" in Google Chrome, to see if there are red Javascript issues.

Or have a look at some webdesign courses on YouTube to start with.

gina-gregory · ‎10-20-2020

Your code is close, but not quite there. The {{ content_for_header }} is basically just a string of HTML & JavaScript that Shopify injects into the site. This is also where apps can inject their scripts though the 'asyncLoad' function. What you need to do is target the scripts in here to remove them.

{% if template == 'index' %}
  {{ content_for_header }}
{% else %}
  {{ content_for_header | remove: ',"https:\/\/brain-assets.boldapps.net\/js\/analytics.js?shop=forevershop.myshopify.com"' | remove: ',"https:\/\/spcdn.incartupsell.com\/ceadf-myL85sfopkyCuM55cwZ-.js?shop=forevershop.myshopify.com"' }}
{% endif %}

I would advise not messing around with the {{ content_for_header }} though unless you know what you're doing. Removing that Bold Brain script might cause another script that app injected into your theme code to throw an error because it depends on that script.

The other scripts you're trying to remove don't look like they're directly included in the {{ content_for_header }}. So you'll have to do a little digging to find where they're coming from. You can potentially use the Network tab in Chrome's dev tools to do that (look at the "Initiator" column).

Does anyone know how to use this {{ content_for_header }} ?

Does anyone know how to use this {{ content_for_header }} ?

Community Blog Articles