Sayudha

28 Blocks

Properties2
descriptionTiga jenis block (section block, theme block, app block), bedanya sama snippet, cara nerima app block dan wrapper apps.liquid, praktik terbaik layout block, dan theme block hasil AI
tagsshopify, theme, arsitektur

12 menit baca

Di 26 Sections dan Section Schema kita udah bikin block di dalam schema section. Sekarang kita lihat gambaran besarnya: ada tiga jenis block, dan yang di section itu cuma satu di antaranya.

Block bikin developer bisa bikin layout yang luwes dengan mecah section jadi potongan Liquid yang lebih kecil dan bisa dipakai ulang. Tiap block punya setting sendiri, dan bisa ditambah, dihapus, dan diurutin merchant di dalam section.

Tiga Jenis Block

  1. Theme block, dibikin sebagai file Liquid sendiri di folder /blocks, dan bisa dipakai di banyak section. Bisa nerima block lain di dalamnya (bersarang).
  2. Section block, dibikin di dalam file Liquid section (di schema-nya), dan cuma bisa dipakai di section itu.
  3. App block, disediain app yang dipasang merchant di tokonya.

Batasnya: maksimal 300 theme block per theme. Yang dihitung semua file .liquid di /blocks, termasuk block hasil AI dan block yang gak dirujuk section manapun. Begitu penuh, gak bisa nambah sampai ada yang dihapus.

Bab ini bahas gambaran ketiganya, section block, app block, dan praktik terbaik. Theme block yang paling kaya fiturnya dibedah tuntas di 29 Theme Blocks Mendalam.

Theme Block: Yang Paling Luwes

Theme block ngasih fleksibilitas paling besar waktu bikin section. Sebagai developer kamu bisa:

  1. Ngebolehin merchant nambahin block apapun yang tersedia.
  2. Membatasi section ke tipe block tertentu.
  3. Bikin block bersarang di dalam block lain.
  4. Bikin static block yang posisinya dipaku di bagian tertentu kode, di dalam section atau block induknya. Merchant bisa nyembunyiin static block, tapi gak bisa ngehapus.

Contoh section slideshow yang dibikin pakai theme block:

  1. Section-nya cuma nerima block slide.
  2. Tiap block slide bisa berisi block apapun yang ada di theme, atau dari app.
  3. Ada static block “Slideshow Controls” yang terkunci di tempatnya.

Hasilnya: merchant bebas ngatur isi tiap slide, tapi kontrol navigasinya tetap konsisten.

Section Block: Yang Paling Sederhana

Section block itu block yang didefinisikan langsung di schema section, kaya yang udah kita lihat di 26 Sections dan Section Schema > 6. blocks. Batasannya:

  1. Cuma bisa dipakai di section tempat dia didefinisikan. Mau block “heading” yang sama di section lain? Harus definisi ulang.
  2. Cuma satu tingkat, gak bisa bersarang.
  3. Gak bisa dipakai bareng theme block di section yang sama.

Definisinya di array blocks schema section:

{
  "name": "Example section",
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Hello, world!"
        }
      ]
    }
  ]
}

Render-nya dengan loop section.blocks dan cocokin block.type:

{% for block in section.blocks %}
  {%- case block.type -%}
    {%- when "heading" -%}
      <h1 {{ block.shopify_attributes }}>{{ block.settings.heading }}</h1>
  {% endcase %}
{% endfor %}

Dan ulangan peringatan dari bab sebelumnya: jangan ngandelin nilai literal block.id, karena dibikin dinamis dan bisa berubah.

Kapan pakai section block? Kalau block-nya emang cuma masuk akal di satu section dan gak butuh bersarang. Misalnya block “slide” yang cuma ada di slideshow, atau block “kolom” yang cuma ada di section multi-kolom. Buat block yang mau dipakai di banyak tempat (heading, teks, tombol, gambar), pakai theme block.

Theme Block vs Snippet

Ini pertanyaan yang sering muncul karena dua-duanya buat pakai ulang kode. Bedanya di siapa yang ngatur:

Theme block:

  1. Nampilin setting di theme editor.
  2. Merchant bisa kustomisasi tiap instance.
  3. Bisa akses section induknya dan object global.
  4. Gak bisa nerima variabel dari kode induk.

