Sayudha

75 Theme Kit (deprecated)

Properties2
descriptionTheme Kit, alat command-line lintas platform (biner Go) yang udah deprecated dan digantikan Shopify CLI, dibahas lengkap buat baca proyek lama, yaitu instalasi per OS, Theme password dari Theme Access, alur get/new/configure/watch/deploy/download/remove/open, environments dan --env, config.yml dengan interpolasi variabel dan file variables, environment variable THEMEKIT_*, flag, aturan ignore pattern, troubleshooting (TLS handshake timeout, too many open files), dan padanannya di Shopify CLI, plus penutup buku
tagsshopify, theme, tools, deprecated

12 menit baca

Bab terakhir. Setelah CLI 2.x di 74 Shopify CLI 2.x (deprecated), kita mundur satu generasi lagi ke Theme Kit, alat yang dipakai developer theme Shopify bertahun-tahun sebelum Shopify CLI ada. Statusnya sama: deprecated, developer theme harus pakai Shopify CLI (05 Shopify CLI). Tapi kalau kamu nerima proyek lama, kamu bakal nemu config.yml dengan theme_id dan password, folder tanpa blocks/, dan README yang bilang “jalankan theme watch”. Bab ini bikin kamu paham semuanya, dan tahu persis padanannya di CLI sekarang.

Apa itu Theme Kit

Theme Kit adalah alat command-line lintas platform buat bikin theme Shopify, dibangun sebagai satu biner (ditulis di Go) yang ngobrol langsung dengan Admin API lewat Theme password. Dengan Theme Kit kamu pakai alat pengembangan sendiri buat berinteraksi dengan platform Shopify: pakai workflow tool seperti Git buat kerja tim; upload theme ke banyak environment; mantau perubahan lokal dan upload otomatis; jalan di Linux, macOS, dan Windows. Open source di GitHub, bantuan lewat GitHub issues dan .dev Community.

Cara pandangnya beda dari CLI: Theme Kit gak punya development theme, hot reload, atau server lokal. Dia cuma sinkronisasi file antara folder lokal dan theme di toko, dan kamu lihat hasilnya lewat preview theme di toko. Semua yang lain (reload browser, build step) kamu rakit sendiri.

Getting Started

1. Instalasi

  • Linux: skrip instalasi curl -s https://shopify.dev/themekit.py | sudo python3 (Homebrew for Linux gak didukung).
  • macOS: brew tap shopify/shopify lalu brew install themekit. Apple M1 belum didukung native, tapi jalan kalau terminal dibuka dengan Open using Rosetta.
  • Windows: choco install themekit lewat Chocolatey.

Kalau udah pernah instal, pastiin versi terbaru (bagian troubleshooting).

2. Theme Password

Theme Kit konek ke toko pakai Theme password yang dibikin owner atau staff berizin lewat app Theme Access (04 Dev Store, Akun Kolaborator, dan Theme Access > Theme Access):

  1. Minta owner/staff bikin Theme password buat kamu lewat Theme Access.
  2. Buka email undangannya.
  3. Klik Get Theme password.
  4. Salin password-nya.

Link-nya kedaluwarsa setelah 7 hari atau setelah sekali dilihat. Ini juga password yang dipakai CLI 3.x di CI (05 Shopify CLI > 2. Password Theme Access), jadi bagian ini masih relevan.

3. Konek ke Theme yang Ada

Kamu butuh ID theme. Cara termudah: theme get --list, yang ngembaliin daftar theme dan ID di toko:

theme get --list --password=[your-password] --store="[your-store.myshopify.com]"

Jangan sertakan protokol (http/https) di store. Di PowerShell, URL setelah tanda hubung tunggal (bentuk pendek) harus dikutip:

❌

theme get --list -p=[password] -s=my-store.myshopify.com

✅

theme get --list -p=[password] -s="my-store.myshopify.com"

4. Config File dan Download

config.yml bikin koneksi lokal ke theme di toko. Bikin folder, masuk, lalu theme get dengan ID theme buat download theme sekaligus bikin config.yml:

mkdir [your-theme-name]
cd [your-theme-name]
theme get --password=[your-password] --store="[your-store.myshopify.com]" --themeid=[your-theme-id]

5. Bikin Theme Baru

theme new --password=[your-password] --store="[your-store.myshopify.com]" --name=[theme name]

theme new nge-generate template theme dasar secara lokal, bikin theme baru di toko, upload file-nya, dan bikin/update config.yml. Template dasarnya jauh lebih minimal dari Skeleton di 02 Bikin Theme Baru dari Skeleton.

6. Push Perubahan

Setelah terhubung, jalanin di folder theme:

theme watch

theme watch mantau perubahan file lokal dan otomatis push ke theme di toko; tutup dengan Control+C. Ini pengganti shopify theme dev di era itu, minus server lokal dan hot reload.

Referensi Perintah

theme help daftar semua perintah dan flag; theme [command] --help flag buat satu perintah.

1. Environments dan —env

Semua perintah bisa dijalanin dengan environment tertentu dari config, jadi satu config.yml bisa nyimpan banyak konfigurasi. Pilih dengan --env / -e; default development. Beberapa --env sekaligus boleh:

theme deploy --env=production
theme deploy --env=staging --env=production

Konsepnya diwarisi CLI 3.x lewat shopify.theme.toml (05 Shopify CLI > Environments).

2. get

Nyiapin theme di mesin lokal dengan bikin config file dan download theme yang diminta. --list buat daftar theme; dengan --themeid buat download. Flag wajib: -p/--password, -s/--store, -t/--themeid; opsional --live (set theme ID ke theme yang tayang). Output config.yml-nya:

development:
password: [your-theme-kit-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com

3. new

Bikin theme baru di toko, inisialisasi config dengan password dan ID theme baru, dan generate + upload template default biar theme-nya valid. Flag wajib: -p, -s, -n/--name; opsional --dir lokasi file theme baru (foldernya harus udah ada).

4. configure

Bikin atau update config file tanpa download, output sama seperti get. Flag wajib: -p, -s, -t; opsional --live.

5. open

Buka halaman preview theme di browser dan cetak URL-nya:

theme open --env=production # opens http://your-store.myshopify.com?preview_theme_id=[your-theme-id]

Flag: -a/--allenvs buka tiap environment; -b/--browser nama browser di sistem; -E/--edit buka theme editor; --hidepb sembunyiin preview bar (padanan ?pb=0 dari 57 Performance Dasar, Metrik, dan Cara Ngukur > Benchmark Theme Store).

6. watch

Mantau perubahan lokal dan push otomatis; perubahan dan status upload di-log ke terminal. Flag: -a/--allenvs; -n/--notify path file yang di-update waktu worker idle, atau URL yang dikirimi webhook; --allow-live izinin perubahan ke theme tayang (default ditolak, pengaman yang sama dengan --allow-live di CLI).

--notify dengan URL ngirim POST tiap perubahan, misalnya buat assets/app.js:

{
"files": ["assets/app.js"]
}

--notify dengan file path buat integrasi reloading tool: kalau tool kamu mantau /tmp/theme.update, jalanin theme watch --notify=/tmp/theme.update, dan file itu di-update tiap worker selesai.

7. deploy

Mengganti theme di toko dengan isi folder proyek. Tanpa argumen, seluruh theme; dengan nama file, cuma file itu:

theme deploy
theme deploy templates/404.liquid templates/article.liquid

Cara kerjanya: file yang ada di toko tapi gak ada di lokal → dihapus dari Shopify; yang ada di keduanya → di-update; yang cuma di lokal → di-upload. Theme Kit ngitung checksum tiap file dan cuma ngupdate aset yang berubah. Flag: --allow-live (deploy ke theme tayang); -a/--allenvs; -n/--nodelete deploy tanpa ngehapus file di Shopify.

❌ deploy dari folder yang belum lengkap (misalnya clone baru tanpa assets/ hasil build): semua file yang hilang di lokal dihapus dari toko

theme deploy --env=production

✅ cek dulu, atau pakai --nodelete

theme deploy --env=production --nodelete

8. download

Download file dari theme; tanpa nama file seluruh theme, dengan nama file cuma yang disebut. Seperti deploy, file yang gak berubah dilewati. Flag --live buat theme yang tayang:

theme download templates/404.liquid templates/article.liquid

9. remove

Hapus file di lokal dan di toko. Beda dari perintah lain, remove wajib nyebut nama file, biar kamu gak sengaja ngehapus seluruh theme. Beberapa file mungkin gak bisa dihapus dari toko karena diperlukan buat theme yang valid:

theme remove templates/404.liquid templates/article.liquid

Referensi Konfigurasi

1. Urutan Prioritas

Tiga cara konfigurasi: config file, environment variable, flag command line. Environment variable menimpa config file; flag menimpa keduanya. Ingat ini waktu debugging config, sama seperti urutan prioritas CLI 3.x di 05 Shopify CLI > 4. Urutan Prioritas.

2. Parameter Global

  • config: path kustom ke config file (default folder tempat perintah dijalanin).
  • directory: root proyek, biar perintah bisa dijalanin dari folder lain.
  • ignore_files: daftar pola yang diabaikan.
  • ignores: daftar path file yang berisi pola ignore.
  • password: Theme password.
  • proxy: URL penuh buat proxy request, cuma protokol http.
  • readonly: semua aksi read-only; bisa download dari environment ini tapi gak bisa ngubah theme di toko. Pengaman bagus buat environment production.
  • store: domain toko dengan akhiran .myshopify.com.
  • theme_id: ID theme.
  • timeout: ubah timeout request dari default 30 detik, misalnya 60s atau 1m, kalau ada file besar.

3. Config File per Environment

development:
  password: 16ef663594568325d64408ebcdeef528
  theme_id: "123"
  store: can-i-buy-a-feeling.myshopify.com
  proxy: http://localhost:3000
  ignore_files:
    - "*.gif"
    - "*.jpg"
    - config/settings_data.json
production:
  password: 16ef663594568325d64408ebcdeef528
  theme_id: "456"
  store: can-i-buy-a-feeling.myshopify.com
  timeout: 60s
  readonly: true
test:
  password: 16ef663594568325d64408ebcdeef528
  theme_id: "789"
  store: can-i-buy-a-feeling.myshopify.com
  ignores: ignore.txt

Perhatiin ignore_files buat config/settings_data.json di development: pola klasik biar setting yang diubah merchant di theme editor gak ketimpa waktu deploy, masalah yang di CLI 3.x diselesaikan lewat --nodelete/--only dan strategi di 08 GitHub Integration dan Version Control.

4. Environment Variable

Biar rahasia gak masuk repository, ada dua cara. Interpolasi dengan notasi ${} di config.yml:

development:
  password: ${DEV_PASSWD}
  theme_id: ${DEV_THEMEID}
  store: ${DEV_SHOP}

Variabelnya dimuat otomatis dari file variables (format .env): macOS ${HOME}/Library/Application Support/Shopify/Themekit/variables, Linux/BSD ${XDG_CONFIG_HOME}/Shopify/Themekit/variables, Windows %APPDATA%\Shopify\Themekit\variables, atau file mana pun lewat flag --vars di perintah apa pun:

DEV_PASSWD=0bwef09hn23048sdkl2345n2k3
DEV_THEMEID=123
DEV_SHOP=can-i-buy-a-feeling.myshopify.com

Dengan ini config.yml boleh di-commit sementara rahasianya tetap di luar repo.

Cara kedua, environment variable global berawalan THEMEKIT_: THEMEKIT_DIRECTORY, THEMEKIT_IGNORE_FILES (pola dipisah :), THEMEKIT_IGNORES (path dipisah :), THEMEKIT_PASSWORD, THEMEKIT_PROXY, THEMEKIT_STORE, THEMEKIT_THEME_ID, THEMEKIT_TIMEOUT.

5. Flag

Semua setting bisa dipaksa lewat flag, berguna buat debugging atau script dari job scheduler seperti cron: --config/-c, --dir/-d, --ignored-file, --ignores, --password, --proxy, --store/-s, --themeid, --timeout.

6. Aturan Ignore Pattern

  • Pola di-trim spasi di awal dan akhir.
  • Nama file polos (tanpa *) dicocokin di mana pun dalam proyek: no.txt cocok dengan $PROJECT_DIR/no.txt dan $PROJECT_DIR/templates/no.txt.
  • Pola yang diakhiri / jadi glob: config/ = config/*.
  • Pola dengan * dibatasi ke folder proyek: *.gif = $PROJECT_DIR/*.gif.
  • Glob yang gak dimulai glob dapat prefix glob: build/* cocok $PROJECT_DIR/build/.
  • Pola yang dimulai dan diakhiri / adalah regex yang dicocokin ke seluruh path: /\.(txt|gif|bat)$/ cocok semua file .txt, .gif, .bat.
  • Di Windows pakai backslash sebagai pemisah path.

Contoh di config.yml (pola yang dimulai * harus dikutip biar YAML valid) dan file ignore (satu pola per baris, komentar #):

development:
  ... # Other content
  ignore_files:
    - config/settings_data.json
    - "*.png" # Patterns that start with * need to be quoted to have vaild yaml
    - /\.(txt|gif|bat)$/
  ignores:
    - themekit_ignores # A file to load ignore patterns. Check out the example ignore file.
# $PROJECT_DIR/themekit_ignores
# plain file names
config/settings_data.json
# globs
*.png
# regex
/\.(txt|gif|bat)$/

Troubleshooting

1. Update

Sebelum ngejalanin perintah, pastiin versi terbaru, dan uninstall gem shopify-theme kalau pernah dipakai (pendahulu Theme Kit yang berbasis Ruby): gem uninstall shopify-theme. Update: theme update --version=v1.1.1. Tes: theme --help.

2. Reload Halaman

Theme Kit gak punya reload bawaan; pakai tool seperti Prepros atau BrowserSync, dan hubungkan lewat theme watch --notify=/var/tmp/theme_ready. Kalau filenya gak ada, Theme Kit bikin waktu perubahan pertama, lalu meng-update-nya tiap event. File cuma di-update setelah request ke Shopify selesai, bukan waktu file disimpan, jadi reload-nya selalu nunjukin versi yang udah ada di toko.

3. Error Umum

  • Perubahan gak ter-upload: cek apakah file-nya kena ignore pattern yang pernah kamu set.
  • TLS handshake timeout: soal batas file descriptor, biasanya karena Theme Kit jalan lama; restart terminal. Solusi jangka panjangnya di poin berikut.
  • Could not watch directory, too many open files: biasanya macOS yang batas file descriptor-nya rendah; naikin manual:
echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
sudo sysctl -w kern.maxfiles=65536
sudo sysctl -w kern.maxfilesperproc=65536
ulimit -n 65536 65536
  • Cloud9 mengganti file dengan konten lain: taruh semua file theme di satu folder di workspace dan jalanin Theme Kit di folder itu.

4. Hapus Theme Kit

Hapus binernya (rm ke lokasi biner theme), atau brew uninstall themekit kalau lewat Homebrew.

Padanan di Shopify CLI

  1. config.yml + --env → shopify.theme.toml + --environment (05 Shopify CLI > Environments).
  2. Theme password → masih dipakai sebagai --password di CI (05 Shopify CLI > Shopify CLI di CI/CD); buat kerja harian cukup login akun.
  3. theme get --list → shopify theme list; theme get --themeid / download → shopify theme pull --theme; --live → --live.
  4. theme new → shopify theme init (Skeleton) lalu push --unpublished.
  5. theme watch → shopify theme dev (dengan server lokal dan hot reload, tanpa nyentuh theme asli).
  6. theme deploy → shopify theme push; --nodelete sama; --allow-live sama; nama file → --only.
  7. theme remove → gak ada padanan langsung; hapus lokal lalu push tanpa --nodelete.
  8. theme open --edit / --hidepb → shopify theme open --editor; preview bar lewat ?pb=0.
  9. ignore_files/ignores → .shopifyignore dan --ignore.
  10. --notify + BrowserSync → gak perlu, hot reload bawaan.

Penutup Buku

Kalau kamu ngikutin dari 01 Apa itu Theme Shopify sampai sini, kamu udah lewat 75 bab: alat kerja dan alur pengembangan (01–08), bahasa Liquid dari dasar sampai semua object dan filter (09–20), arsitektur theme dari layout sampai theme block dan developer preview (21–35), fitur storefront satu per satu (36–52), praktik terbaik, aksesibilitas, dan desain (53–56), delapan bab performa (57–64), alat kualitas dan parser ketat (65–69), Theme Store dari requirements sampai sukses (70–73), dan dua alat deprecated buat baca masa lalu (74–75). Tiga hal yang layak diingat setelah semua itu:

  1. Theme adalah produk buat merchant, bukan cuma kode. Hampir semua requirement Theme Store, dari terminologi setting sampai update otomatis, ada buat melindungi merchant yang gak bisa ngoding.
  2. Platform udah ngerjain banyak hal. CDN, minifikasi, speculation rules, hreflang, CAPTCHA, section rendering, semua gratis kalau kamu ngikutin konvensinya, dan mahal kalau kamu melawannya.
  3. Alatnya terus berganti, prinsipnya gak. Theme Kit → CLI 2.x → CLI 3.x, Theme Check 1.x → 2.x, include → render, section → theme block, parser longgar → ketat. Yang bertahan: kode yang jujur, cepat, aksesibel, dan gampang dikustomisasi tanpa ngedit kode.

Kalau ada yang berubah di shopify.dev setelah tanggal di frontmatter, anggap dokumentasi resmi yang benar, dan perbarui catatannya.

Ringkasan

  1. Theme Kit = biner lintas platform (Go) yang sinkronisasi file lokal ↔ theme di toko lewat Theme password; tanpa server lokal atau hot reload; deprecated, pakai Shopify CLI.
  2. Instal: Linux skrip themekit.py, macOS brew tap shopify/shopify + brew install themekit (M1 via Rosetta), Windows choco install themekit; Theme password dari app Theme Access (link 7 hari, sekali lihat); PowerShell: kutip URL setelah -s=.
  3. Alur: theme get --list → theme get --themeid (download + config.yml) atau theme new --name → theme watch; configure bikin config tanpa download.
  4. Perintah: open (--edit, --hidepb, --allenvs, --browser), watch (--notify file/URL, --allow-live), deploy (ganti seluruh theme, hapus yang gak ada di lokal, checksum; --nodelete, --allow-live, nama file), download (--live), remove (wajib nama file); --env/-e default development, boleh banyak.
  5. Config: prioritas flag > env var > config.yml; parameter config, directory, ignore_files, ignores, password, proxy (http), readonly, store, theme_id, timeout (default 30s); per environment; interpolasi ${VAR} dari file variables (per OS atau --vars); THEMEKIT_* (pemisah :).
  6. Ignore: nama polos cocok di mana pun, dir/ = glob, * dibatasi proyek, /regex/ ke seluruh path, backslash di Windows, pola * dikutip di YAML, file ignore satu pola per baris.
  7. Troubleshooting: uninstall gem shopify-theme, theme update --version, reload lewat Prepros/BrowserSync + --notify (di-update setelah request selesai), TLS handshake timeout dan too many open files → naikin kern.maxfiles/ulimit, Cloud9 pakai subfolder.
  8. Padanan CLI: config.yml → shopify.theme.toml, watch → dev, deploy → push, get/download → pull, new → init, ignore → .shopifyignore.
  9. Penutup: theme adalah produk buat merchant; platform udah ngerjain banyak hal kalau kamu ngikutin konvensi; alat berganti, prinsip bertahan.

Selesai. Kembali ke Bab pertama buat peta buku ini, atau ke 05 Shopify CLI buat alat yang sebenarnya kamu pakai hari ini.

Tampilan Grafik

Tautan Balik