Sayudha

02 Bikin Theme Baru dari Skeleton

Properties2
descriptionInstall Shopify CLI, bikin theme baru dari Skeleton theme, preview, push, dan publish
tagsshopify, theme, dasar

7 menit baca

Di 01 Apa itu Theme Shopify kita udah kenalan sama theme secara umum. Sekarang kita praktek: bikin theme baru dari nol sampai beneran tayang di toko.

Bab ini tutorial pertama kita. Setelah selesai, kamu bakal udah:

  1. Nyiapin lingkungan kerja lokal di komputermu.
  2. Nyalin Skeleton theme ke komputermu.
  3. Ngelihat perubahan kode secara langsung di browser.
  4. Nge-push kode theme ke toko Shopify dan mem-publish-nya.

Yang Harus Disiapin Dulu

Sebelum mulai, ada empat syarat:

  1. Shopify CLI udah terinstall di komputermu. Cara install-nya ada di bawah.
  2. Punya dev store. Ini toko gratis khusus buat ngetes, bahasannya lengkap di 04 Dev Store, Akun Kolaborator, dan Theme Access. Buat tutorial ini sangat disarankan pakai dev store, jangan langsung di toko beneran.
  3. URL tokonya, bentuknya kaya example.myshopify.com.
  4. Punya akses ke toko itu: kamu pemilik tokonya, atau punya staff account / collaborator account dengan izin Manage themes atau Themes.

Satu peringatan penting soal dev store: buat pakai dev store lewat Shopify CLI, kamu harus jadi pemilik tokonya atau punya staff account di situ. Kalau kamu yang bikin dev store-nya, otomatis kamu pemiliknya. Kalau orang lain yang bikin, kamu harus ditambahin dulu sebagai staff.

Install Shopify CLI

Shopify CLI itu alat baris perintah yang bakal jadi teman kita sepanjang buku ini. Syaratnya:

  1. Node.js versi 22.12 ke atas.
  2. Package manager Node.js: npm, Yarn 1.x, atau pnpm.
  3. Git versi 2.28.0 ke atas.

Install-nya secara global biar perintah shopify bisa dipanggil dari folder manapun:

pnpm install -g @shopify/cli@latest

Kalau kamu pakai npm:

npm install -g @shopify/cli@latest

Atau kalau di macOS mau lewat Homebrew:

brew tap shopify/shopify
brew install shopify-cli

Cek udah keinstall atau belum:

shopify version

Sejak versi 4.0, Shopify CLI meng-upgrade dirinya sendiri secara otomatis pakai package manager yang kamu pakai buat install. Jadi gak perlu pusing update manual. Kalau mau paksa upgrade sekarang, jalanin shopify upgrade. Kalau mau matiin fitur otomatisnya, jalanin shopify config autoupgrade off.

Cara baca perintahnya: shopify [topik] [perintah]. Buat theme, topiknya selalu theme, jadi semua perintah kita berawalan shopify theme .... Kalau lupa, tinggal ketik shopify help.

Langkah 1 (Opsional): Shopify AI Toolkit

Kalau kamu ngoding pakai bantuan AI kaya Claude Code, Codex, atau Cursor, Shopify nyediain AI Toolkit yang nyambungin asisten AI-mu ke dokumentasi, API, dan CLI Shopify. Jadi asistennya gak ngarang dan lebih paham konteks Shopify.

Buat Claude Code:

claude plugin install shopify-ai-toolkit@claude-plugins-official

Buat Cursor, di Cursor Chat ketik:

/add-plugin shopify

Buat VS Code, buka Command Palette (Cmd+Shift+P), jalanin Chat: Install Plugin From Source, terus masukin https://github.com/Shopify/shopify-ai-toolkit.

Ini opsional, gak ngaruh ke tutorial. Tapi kalau kamu emang ngoding bareng AI, pasang aja.

Langkah 2: Bikin Theme Baru

Kita pakai perintah shopify theme init buat nyalin repository Git Skeleton theme ke komputermu.

Skeleton theme itu theme minimal yang strukturnya udah rapi, dibikin biar kamu bisa mulai cepat. Dia udah ngikutin praktik terbaik Shopify soal modularitas dan kemudahan perawatan. Bayangin kaya kerangka rumah yang tiangnya udah berdiri, tinggal kamu pasang dinding dan catnya.

  1. Buka terminal, masuk ke folder tempat kamu mau nyimpen theme-nya.
  2. Jalanin:
shopify theme init
  1. Kamu bakal ditanya nama theme-nya, misalnya my-new-theme. Theme-nya disalin ke folder dengan nama itu.
  2. Masuk ke foldernya:
cd "my-new-theme"

Perintah init ini juga bisa dipakai buat nyalin theme dari repository Git lain, bukan cuma Skeleton. Jadi kalau tim kamu punya starter sendiri, bisa dipakai juga.

Langkah 3: Nyalain Server Lokal

Sekarang kita pengen lihat theme-nya jalan di browser. Perintahnya shopify theme dev.