Snippet (dari 21 Gambaran Arsitektur Theme > Snippets):

  1. Buat markup berulang tanpa kustomisasi merchant.
  2. Nerima variabel dari kode induk lewat parameter render.
  3. Gak muncul di theme editor.

Seringnya dipakai bareng. Kartu produk misalnya:

  1. Theme block buat struktur keseluruhan dan setting-nya (tampilin vendor? tampilin rating?).
  2. Snippet buat potongan markup dan logika templating yang dipakai ulang di banyak block lain (format harga, badge diskon).

❌ salah, snippet buat sesuatu yang merchant harus bisa atur per instance

snippets/hero-banner.liquid  ← merchant gak bisa ganti teks tiap banner

✅ benar

blocks/hero-banner.liquid  ← tiap instance punya setting sendiri di theme editor

App Block

App block bikin merchant bisa nambahin fungsi dari app ke theme (ulasan, rating, form kustom) tanpa ngedit kode theme. Block-nya didefinisikan sama app yang dipasang merchant, lewat mekanisme theme app extension.

Kalau section-mu ada di template JSON, kamu harus mendukung block bertipe @app. Ini bukan cuma saran: theme yang gak mendukung app block bakal bikin merchant frustrasi karena app yang mereka pasang gak bisa dipakai.

Catatan: @app gak didukung di section yang dirender statis.

Merchant bisa nambahin app block dengan dua cara: ke section yang udah ada, atau sebagai section baru. Buat cara kedua, Shopify otomatis ngebungkus app block-nya dalam wrapper section bernama Apps, yang bisa kamu kustomisasi (dibahas di bawah).

Ada tiga langkah buat mendukung app block di section atau theme block:

1. Tambahin @app di Schema

Sertakan block generik bertipe @app:

"blocks": [
  {
    "type": "@app"
  }
]

@app gak nerima parameter limit. Kalau ditambahin, error.

❌ salah

"blocks": [
  { "type": "@app", "limit": 2 }
]

✅ benar

"blocks": [
  { "type": "@app" }
]

Buat theme block yang mau nerima theme block lain dan app block:

