Saya baru selesai membelah-belah sebuah section panjang di tema Shopify klien menjadi beberapa blok yang lebih rapi. Untuk menandai batas tiap blok, saya menyisipkan komentar penanda seperti {# LEFT RAIL #} di antara markup, kebiasaan yang terbawa dari proyek-proyek yang pakai Jinja dan Twig. Theme check jalan bersih, tidak ada satu pun warning. Saya push ke staging dengan percaya diri.
Begitu halaman produk terbuka di browser, di sana, terpampang jelas di tengah layout, tertulis {# LEFT RAIL #} sebagai teks biasa. Bukan komentar tersembunyi, tapi literal kurung kurawal yang bisa dibaca pembeli. Setiap penanda yang saya tulis bocor ke halaman live persis apa adanya.
Refleks pertama yang salah
Reaksi awal saya adalah menyalahkan proses build. Saya pikir ada minifier yang gagal mem-parse komentar, atau cache staging yang menyajikan versi setengah jadi. Saya purge cache, push ulang, buka di incognito. Teks kurawal itu tetap di sana.
Yang bikin bingung: theme check sama sekali tidak mengeluh. Kalau ini sintaks yang benar-benar rusak, harusnya ada error parse. Tapi tidak ada. Halaman render sempurna, layout utuh, dan di tengahnya ada teks yang seharusnya tidak pernah terlihat manusia. Kombinasi "valid tapi salah" itulah yang akhirnya menuntun saya ke akar masalahnya.
Kenapa ini terjadi
Shopify Liquid tidak punya sintaks komentar inline seperti itu. Bentuk {# ... #} itu milik Jinja2 dan Twig, bukan Liquid. Parser Liquid tidak mengenali {# sebagai pembuka apa pun, jadi ia memperlakukannya sebagai teks biasa dan mengeluarkannya apa adanya ke output.
Di situlah letak jebakannya. Karena Liquid tidak menganggap {# sebagai token spesial, tidak ada yang salah menurut parser. Tidak ada error, tidak ada exception. Ini bug rendering, bukan bug parse. Dan justru karena bukan error parse, static check seperti theme check tidak akan pernah menandainya. Bagi tools itu, {# LEFT RAIL #} hanyalah sederet karakter literal, sama tidak berbahayanya dengan menulis kata "LEFT RAIL" langsung di template.
Saya sudah terbiasa dengan sintaks Jinja sampai jari saya mengetiknya secara otomatis, dan Liquid dengan patuh mencetak apa pun yang tidak ia kenali. Tidak ada yang melindungi saya dari kebiasaan yang salah tempat.
Perbaikannya
Solusinya sederhana begitu penyebabnya jelas: ganti semua {# ... #} dengan tag komentar Liquid yang sebenarnya, {%- comment -%} ... {%- endcomment -%}.
{%- comment -%} LEFT RAIL {%- endcomment -%}Perhatikan tanda hubung di depan dan belakang, {%- dan -%}. Tanda itu men-strip whitespace di sekeliling tag, jadi tidak ada baris kosong sisa yang tertinggal di output setelah komentar dihapus dari render. Tanpa hubung, kamu akan dapat markup yang benar tapi dengan celah baris kosong di mana komentar tadi berada.
Untuk membersihkan sisa {# ... #} di seluruh tema, saya tidak mengandalkan mata. Karena theme check diam, satu-satunya cara yang bisa saya percaya adalah grep langsung untuk literal {#:
grep -rn '{#' sections/ snippets/Perintah itu menyisir setiap file section dan snippet, dan mengembalikan setiap baris yang masih mengandung komentar gaya Jinja. Saya jalankan, dapat daftar lokasi, ganti semuanya dengan bentuk {%- comment -%}, lalu jalankan grep sekali lagi untuk memastikan hasilnya kosong. Push ulang, dan halaman produk akhirnya bersih dari kurung kurawal liar.
Pelajaran
Setiap bahasa template punya sintaks komentarnya sendiri, dan mereka tidak saling kompatibel. Jinja pakai {# ... #}, Liquid pakai {%- comment -%} ... {%- endcomment -%}. Yang berbahaya bukan sekadar salah sintaks, tapi bahwa Liquid gagal secara diam-diam: alih-alih error, ia mencetak komentarmu ke halaman untuk dibaca pembeli.
Karena kegagalannya diam, alat static seperti theme check tidak akan menyelamatkanmu. Jadi kalau kamu mem-porting template dari ekosistem lain ke Shopify, jangan percaya pada "check passed" saja. grep secara spesifik untuk literal {# di sections/ dan snippets/ sebelum push. Sejak insiden itu, langkah grep untuk {# jadi bagian rutin checklist saya setiap kali menyentuh tema yang di-porting dari basis Twig atau Jinja.