Yang terjadi di balik layar: Shopify CLI meng-upload theme-mu ke toko sebagai development theme, yaitu theme sementara yang cuma kamu yang bisa lihat, gak ngaruh ke toko yang tayang. Terus dia ngasih URL lokal yang otomatis reload tiap kamu ubah CSS atau section, dan datanya pakai data asli dari toko. Jadi produk, koleksi, dan harganya beneran.

Pertama kali jalanin, kamu bakal diminta login ke Shopify.

  1. Jalanin, ganti my-store dengan nama tokomu:
shopify theme dev --store my-store
  1. Buka Google Chrome ke http://127.0.0.1:9292.

Perhatiin dua hal:

Pertama, --store cuma wajib pertama kali. Toko yang kamu sebut bakal diinget buat perintah-perintah berikutnya, sampai kamu ngasih --store lagi dengan nilai baru. Kalau lupa lagi nyambung ke toko mana, cek pakai:

shopify theme info

❌ salah, pertama kali jalan tanpa --store, CLI-nya gak tau mau nyambung ke mana

shopify theme dev

✅ benar, sebutin tokonya dulu, setelah itu baru boleh tanpa --store

shopify theme dev --store my-store

Kedua, preview-nya cuma jalan di Google Chrome. Bukan Safari, bukan Firefox. Ini batasan dari Shopify, jadi jangan bingung kalau di browser lain gak muncul.

Selain URL lokal, perintah dev juga ngasih link preview yang bisa kamu bagikan ke orang lain, dan link ke theme editor buat development theme-mu. Jadi klien bisa lihat progresnya tanpa harus install apa-apa.

Langkah 4: Upload Theme ke Toko

Development theme tadi sifatnya sementara. Kalau kamu mau:

  1. Punya link permanen ke theme-mu,
  2. Nge-update kode theme yang udah ada di toko, atau
  3. Nyiapin theme buat di-publish,

maka kamu harus push kodenya ke Shopify pakai shopify theme push.

Pertama kali push, biasanya kamu mau theme-nya masuk ke theme library sebagai theme baru yang belum tayang. Pakai flag --unpublished, nanti kamu ditanya nama theme-nya:

shopify theme push --unpublished

Setelah theme-nya ada di library, push berikutnya cukup tanpa flag:

shopify theme push

Kenapa --unpublished penting di push pertama? Karena kalau tanpa flag itu, CLI bakal nanya theme mana yang mau ditimpa, dan kalau kamu salah pilih theme yang lagi tayang, toko merchant langsung berubah detik itu juga. Jadi biasakan push pertama selalu --unpublished.

❌ bahaya, bisa nimpa theme yang lagi tayang kalau salah pilih

shopify theme push

✅ aman, masuk sebagai theme baru yang belum tayang

shopify theme push --unpublished

Langkah 5: Publish Theme

Kalau theme-nya udah siap tayang, publish pakai shopify theme publish. Pastiin semua perubahan lokal udah di-push dulu, karena yang di-publish itu versi yang ada di Shopify, bukan yang ada di komputermu.

❌ salah, perubahan terakhir belum di-push, yang tayang versi lama

shopify theme publish

✅ benar, push dulu baru publish

shopify theme push
shopify theme publish

Langkah-langkahnya:

  1. Jalanin:
shopify theme publish
  1. Pilih theme yang mau di-publish dari daftar.
  2. Pilih Yes buat konfirmasi.

Theme-nya sekarang tayang dan jadi theme aktif di toko.

Alur Kerjanya Kalau Diringkas

Ini urutan yang bakal kamu ulang-ulang terus:

shopify theme init                     # sekali, di awal
shopify theme dev --store my-store     # tiap mau ngoding
shopify theme push --unpublished       # sekali, push pertama
shopify theme push                     # tiap mau nyimpen ke Shopify
shopify theme publish                  # kalau udah siap tayang

Ringkasan

  1. Syaratnya: Shopify CLI, dev store, URL toko, dan akses ke toko itu. Buat dev store lewat CLI, kamu harus pemilik atau staff-nya.
  2. Shopify CLI butuh Node.js 22.12+, package manager, dan Git 2.28+. Install global pakai pnpm install -g @shopify/cli@latest, dan sejak versi 4.0 dia update sendiri.
  3. Semua perintah theme berawalan shopify theme ....
  4. shopify theme init nyalin Skeleton theme, kerangka minimal yang udah rapi, ke folder baru di komputermu.
  5. shopify theme dev --store my-store nyalain server lokal di http://127.0.0.1:9292, pakai data asli toko, dan cuma jalan di Google Chrome.
  6. --store cuma wajib pertama kali, setelah itu diinget. Cek pakai shopify theme info.
  7. Development theme itu sementara dan cuma kamu yang lihat, gak ngaruh ke toko yang tayang.
  8. shopify theme push --unpublished buat push pertama, biar masuk sebagai theme baru dan gak nimpa yang lagi tayang.
  9. shopify theme publish bikin theme jadi aktif, tapi yang di-publish itu versi di Shopify, jadi push dulu sebelum publish.

Bab selanjutnya kita lihat kerjaan yang jauh lebih sering ditemuin: bukan bikin dari nol, tapi ngubah theme yang udah dipakai merchant, tanpa bikin toko mereka rusak.

Tampilan Grafik

Tautan Balik