Sayudha

06 Theme Editor dan Code Editor

Properties2
descriptionDua editor di dalam Shopify admin, cara theme kita nyambung ke theme editor, dan aturan live preview
tagsshopify, theme, dasar

10 menit baca

Di 05 Shopify CLI kita ngoding dari komputer sendiri. Sekarang kita lihat dua alat yang hidup di dalam Shopify admin, karena merchant kerjanya di sana, bukan di terminal.

Ada dua editor di Shopify admin, dan fungsinya beda jauh:

  1. Theme editor, editor visual buat merchant ngatur isi dan tampilan toko tanpa nyentuh kode. Ini yang dipakai merchant sehari-hari.
  2. Code editor, editor kode di browser buat ngedit file theme langsung. Ini buat developer yang mau edit cepat tanpa setup lokal.

Sebagai developer, kamu harus paham dua-duanya, terutama theme editor, karena theme yang kamu bikin harus enak dipakai merchant di situ. Theme yang bagus di kode tapi berantakan di theme editor itu theme yang gagal.

Theme Editor

Theme editor itu alat yang bikin merchant bisa ngubah konten dan tampilan toko, dan lihat hasilnya secara langsung. Di layar kiri ada panel pengaturan, di kanan ada preview toko yang update real-time.

Tugas kita sebagai developer ada dua:

  1. Nyediain pengaturan (settings) yang bisa diubah merchant.
  2. Mecah fungsi theme jadi section dan block yang bisa merchant tambah, hapus, dan urutin. Bahasannya di 54 Best Practices Umum.

Dan satu prinsip yang dipegang terus: apa yang merchant lihat di preview theme editor harus persis sama dengan yang pengunjung lihat di toko yang tayang. Kalau beda, merchant bakal bingung dan gak percaya sama theme-mu.

1. Cara Bukanya

Buat merchant:

  1. Di Shopify admin, buka Online Store > Themes.
  2. Cari theme-nya, klik Customize.

Buat kita waktu lagi ngoding, ada tiga jalan:

  1. Jalanin theme sebagai development theme atau push ke toko pakai CLI. Ingat, perintah shopify theme dev udah ngasih link ke theme editor.
  2. Nyambungin branch GitHub ke toko lewat GitHub integration.
  3. Upload theme sebagai ZIP ke toko.

Pilih yang paling masuk akal buat alur kerjamu.

2. Dari Mana Pengaturannya Datang

Pengaturan yang muncul di theme editor itu sepenuhnya ditentuin sama theme. Merchant gak bisa nambah pengaturan sendiri. Ada dua tempat kita nulisnya:

  1. File config/settings_schema.json buat pengaturan global theme (warna utama, font, dan sebagainya). Bahasannya di 32 Config settings_schema.json, settings_data.json, markets.json.
  2. Atribut settings di dalam schema tiap section. Bahasannya di 26 Sections dan Section Schema.

Waktu merchant ngubah pengaturan lewat theme editor, nilainya disimpan otomatis. Semua jenis pengaturan yang bisa dibikin ada di 30 Settings dan Input Settings.

Live Preview

Ini bagian yang paling teknis di bab ini, tapi penting banget.

Bawaannya, tiap merchant ngubah sesuatu di theme editor, preview-nya di-refresh ulang. Tapi buat beberapa jenis pengaturan, theme editor bisa nampilin perubahannya secara langsung tanpa refresh, jadi merchant geser slider warna dan tokonya langsung berubah warnanya. Ini yang namanya live preview.

Yang mendukung live preview cuma dua kategori: pengaturan warna dan pengaturan teks. Dan dua-duanya punya syarat yang kalau gak dipenuhi, live preview-nya gak jalan dan balik ke refresh biasa.

1. Pengaturan Warna

Buat pengaturan yang ngasih object color (tipe color dan color_background), live preview jalan kalau kamu nulisnya di dalam tag {% style %} di template, section, atau snippet. Boleh pakai object-nya langsung atau properti red, green, blue, dan rgb-nya.

