Sayudha

66 Theme Check Referensi Aturan A–L

Properties2
descriptionReferensi aturan Theme Check dari AppBlockMissingSchema sampai LiquidTag, tiap aturan dengan apa yang dicek, kenapa, contoh gagal dan lolos, opsi, severity default, dan kapan boleh dinonaktifin, termasuk aturan 1.x yang udah dihapus
tagsshopify, theme, tools

12 menit baca

Setelah alatnya di 65 Theme Check Pengenalan, Konfigurasi, Commands, ini kamus aturannya. Bab ini dan 67 Theme Check Referensi Aturan M–V dimaksudkan buat dicari, bukan dibaca urut: waktu Theme Check ngelempar nama aturan, cari di sini apa maksudnya dan cara benerinnya.

Tiap aturan punya nama yang sama dengan yang muncul di output Theme Check dan di .theme-check.yml. Buat tiap aturan kita catat severity default (dari 65 Theme Check Pengenalan, Konfigurasi, Commands > 1. Severity), apa yang dicek dan kenapa, contoh gagal dan lolos, dan saran nonaktif dari Shopify. Aturan yang cuma ada di Theme Check 1.x (udah dihapus di 2.x) ditandai, dan disertakan biar lengkap kalau kamu nemu config lama.

AppBlockMissingSchema

Error. Mastiin schema ada di app block theme app extension. App block tanpa {% schema %} gak bisa dikenali theme editor dan gak punya setting. Gagal: file app block yang cuma berisi markup loop section.blocks tanpa {% schema %} di akhir. Lolos: markup yang sama diikuti {% schema %} dengan name, blocks, dan settings-nya. Nonaktifin gak disarankan.

AppBlockValidTags

Error. Ngenalin tag Liquid terlarang di app block dan app embed block theme app extension: {% javascript %}, {% stylesheet %}, {% include %}, {% layout %}, {% section %}, {% sections %}. App block punya mekanisme aset sendiri (javascript/stylesheet di schema) dan gak boleh ngubah layout atau ngerender section theme. Aktif default waktu shopify app build di app dengan theme app extension, nonaktif default di shopify theme check (karena bukan konteks theme). Nonaktifin gak disarankan.

AssetPreload

Warning. Ndorong preload aset lewat filter Liquid, bukan atribut HTML, biar diubah jadi header Link otomatis dan dapat Early Hints (64 Performance Navigasi dan Loading > preload yang Hemat).

❌ gagal

<link href="{{ 'script.js' | asset_url }}" rel="preload" as="script" />
<link href="{{ 'style.css' | asset_url }}" rel="preload" as="style" />
<link href="{{ 'image.png' | asset_url }}" rel="preload" as="image" />

✅ lolos

{{ 'script.js' | asset_url | preload_tag: as: 'script' }}
{{ 'style.css' | asset_url | stylesheet_tag: preload: true }}
{{ product.featured_image | image_url: width: 600 | image_tag: preload: true }}

Aman dinonaktifin kalau kamu harus preload aset dari domain eksternal yang gak bisa dipindah ke Shopify (berubah sering atau dibuat dinamis), karena filter Liquid cuma buat aset CDN Shopify.

AssetSizeAppBlockCSS

Suggestion, aktif default di app build. Nyegah theme app extension pakai file CSS lebih besar dari threshold_in_bytes (default 100.000), dicek dari "stylesheet": "app.css" di schema app block. Ngukur termasuk stylesheet remote. Nonaktif default di shopify theme check. Batasnya belum dipaksakan platform, tapi nonaktifin gak disarankan buat extension.

AssetSizeAppBlockJavascript

Suggestion, nonaktif default. Sama buat JavaScript app block dari "javascript": "chat-widget.js", ambang 10.000 byte, termasuk script remote. Kalau bundle-nya emang besar, pakai pola import on interaction dari 61 Performance JavaScript dan INP > Load JavaScript Saat Interaksi.

AssetSizeCSS

