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

Wenjian_Zhao
Explorer
73 0 9

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

Replies 5 (5)

oreoorbitz
Shopify Partner
242 29 129

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Wenjian_Zhao
Explorer
73 0 9

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
Explorer
73 0 9

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
Excursionist
64 1 5

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
Shopify Expert
742 51 211

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.

Screen Shot 2020-10-20 at 2.29.56 PM.png

{% 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).