Create custom theme setting for code in head

At a glance

The community member wanted to create a global theme setting for custom code in the <head> tag in Webflow, but when they added the Liquid code, it was moved into the <body> tag instead. They tried various solutions, including using <div><div></div></div>, but the issue persisted. The community members discussed that raw text is not allowed in the <head> tag, and the Webflow team is working on a solution where they can use <script>LIQUID CODE</script> to include Liquid code in the <head>. The community members also discussed using <li-settings:global> to define theme settings that would appear in the Shopify theme settings, including a favicon setting.

rriziki

I wanted to create a global theme setting for custom code in the <head> tag and got the setting in Shopify by manually editing the settings_schema.json file in Github. To get it to work I want to add {% if settings.custom_head_code != blank %}{{ settings.custom_head_code }}{% endif %} in the global head code in Webflow (so it is included in all layout files). But when I do that, the text is moved into the <body> and inside of a <p> tag instead. I suspect that this is something that Liquify is doing, since it looks correct in the Webflow code export.

Is there a way I can keep this as pure Liquid code directly in my <head> tag when doing the Liquify conversion?

Attachments

27 comments

rriziki

Bonus: is there a way to define the theme settings in settings_schema.json through Liquify, or is it fine to do that manually in Github. It doesn't look like it will conflict when I update the theme, so I assumed that it was ok 🤔

jjonas.halbstark

Hi @riziki, can you try adding this into your head: <div li-if="settings.custom_head_code != blank"><div li-object="settings.custom_head_code"></div></div>

That could fix the problem quickly

jjonas.halbstark

but thats a strange behaviour

jjonas.halbstark

can you send me the exported file ?

jjonas.halbstark

from webflow

rriziki

Thank you @jonas.halbstark ! I've attached the export here. Another thing I also noticed, is that it also causes the li-page="page-name" attribute to be removed from the <body> tag on the affected pages.

I just tried what you suggested with the li-if attributes on <div>, and it was still moved into the body. I'd prefer another method than li-object, since it would wrap the code in a div which isn't great inside the <head> tag.

Attachments

rriziki

If I add the Liquid tags inside an HTML comment, they get through as expected though.

Attachments

jjonas.halbstark

@crslp

jjonas.halbstark

Thats strange. We are looking into it.

rriziki

Thanks! It could be some kind of validation reformatting. If I publish the Webflow site with {% if settings.custom_head_code != blank %}{{ settings.custom_head_code }}{% endif %} in the global head code in, it's also moved automatically into the <body> on the webflow.io site probably because raw text is not allowed in the <head> tag 🤔

Attachments

jjonas.halbstark

yes. these elements are not allowed in the head. We are working on a solution where you can use <script li-liquid >LIQUID CODE</script>. Thanks for your patience

jjonas.halbstark

Hi @riziki, we are currently working on two solutions.

is <script li-liquid >LIQUID CODE</script>
is li-settings:global where you can add plain settings json to the global settings. Works like li-settings:custom

Curretnly in testing. I will give you feedback as soon as possible

rriziki

Awesome! Sounds like these should solve what I'm looking for 🙌

jjonas.halbstark

Hi @riziki, you can try this feature now 🙂 just add <script li-liquid >LIQUID CODE</script> this in your head

GGeorgy Rakita

Hey @jonas.halbstark, I was just looking for a solution and found this.

Is it possible to use this to set up a global setting that would appear in the theme settings in Shopify?
I'd like to set up a place for a website favicon this way, as many online tutorials point to this part of the settings for changing the favicon and my client got confused not finding it there.

Is it possible to do or are favicons carried over from Webflow rn? Thanks!

jjonas.halbstark

yes that can be used. We are currently testing a new element li-settings:global where you can write theme settings. That helps a lot. Then you can do settings for favicon and a lot more

GGeorgy Rakita

How do I bind the setting to the favicon though, as it's auto-generated in the <head> in the Webflow code?

jjonas.halbstark

You can paste this into the settings schema:

[
      {
        "name": "General Settings",
        "settings": [
          {
            "type": "image_picker",
            "id": "favicon",
            "label": "Favicon Image",
            "info": "Will be scaled down to 32x32px"
          },
          {
            "type": "image_picker",
            "id": "apple_touch_icon",
            "label": "Apple touch icon image",
            "info": "Will be scaled down to 120x120px"
          }
        ]
      }
  ]

GGeorgy Rakita

Yeah, that's clear - but how do I bind it to the favicon declaration? My understanding that you take the Webflow's head code and use it in the theme, right? So I can add another <link rel="shortcut icon"> in the header, making a duplicate?

jjonas.halbstark

its already in the head code.. so you should be able to use it already

GGeorgy Rakita

Ah okay, thanks!!

GGeorgy Rakita

@jonas.halbstark , could you please clarify how li-settings:global works?

I've added it in the following way but it doesn't seem to be picked up:
Thanks!

Attachment

GGeorgy Rakita

@jonas.halbstark - thanks!

jjonas.halbstark

Hi @Georgy Rakita, thats still in testing and not live 🙂

GGeorgy Rakita

Ah sorry, re-reading your previous messages and I see that you never said it's live - sorry again!

jjonas.halbstark

yes sorry

GGeorgy Rakita

No worries, adding it manually works anyways!

Add a reply

Welcome to the Liquify Community

Create custom theme setting for code in head