{% schema %}
{
"name": "Slide",
"blocks": [{ "type": "@theme" }, { "type": "@app" }],
// Rest of your Schema code

2. Render Block-nya

Kalau section atau theme block-mu pakai theme block, render-nya lewat {% content_for 'blocks' %} dari 12 Tags Khusus Theme > content_for yang udah nanganin app block juga:

<div class="group">
  {% content_for 'blocks' %}
</div>

Kalau section-mu pakai section block, app block dirender bareng block lain di loop, dengan {% render block %} buat tipe @app:

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

{% render block %} di sini itu bentuk khusus tag render dari 12 Tags Khusus Theme > render yang nerima object block (bukan nama file), dan ngerender isi app block-nya.

3. Setting Section yang Valid

Buat mencegah kerancuan sama autofill setting app block (app block bisa otomatis ngambil produk dari section induknya), section yang mendukung app block cuma boleh punya satu setting sumber daya per tipe. Satu setting product, satu setting collection, gak boleh dua setting product.

Contoh implementasi lengkapnya ada di section main-product.liquid Dawn.

Wrapper App Block

Waktu merchant nambahin app block langsung ke template (bukan ke dalam section), app block itu bukan section, jadi butuh dibungkus. Shopify nentuin pembungkusnya dengan urutan:

1. apps.liquid dari Theme

Kalau theme punya file sections/apps.liquid, Shopify pakai itu buat ngebungkus app block level atas. Ini ngasih kamu kontrol penuh atas tampilannya.

Syaratnya: schema-nya mendukung @app dan punya preset. Kalau salah satu gak ada, theme editor ngasih error Apps not supported atau Apps section is invalid, dan merchant gak bisa pakai.

2. _blocks.liquid dari Theme

Kalau apps.liquid gak ada, Shopify nyari sections/_blocks.liquid. Ini pembungkus yang lebih umum, buat @app dan @theme yang ditambahin langsung ke template.

Syaratnya: mendukung @theme dan @app, dan punya preset.

3. apps.liquid dari Platform

Kalau dua-duanya gak ada, Shopify pakai pembungkus bawaannya.

Aturan tambahan buat apps.liquid: schema-nya gak boleh punya atribut templates, termasuk di dalam enabled_on atau disabled_on. Section ini harus tersedia di semua template.

Contoh minimal:

{% for block in section.blocks %}
  {% render block %}
{% endfor %}
{% schema %}
  {
    "name": "App wrapper",
    "settings": [],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}

Contoh dengan setting biar merchant bisa nyamain margin app section sama layout theme:

<div class="{% if section.settings.include_padding %}padded{% endif %}">
  {% for block in section.blocks %}
    {% render block %}
  {% endfor %}
</div>
{% schema %}
  {
    "name": "App wrapper",
    "settings": [
      {
        "type": "checkbox",
        "id": "include_padding",
        "default": true,
        "label": "Make section margins the same as theme"
      }
    ],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}

Catatan: apps.liquid bukan section biasa. Gak bisa dirender manual pakai {% section 'apps' %}, dan gak muncul di theme editor buat ditambahin merchant. Dia cuma dipakai Shopify sebagai pembungkus.

Praktik Terbaik Block

Waktu ngerancang theme, pikirin kapan sesuatu jadi section dan kapan jadi block. Block itu buat nambah, ngehapus, atau ngurutin konten di level section, atau kalau bikin section-nya lebih enak dipakai.

Tiga prinsip:

  1. Setting harus di-scope ke block-nya. Setting yang cuma ngaruh ke satu block ya taruh di block itu, bukan di section.
  2. Pilih layout block yang cocok buat kontennya, dan pastiin block-nya mengalir logis apapun tipe dan urutannya.
  3. Pilih tingkat fleksibilitas yang pas.

1. Layout Block

Waktu ngerancang grid buat section, pastiin block-nya punya alur baca yang logis apapun tipe dan urutannya:

  1. Tumpuk vertikal buat konten teks yang butuh hierarki (judul di atas, teks di bawah, tombol paling bawah).
  2. Kalau gak butuh hierarki, tumpuk horizontal atau bikin grid yang menyesuaikan sama tipe block yang ada.
  3. Kalau horizontal, pastiin grid-nya bisa wrap ke beberapa baris atau sediain kontrol geser biar lebar block tetap nyaman. Jangan meres block biar muat di layar sempit.
  4. Jangan ngandelin tipe atau urutan block tertentu buat ngerancang layout, dan jangan pakai urutan block buat ngubah grid. Kalau layout tiga kolom itu wajib, kelompokkan setting-nya ke satu block, bukan tiga block yang harus diurutin merchant dengan benar.

❌ salah, layout rusak kalau merchant naruh block gambar di posisi kedua

Grid dua kolom yang ngasumsiin block pertama selalu gambar, block kedua selalu teks

✅ benar, satu block “image with text” yang punya setting gambar, teks, dan posisi

Block dengan setting image, text, dan layout (image_first / text_first)

2. Fleksibilitas

Terlalu banyak block bikin berantakan dan rumit, baik di kode maupun di theme editor:

  1. Kelompokkan setting ke dalam block biar sidebar editor rapi. Misalnya setting gambar (gambar, alt, posisi) dijadiin satu block gambar, bukan tiga block terpisah.
  2. Kalau elemen punya hierarki tetap, kelompokkan jadi satu block dan opsional sediain titik sisip sebelum dan sesudahnya. Misalnya satu block yang ngatur baris item keranjang.
  3. Hindari block yang terlalu granular. Penulis, tanggal, dan jumlah komentar artikel itu satu block (atau bahkan cuma setting), bukan tiga block.

3. Pertimbangan App Block

Kapan sebuah section perlu mendukung app block:

  1. Sediain di section yang punya kasus jelas buat nambah alat konversi atau faktor keputusan beli. Info produk di halaman produk, atau template keranjang.
  2. Pikirin antifragility dan tujuan section. Apakah layout gampang rusak kalau ada tipe block yang gak terduga? Apakah butuh CSS khusus buat nanganin block-block itu? Apakah tujuan section jadi kabur? Kalau iya, jangan dukung app block di situ.

4. Metafield

Shopify nyediain berbagai metafield standar yang cocok buat segmen target theme-mu. Lihat apa yang tersedia dan pikirin kasus pakainya. Misalnya section atau block buat panduan perawatan atau tabel ukuran dari metafield. Waktu dirujuk sebagai dynamic source, metafield ini otomatis ngikutin konteksnya (produk yang lagi dirender). Bahasannya di 31 Dynamic Sources dan Fonts.

Saran praktis: bikin block khusus buat metafield. Audit website e-commerce di segmen target theme-mu, lihat gimana mereka nampilin konten, dan cari peluang bikin komponen khusus. Daftar info produk elektronik yang rapi, atau info blend dan asal kopi, itu semua metafield yang dibungkus block.

Theme Block Hasil AI

Di theme editor, merchant (yang memenuhi syarat) bisa bikin theme block pakai Sidekick: mereka deskripsiin block yang diinginkan dalam teks biasa, dan Sidekick bikin kode Liquid-nya lengkap dengan HTML, CSS/JavaScript kalau perlu, dan schema JSON.

Dari sudut pandang developer, block hasil AI ini theme block biasa:

  1. Disimpan di folder /blocks bareng theme block lain.
  2. Bisa ditambahin ke section atau theme block manapun yang mendukung theme block.
  3. Dihitung dalam batas 300 theme block.

Buat section-mu bisa nerima block hasil AI, dia harus nerima theme block, yaitu punya tipe @theme di blocks schema-nya.

Wrapper _blocks.liquid

Block hasil AI bukan section, jadi waktu merchant bikin block di section baru, Shopify ngebungkusnya pakai section _blocks.liquid bawaan. Kamu bisa override dengan bikin sections/_blocks.liquid sendiri, dengan empat syarat:

  1. Mendefinisikan @theme dan @app sebagai tipe block.
  2. Punya presets.
  3. Pakai {% content_for 'blocks' %}.
  4. Gak punya atribut templates, termasuk di enabled_on dan disabled_on.

Kalau ada yang gak terpenuhi, code editor ngasih error dan merchant gak bisa pakai. Contoh dengan setting margin biar konsisten sama theme:

{% content_for 'blocks' %}
{% schema %}
{
  "name": "Section",
  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
  "settings": [
    {
      "type": "range",
      "id": "section-margin",
      "label": "",
      "min": 0,
      "max": 50,
      "default": 0,
      "unit": "px"
    },
  ],
  "presets": [
    {
      "name": "Section"
    }
  ]
}
{% endschema %}

Sama kaya apps.liquid: _blocks.liquid gak bisa dirender manual dan gak muncul di theme editor.

Ringkasan

  1. Tiga jenis block: theme block (file di /blocks, dipakai di banyak section, bisa bersarang), section block (di schema section, cuma buat section itu, satu tingkat), app block (dari app merchant).
  2. Maksimal 300 theme block, semua file .liquid di /blocks dihitung, termasuk yang gak dipakai.
  3. Section block gak bisa bersarang dan gak bisa dicampur theme block di section yang sama.
  4. Theme block vs snippet: theme block buat yang merchant atur per instance, snippet buat markup berulang yang nerima variabel dari kode. Sering dipakai bareng.
  5. Section di template JSON wajib mendukung @app, dan @app gak nerima limit, gak jalan di section statis.
  6. Render app block lewat {% content_for 'blocks' %} (theme block) atau {% render block %} di loop (section block).
  7. Section yang mendukung app block cuma boleh satu setting sumber daya per tipe.
  8. Wrapper app block dicari berurutan: apps.liquid theme → _blocks.liquid theme → bawaan platform. Dua-duanya butuh preset, gak boleh punya templates, dan gak bisa dirender manual.
  9. Layout block harus logis apapun urutannya, jangan ngandelin urutan block buat layout, kelompokkan setting yang wajib bareng ke satu block.
  10. Jangan terlalu granular: penulis, tanggal, komentar itu satu block.
  11. Dukung app block cuma di section yang emang butuh dan gak gampang rusak.
  12. Block hasil AI itu theme block biasa, butuh section yang nerima @theme, dan dibungkus _blocks.liquid yang bisa kamu override.

Bab selanjutnya kita bedah theme block sampai tuntas: quick start bikin theme block pertama, schema-nya, static block, targeting biar block cuma muncul di tempat yang tepat, dan dynamic sources.

Tampilan Grafik

Tautan Balik