Nonaktif default (opt-in). Nyegah theme pakai file CSS lebih besar dari threshold_in_bytes (100.000), termasuk stylesheet remote, dicek di tiap <link rel="stylesheet">. Ingat dari bab 65: ngukur byte mentah, bukan terkompresi. Aktifin di .theme-check.yml dengan thresholdInBytes (camelCase di config 2.x).

AssetSizeJavaScript

Nonaktif default (opt-in). Sama buat JavaScript, ambang 10.000 byte, termasuk script eksternal.

❌ gagal, chat-widget.js > 10KB dimuat di semua halaman

<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>

✅ lolos, dimuat saat interaksi

<script>
const chatWidgetButton = document.getElementById('#chat-widget')
chatWidgetButton.addEventListener('click', e => {
  e.preventDefault();
  import("{{ 'chat-widget.js' | asset_url }}")
    .then(module => module.default)
    .then(ChatWidget => ChatWidget.init())
    .catch(err => {
      console.error(err);
    });
});
</script>

Kalau pelanggarannya gak terhindarkan, nonaktifin per instance lewat komentar biar tiap pengecualian disengaja:

{% # theme-check-disable AssetSizeJavaScript %}
<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>
{% # theme-check-enable AssetSizeJavaScript %}

BlockIdUsage

Warning. Ngelarang pemakaian block.id di if/elsif/unless dan case. ID block dibikin otomatis dan berubah (tiap merchant nambah block dapat ID baru), jadi logika yang bergantung ID pasti rusak. Pakai block.type atau setting.

❌ gagal

{% if block.id == 'my-block-id' %}
  This is a bad idea.
{% endif %}
{% case block.id %}
{% when 'my-block-id' %}
  This is a bad idea.
{% endcase %}

Nonaktifin gak disarankan.

CdnPreconnect

Warning. Nandain preconnect redundan ke cdn.shopify.com. Platform udah nyertain hint itu di header Link dokumen utama, dan karena aset dilayani dari domain toko sendiri, mungkin gak ada aset dari cdn.shopify.com sama sekali, jadi preconnect-nya biaya murni (64 Performance Navigasi dan Loading > preconnect).

❌ gagal

<link href="https://cdn.shopify.com" rel="preconnect" />
<link href="https://cdn.shopify.com" rel="preconnect" crossorigin />

✅ lolos (domain eksternal beneran)

<link href="https://example.com/" rel="preconnect" />

Nonaktifin gak disarankan.

ContentForHeaderModification

Error. Ngenalin kode yang mencoba mem-parse content_for_header. Isinya bisa berubah kapan saja, dan kode yang bergantung ke isinya bakal berubah perilakunya (termasuk ngerusak CAPTCHA dari 50 Trust & Security CAPTCHA dan Security Badges).

❌ gagal

{% assign parts = content_for_header | split: ',' %}

✅ satu-satunya pemakaian yang boleh

{{ content_for_header }}

Nonaktifin gak disarankan.

DefaultLocale (1.x saja)

Mastiin ada default locale file (en.default.json). Gagal: locales/ cuma berisi en.json, fr.json, zh-TW.json. Lolos: en.default.json. Auto-correct bikin en.default.json kosong. Di 2.x dihapus, tapi aturannya tetap berlaku (Shopify nolak theme tanpa default), dari 33 Locales dan Translasi > 1. Default Locale File.

DeprecateBgsizes

Warning. Ngelarang ekstensi lazysizes bgset (class="lazyload" + data-bgset) buat background image responsif, ganti dengan CSS image-set() native. Alasannya umum: library pihak ketiga vs fitur browser native, bundle JavaScript besar.

❌ gagal

<script src="ls.bgset.min.js"></script>
<script src="lazysizes.min.js"></script>
<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
</div>

✅ lolos

.box {
  background-image: -webkit-image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

Aman dinonaktifin.

DeprecateLazysizes

Warning. Ngelarang library lazysizes buat lazy-load gambar, iframe, script. Ngenalin class lazyload, atribut data-srcset, data-sizes, dan data-sizes="auto". Ganti dengan loading="lazy" native. Ini yang 59 Performance Gambar dan LCP > Jangan Lazy-load Gambar LCP bahas: data-src nyembunyiin URL dari preload scanner.

❌ gagal

<img src="a.jpg" class="lazyload" />

✅ lolos

<img src="a.jpg" loading="lazy" />

Nonaktifin cuma kalau kamu mau ndukung lazy-load di browser yang gak ndukung loading="lazy" (praktis udah gak ada).

DeprecatedFilter

Warning, auto-correct. Ngelarang filter deprecated dari 18 Filters String, Math, dan Array dan 19 Filters HTML, URL, Media, Color, dan Font > 3. Filter Gambar yang Deprecated.

❌ gagal

.site-footer p {
  color: {{ settings.color_name | hex_to_rgba: 0.5 }};
}

✅ lolos

.site-footer p {
  color: {{ settings.color_name | color_modify: 'alpha', 0.5 }};
}

--auto-correct ngeganti img_url jadi image_url di mana bisa. Nonaktifin gak disarankan.

DeprecatedFontsOnSectionsAndBlocks

Warning. Nandain font deprecated (31 Dynamic Sources dan Fonts > 6. Font yang Deprecated) di schema section dan block: di default setting font_picker, di settings preset, dan di setting block preset. Contoh gagal: "default": "helvetica_n4" dan "title": "helvetica_n4" di preset. Perbaiki dengan handle dari font library yang masih aktif (sans_serif_n4). Nonaktifin gak disarankan karena font deprecated lagi di-phase out dan bisa rusak waktu dihapus.

DeprecatedFontsOnSettingsData

Warning. Sama, di config/settings_data.json: di current, di setting block bersarang, dan di presets. Berlaku buat string apapun yang cocok handle font deprecated. Nonaktifin gak disarankan.

DeprecatedFontsOnSettingsSchema

Warning. Sama, di default setting font_picker di settings_schema.json. Nonaktifin gak disarankan.

DeprecatedGlobalAppBlockType (1.x saja)

Ngelarang tipe block @global yang deprecated buat app block, ganti @app di schema dan di case/if block.type. Detail app block di 28 Blocks.

DeprecatedTag

Warning. Ngelarang tag deprecated, dengan implementasi per tag. Yang paling umum: include yang masih banyak dipakai theme lama.

❌ gagal

{% include 'snippet' %}

✅ lolos

{% render 'snippet' %}

Nonaktifin gak disarankan. Alias 1.x: DeprecatedTags (dan ConvertIncludeToRender digabung ke sini).

DuplicateContentForArguments

Warning. Tiap argumen bernama ke content_for cuma boleh sekali.

❌ gagal

{% content_for 'block', type: 'example-block', some_input: 'text', some_input: 'more text' %}

✅ lolos

{% content_for 'block', type: 'example-block', some_input_1: 'text', some_input_2: 'more text' %}

Nonaktifin gak disarankan.

DuplicateRenderSnippetArguments

Warning. Sama buat render.

❌ gagal

{% render 'example-snippet', some_input: 'text', some_input: 'more text' %}

✅ lolos

{% render 'example-snippet', some_input_1: 'text', some_input_2: 'more text' %}

EmptyBlockContent

Warning. {% content_for 'blocks' %} dipakai tapi array blocks di schema kosong atau gak ada, jadi gak bakal ada yang dirender dan merchant gak bisa nambah block (29 Theme Blocks Mendalam > 5. Pakai di Section).

❌ gagal

<div>
{% content_for 'blocks' %}
</div>
{% schema %}
{
  "name": "Test",
  "blocks": []
}
{% endschema %}

✅ lolos

<div>
{% content_for 'blocks' %}
</div>
{% schema %}
{
  "name": "Test",
  "blocks": [
    {
      "type": "text"
    }
  ]
}
{% endschema %}

Nonaktifin gak disarankan.

HardcodedRoutes

Warning. Ndorong object routes daripada URL hardcode, biar theme ndukung multi bahasa dan perubahan format URL (47 Markets Multi Currency, Multi Bahasa, Localization > URL Sadar Locale).

❌ gagal

<form action="/search" method="get" role="search">

✅ lolos

<form action="{{ routes.search_url }}" method="get" role="search">

Aman dinonaktifin, tapi kamu bakal nyesel di toko multi bahasa.

ImgLazyLoading (1.x saja)

Dulu nyaranin loading="lazy" di semua <img>. Dihapus karena lazy loading terbukti lebih merugikan kalau dipakai di mana-mana, terutama di gambar LCP. Kalau kamu ketemu di config lama, hapus. Aturan yang benar sekarang ada di 59 Performance Gambar dan LCP: loading="lazy" cuma buat elemen di luar viewport awal, dan loading="auto" udah deprecated.

ImgWidthAndHeight

Error. Memaksa atribut width dan height di <img> buat nyegah CLS (59 Performance Gambar dan LCP > width dan height: Nyegah CLS). Tanpa itu, browser nganggap tinggi 0px sampai gambar dimuat, dan halaman bergeser, yang ngerusak ranking mobile.

❌ gagal (termasuk nilai dengan satuan px)

<img alt="cat" src="cat.jpg" />
<img alt="cat" src="cat.jpg" width="100px" height="100px" />
<img alt="{{ image.alt }}" src="{{ image.src }}" />

✅ lolos

<img alt="cat" src="cat.jpg" width="100" height="200" />
<img
  alt="{{ image.alt }}"
  src="{{ image.src }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
/>

Tetap butuh CSS width (max-width: 100%; height: auto) biar responsif. Nonaktifin gak disarankan, kecuali kamu pakai metode lain kaya aspect ratio box buat mereservasi ruang. image_tag ngasih atribut ini otomatis.

JSONMissingBlock

Error. Template JSON ngerujuk tipe block yang gak valid: file blocks/<type>.liquid gak ada, atau tipenya ada tapi gak dideklarasiin di level root blocks schema section/block induknya. Ini validasi yang sama dengan aturan targeting di 29 Theme Blocks Mendalam > Targeting: Block Mana yang Boleh. Tiga kasus gagal: block invalid-block tanpa file; block text di section yang schema-nya cuma nerima image; block bersarang missing_nested di dalam block text yang cuma nerima image. Lolos: tipe yang ada di /blocks dan ada di blocks schema induk langsungnya (atau @theme). Nonaktifin gak disarankan.

JSONMissingSection

Error. Tiap tipe section di template JSON (templates/*.json) atau section group (sections/*.json) harus punya file sections/<type>.liquid. Shopify ngejalanin validasi yang sama waktu upload/publish, jadi check ini ngangkatnya lebih awal. Pengecualian: apps dan _blocks (Shopify nyediain default-nya), entri tanpa type, dan type level atas section group (header, footer) yang bukan rujukan section.

❌ gagal, sections/featured-collection.liquid gak ada

{
  "sections": {
    "featured-collection": {
      "type": "featured-collection"
    }
  },
  "order": ["featured-collection"]
}

Nonaktifin gak disarankan: theme yang ngerujuk section yang gak ada ditolak waktu upload.

JSONSyntaxError

Error. JSON gak valid di file theme.

❌ gagal

{
"key": "value" %
}
{
"quotes": 'These are single quotes'
}

✅ lolos (perhatiin trailing comma diterima, karena JSON theme Shopify toleran, dari 21 Gambaran Arsitektur Theme > JSON dengan Komentar)

{
"key": "value",
}

Nonaktifin gak disarankan. Alias 1.x: ValidJson.

LiquidFreeSettings

Warning. Nilai setting gak boleh berisi tag logika {% %}. Yang dicek cuma tag logika; tag output {{ }} boleh, karena dipakai referensi palet warna dan visible_if (30 Settings dan Input Settings).

❌ gagal

{% schema %}
{
  "name": "Section name",
  "settings": [
    {
      "id": "input_with_logic",
      "type": "text",
      "label": "Input with Logic",
      "default": "Hello {% if user %} User {% endif %}!"
    }
  ]
}
{% endschema %}

✅ lolos (output tag boleh)

{% schema %}
{
  "name": "Section name",
  "settings": [
    {
      "id": "heading_color",
      "type": "color",
      "label": "Heading color",
      "default": "{{ settings.colors.primary }}"
    }
  ]
}
{% endschema %}

Nonaktifin gak disarankan. Kalau merchant butuh Liquid di nilai setting, itu gunanya tipe setting liquid.

LiquidHTMLSyntaxError

Error. Syntax error Liquid dan HTML: tag gak ditutup, %} hilang, }} yang salah, tag gak dikenal, filter di dalam kondisi.

❌ gagal

<a>unclosed
{% include 'muffin'
{% assign foo = 1 }}
{% unknown %}
{% if collection | size > 0 %}

✅ lolos

<a>closed</a>
{% include 'muffin' %}
{% assign foo  = 1 %}
{% if collection.size > 0 %}{% endif %}

Perhatiin baris terakhir: filter gak boleh di dalam if, pakai properti .size. Nonaktifin gak disarankan. Alias 1.x: HtmlParsingError, SyntaxError. Ini juga aturan yang paling relevan buat 69 Migrasi ke Strict Liquid Parser.

LiquidTag (1.x saja)

Nyaranin {% liquid %} kalau ada 4+ tag Liquid berturut-turut (opsi min_consecutive_statements, default 5), buat ngilangin {% %} berulang. Dihapus di 2.x karena soal gaya, tapi sarannya tetap bagus (10 Tags Variabel dan Percabangan):

{%- liquid
if collection.image.size != 0
  assign collection_image = collection.image
elsif collection.products.first.size != 0 and collection.products.first.media != empty
  assign collection_image = collection.products.first.featured_media.preview_image
else
  assign collection_image = nil
endif
-%}

Ringkasan

  1. App block: AppBlockMissingSchema (schema wajib), AppBlockValidTags (tanpa javascript/stylesheet/include/layout/section), AssetSizeAppBlock* (100.000 CSS, 10.000 JS, aktif di app build).
  2. Performa: AssetPreload (filter, bukan <link>), AssetSizeCSS/AssetSizeJavaScript (opt-in, byte mentah), CdnPreconnect (redundan), DeprecateBgsizes/DeprecateLazysizes (native, bukan library), ImgWidthAndHeight (dimensi tanpa px), HardcodedRoutes (routes).
  3. Deprecated: DeprecatedFilter (auto-correct img_url), DeprecatedTag (include → render), DeprecatedFontsOn* (handle font aktif di schema section/block, settings_schema.json, settings_data.json), DeprecatedGlobalAppBlockType (1.x, @global → @app).
  4. Block dan content_for: BlockIdUsage (jangan bandingin block.id), Duplicate*Arguments (argumen unik), EmptyBlockContent (content_for 'blocks' butuh blocks di schema), JSONMissingBlock (tipe block harus ada dan dideklarasiin di induk).
  5. JSON dan syntax: JSONMissingSection (file section harus ada, kecuali apps/_blocks), JSONSyntaxError (trailing comma boleh, kutip tunggal gak), LiquidHTMLSyntaxError, LiquidFreeSettings ({% %} dilarang di nilai setting, {{ }} boleh), ContentForHeaderModification (cuma {{ content_for_header }}).
  6. 1.x yang dihapus: DefaultLocale, ImgLazyLoading (lazy di mana-mana merugikan), LiquidTag, DeprecatedGlobalAppBlockType.

Bab selanjutnya kita lanjutkan kamusnya dari MatchingTranslations sampai VariableName, termasuk keluarga aturan LiquidDoc, render/content_for argument, schema preset, static block, dan ValidScopedCSSClass.

Tampilan Grafik

Tautan Balik