Nah, ini rahasia cara kerjanya yang bikin ada batasan: di dalam theme editor, nilai warna di dalam {% style %} itu gak dirender sebagai warna, tapi sebagai CSS variable kaya var(--shopify-variable). Makanya bisa langsung berubah tanpa refresh, karena yang diubah cuma nilai variabelnya.

Akibatnya: filter Liquid apapun yang kamu tempel ke pengaturan warna itu bakal beroperasi ke string CSS variable, bukan ke nilai warnanya. Jadi hasilnya ngaco dan live preview-nya gak jalan.

❌ salah, replace beroperasi ke string var(--...), bukan ke nilai rgb-nya

{% style %}
  .h1 {
    color: {{ settings.colors_accent_2.rgb | replace: ' ', ',' }};
  }
{% endstyle %}

Hal yang sama kejadian sama filter default. Di theme editor, nilai pengaturannya gak pernah nil karena udah jadi string CSS variable, jadi default gak pernah kepakai. Hasilnya: preview di editor beda sama toko yang tayang, dan itu pelanggaran prinsip tadi.

Jalan keluarnya: tempelin filter-nya di luar {% style %}, simpan ke variabel Liquid, terus pakai variabelnya di dalam. Dengan begitu filter-nya jalan di editor maupun di toko:

✅ benar, filter diterapkan di luar, hasilnya dipakai di dalam

{% assign color_value = settings.colors_accent_1 | default: '#000000' %}
{% style %}
  .h1 {
    color: {{ color_value }};
  }
{% endstyle %}

Batasan kedua: live preview gak jalan buat warna yang dipakai di file CSS di folder /assets, karena file itu statis. Solusinya: deklarasiin CSS variable di layout/theme.liquid, terus pakai variabelnya di file CSS-mu. Dawn ngelakuin persis ini, deklarasinya di theme.liquid dan pemakaiannya di base.css.

✅ pola yang disarankan, variabel di layout, pemakaian di CSS

{% comment %} di layout/theme.liquid {% endcomment %}
{% style %}
  :root {
    --color-accent: {{ settings.colors_accent_1 }};
  }
{% endstyle %}
/* di assets/base.css */
.button {
  background: var(--color-accent);
}

2. Pengaturan Teks

Live preview juga jalan buat teks biasa maupun rich text: tipe text, textarea, inline_richtext, dan richtext. Tapi syaratnya empat, dan semuanya soal gimana kamu nulis HTML di sekitar pengaturannya. Logikanya: theme editor harus bisa nemuin elemen mana yang harus diganti isinya, jadi strukturnya harus jelas.

Syarat 1: nilai pengaturan harus jadi satu-satunya anak dari elemen HTML induknya.

✅ benar, sendirian di dalam <h1>

<h1>{{ section.settings.title }}</h1>

✅ benar juga, dibungkus <span> sendiri jadi tetap sendirian di induknya

<h1><span class="icon">...</span> <span>{{ section.settings.title }}</span></h1>

❌ salah, ada saudara (<span> ikon) di dalam <h1> yang sama tanpa pembungkus

<h1><span class="icon">...</span> {{ section.settings.title }}</h1>

Syarat 2: gak boleh ada filter Liquid, kecuali escape.

✅ benar

<h1>{{ section.settings.title | escape }}</h1>

❌ salah

<h1>{{ section.settings.title | replace: ' ', '-' }}</h1>

Syarat 3: gak boleh ada markup Liquid lain yang mendahului, mengikuti, atau membungkus pengaturannya di dalam elemen induk.

✅ benar, logika Liquid-nya di luar <h1>

{%- when 'heading' -%}
  <h1>{{ block.settings.title }}</h1>
{%- endwhen -%}

❌ salah, ada assign di dalam <h1>

<h1>
  {%- assign title = block.settings.title -%}
  {{ title }}
</h1>

❌ salah, when membungkus di dalam <h1>

<h1>
  {%- when 'heading' -%}
    {{ block.settings.title }}
  {%- endwhen -%}
</h1>

