#2042·liquid

Template literals cause syntax error inside {% javascript %} Liquid tag

Author: 1TheNeo1Created Jan 26, 2026Updated Feb 11, 2026

Description

Using JavaScript template literals (backticks) inside Shopify’s {% javascript %} Liquid tag causes a syntax/parsing error. The same code works correctly when rewritten using string concatenation.

This appears to be a Liquid parsing issue rather than a JavaScript syntax problem.

Failing example

liquid
{% javascript %}
this._inner.style.transform = `translate3d(${this._x}px,0,0)`;
{% endjavascript %}

Error

Error is a bit strange, in scripts it fails at parsing all section javascripts into a single scripts.js file: Image

Additional context

This parsing error only reproduces when the JavaScript is defined inside a Custom Element (HTMLElement subclass). When similar code is placed outside of a Custom Element, the {% javascript %} tag does not throw an error.