The most annoying thing when using the code editor

[ctevan]

If I open a new liquid tag, until I close it I get this really obnoxious red underline on everything.

Is there a way to change this in the settings and if not can the developers make this a lighter color or something?

[Wsp]

Hey @ctevan ,
This issue is not a Shopify problem it comes from your code editor’s Liquid syntax highlighting.

Always close Liquid tags properly

When you open a tag like:

{% if condition %}
content here
{% endif %}
Then make sure close it.
Once the tag is closed the red underline disappears automatically.
Thank You ..

[ctevan]

Yes @Wsp, I know that. Read my post, I said “until I close it”. This is also an issue if I want to delete a conditional, like if I first delete the {% endif %} I then have to wade through the obnoxious red highlighting to find the other tags.

[Moeed]

The real fix is to stop editing in the web editor and pull the theme down locally with the Shopify CLI plus VS Code and the Shopify Liquid extension. That kills all three annoyances: the extension auto closes Liquid tag pairs so you’re never sitting in the unclosed state while typing, you control the highlight colors through your editor theme, and you get a .theme-check.yml where you can downgrade or disable specific checks like the syntax error severity. If you’re stuck in the web editor, the only workable trick is typing the opening and closing tags together first then filling the middle, and when deleting a block, selecting the whole thing and removing it in one go rather than deleting the endif first.

On the “make it lighter” ask, the web editor isn’t where that gets heard. Theme Check and the editor tooling are open source, so the color and severity conversation actually lives on the theme-tools GitHub repo, and community.shopify.dev is where the theme tools team engages. You’ll get further raising it in either of those than in Discussion here.

Best,
Moeed

[tim_tairli]

Yes, you can change underline color.

It’s VSCode after all.

1. Click the cog icon in the bottom left corner and select settings:
   
   

   

2. Click “Open settings(JSON)” button at the right top:
   
   

   

3. If your config JSON is empty, then paste this and click “Save”. If something is already there, edit as any other JSON file:
   
   

   

Code for semi-transparent red, change “7” to control opacity:

    "workbench.colorCustomizations": {
        "editorError.foreground": "#f007"
    }

Before/After:

→

---

Editor colors - Theme Color

[PieLab]

Hi @ctevan,

Unfortunately, there is no setting in the native Shopify code editor to disable or lighten those lines. Shopify uses a built-in code checker called Theme Check. The moment you open a tag, it views the unclosed bracket as a broken codebase and aggressively flags every single line beneath it until you close the loop.

If you are stuck working directly in the browser editor, the best habit is to always type your opening and closing tags together first (like writing {% if %}{% endif %} right away) and then fill in the middle. However, if you do a lot of editing, the real fix is to move out of the browser. Pull your theme down locally using the Shopify CLI and edit using VS Code with the official Shopify Liquid extension. A local setup auto-closes your tags, lets you fully customize your error colors, and gives you the power to soften or completely turn off specific code alerts.

Hope this helps,

[SectionKit]

Hi @ctevan . Hope you are doing well.

I think it is sad that there are not any built in settings to change this now.

You can do something else to make it work.
You can close the tag quickly.
Then add what you want in between.
You can use a different editor like VS Code. The VS Code editor handles this problem better.

I think you should ask Shopify to make this better. If this was helpful, then don’t forget to like it and Mark as Solution.