Syarat 4: elemennya gak boleh disembunyiin waktu halaman dimuat.

❌ salah, kalau judulnya kosong <h1>-nya gak ada, jadi gak ada yang bisa di-update live

{%- unless block.settings.title == blank -%}
    <h1>{{ block.settings.title }}</h1>
{%- endunless -%}

Kalau salah satu syarat gak terpenuhi, gak ada error, cuma live preview-nya diam-diam gak jalan dan balik ke refresh biasa. Jadi kalau merchant komplain “kok pas ngetik judul gak langsung berubah”, cek empat syarat ini.

Integrasi Theme dengan Theme Editor

Theme kita harus berperilaku sama di editor dan di toko. Tapi ada beberapa kasus di mana kita perlu tau kalau lagi di dalam editor, buat:

  1. Matiin kode yang cuma boleh jalan waktu dilihat pengunjung beneran, misalnya skrip analitik. Kita gak mau klik-klik merchant di editor keitung sebagai kunjungan.
  2. Nyalain atau matiin kode yang cuma relevan waktu diedit, misalnya nampilin pesan error dari API pihak ketiga ke merchant, tapi gak pernah ke pengunjung.
  3. Mastiin kode yang perlu dijalanin atau dibersihin waktu section ditambah, dihapus, diubah, atau dipindah.

Satu peringatan keras: jangan pakai deteksi ini buat ngubah tampilan preview di editor. Preview yang dilihat merchant harus tetap sama dengan yang dilihat pengunjung. Deteksi ini cuma buat urusan di balik layar.

1. Deteksi Lewat Liquid

Pakai variabel global request.design_mode, nilainya true waktu lagi di theme editor, false kalau nggak:

{% if request.design_mode %}
<!-- Cuma dirender di theme editor -->
{% endif %}

2. Deteksi Lewat JavaScript

Pakai variabel global Shopify.designMode, nilainya true di theme editor, undefined kalau nggak:

if (Shopify.designMode) {
  // Cuma jalan di theme editor
}

Contoh pemakaian yang benar, matiin pelacakan di editor:

✅ benar, tracking cuma jalan buat pengunjung beneran

{% unless request.design_mode %}
  <script src="{{ 'analytics.js' | asset_url }}" defer></script>
{% endunless %}

3. Event JavaScript dari Theme Editor

Waktu merchant berinteraksi dengan section atau block di theme editor (nambah, hapus, pilih, pindah), atau nyalain preview inspector, theme editor nembak event JavaScript yang bisa kita dengerin. Ini penting buat komponen yang butuh inisialisasi ulang, misalnya slider yang harus dihitung ulang waktu section-nya baru ditambah. Bahasan lengkapnya di 54 Best Practices Umum.

Code Editor

Sekarang alat kedua. Code editor itu buat lihat dan edit kode theme langsung di Shopify admin, tanpa install apa-apa. Cocok buat perbaikan kecil yang mendesak, atau waktu kamu lagi gak di depan komputer sendiri.

Tapi ingat: perubahan di code editor langsung nyimpen ke theme di Shopify, gak ada tahap “push”. Kalau kamu edit theme yang lagi tayang, pengunjung langsung lihat hasilnya. Jadi buat kerjaan serius, tetap pakai alur CLI dari 05 Shopify CLI, dan pakai code editor cuma buat hal kecil.

1. Cara Bukanya

Di desktop:

  1. Shopify admin, buka Online Store > Themes.
  2. Cari theme-nya, klik … > Edit code.

Di HP lewat app Shopify:

  1. Tap Store.
  2. Di Sales channels, tap Online Store.
  3. Tap Manage all themes.
  4. Cari theme-nya, tap … > Edit code.

2. Navigasi

Layarnya dibagi dua: daftar file di kiri, area edit di kanan. Klik file buat buka, dan kamu bisa buka beberapa file sekaligus dalam tab.

3. Nambah, Ubah, Hapus File

Nambah file: pilih folder, klik New file, masukin nama. Atau klik kanan foldernya.

Ngubah file: begitu ada perubahan, muncul titik di sebelah nama tab tandanya belum disimpan. Klik Save di kanan atas, atau Cmd + S (Mac) / Ctrl + S (Windows/Linux).

Ganti nama: klik kanan file, pilih Rename….

Hapus: klik kanan file, pilih Delete permanently. Perhatiin kata permanently-nya.

4. Riwayat Perubahan

Ini fitur yang nyelametin banyak orang: code editor nyimpen versi-versi lama tiap file Liquid. Bukanya di panel Timeline di kanan bawah.

Buat balikin ke versi lama: pilih versinya, lihat perbedaannya, klik Revert contents di kanan atas. Jadi kalau merchant “gak sengaja” ngedit sesuatu dan tokonya rusak, kamu bisa balikin dari sini.

5. Format Kode

Buat ngerapiin indentasi: buka Command Palette pakai Cmd + Shift + P (Mac) / Ctrl + Shift + P (Windows/Linux), ketik format, pilih Format document.

Kalau mau otomatis format waktu paste atau save, klik ikon roda gigi di kiri bawah, pilih Settings, cari format.

6. Theme Check Bawaan

Code editor udah nyertain Theme Check, linter buat file Liquid dan JSON yang nangkep error dan ngingetin praktik terbaik. Jadi kalau kamu nulis sesuatu yang salah, bakal ada garis merah kaya di VS Code. Daftar aturannya di 66 Theme Check Referensi Aturan A–L dan 67 Theme Check Referensi Aturan M–V.

7. Pencarian

  1. Cari file berdasarkan nama: Cmd + P / Ctrl + P.
  2. Cari di dalam file yang lagi dibuka: Cmd + F / Ctrl + F. Klik panah di sebelah kolom pencarian buat buka kolom replace.
  3. Cari di semua file: klik tombol pencarian di sidebar kiri. Hasilnya nunjukin tiap kemunculan beserta nama file-nya.

Ringkasan

  1. Theme editor buat merchant ngatur toko tanpa kode, code editor buat developer ngedit kode di browser.
  2. Preview di theme editor harus persis sama dengan toko yang tayang. Ini prinsip yang gak boleh dilanggar.
  3. Pengaturan di theme editor sepenuhnya ditentuin theme, lewat config/settings_schema.json (global) dan settings di schema section.
  4. Live preview cuma buat pengaturan warna dan teks, dan dua-duanya punya syarat.
  5. Warna di dalam {% style %} dirender sebagai CSS variable di editor, jadi filter Liquid apapun (termasuk default) bikin live preview rusak. Terapin filter di luar {% style %} ke variabel, baru pakai variabelnya di dalam.
  6. Warna di file CSS /assets gak bisa live preview, jadi deklarasiin CSS variable di theme.liquid dan pakai di CSS.
  7. Teks butuh empat syarat: sendirian di elemen induk, gak ada filter selain escape, gak ada markup Liquid lain di dalam induk, dan elemennya gak disembunyiin waktu load.
  8. Deteksi theme editor pakai request.design_mode (Liquid) atau Shopify.designMode (JavaScript), cuma buat urusan di balik layar kaya matiin tracking, bukan buat ngubah tampilan.
  9. Theme editor nembak event JavaScript waktu section atau block diubah, buat komponen yang butuh inisialisasi ulang.
  10. Code editor langsung nyimpen ke Shopify tanpa tahap push, jadi hati-hati kalau ngedit theme yang lagi tayang.
  11. Panel Timeline nyimpen versi lama file Liquid dan bisa di-revert, penyelamat kalau ada yang rusak.
  12. Code editor punya Theme Check bawaan, format dokumen, dan pencarian file, dalam file, dan lintas file.

Bab selanjutnya kita lengkapin editor lokal kita: extension VS Code resmi biar Liquid-nya berwarna dan auto-complete, Prettier biar kodenya rapi otomatis, dan LiquidDoc buat ngedokumentasiin snippet.

Tampilan Grafik

Tautan Balik