Sayudha

08 GitHub Integration dan Version Control

Properties2
descriptionNyambungin theme ke GitHub, cara kerja sinkronisasi dua arah, dan strategi branch buat source vs compiled code
tagsshopify, theme, dasar

11 menit baca

Di 07 Tools Lokal VS Code Extension, Prettier, LiquidDoc editor kita udah siap. Ini bab terakhir Bagian 1: nyambungin theme ke Git biar tiap perubahan tercatat dan bisa dibalikin.

Selama ini alurnya: ngoding lokal → push ke Shopify. Masalahnya, merchant juga bisa ngubah theme lewat theme editor dan code editor. Kalau mereka ngubah sesuatu, terus kamu push dari lokal, perubahan mereka ketimpa dan hilang. Gak ada catatan siapa ngubah apa kapan.

Shopify GitHub integration nyelesain ini dengan bikin repository GitHub jadi sumber kebenaran yang disinkronkan dua arah sama theme di Shopify.

Fitur-fiturnya

Shopify GitHub app nyambungin akun GitHub dan Shopify-mu. Yang bisa dilakuin:

  1. Otomatis pull dan push kode theme dari organisasi atau repository manapun yang nyambung ke akun GitHub-mu.
  2. Nyambungin satu atau lebih branch dari sebuah repository, buat ngembangin fitur baru atau kampanye promo secara terpisah.
  3. Theme selalu update tiap ada commit ke branch, dan perubahan dari Shopify admin (code editor, theme editor) ikut tercatat sebagai commit.
  4. Branch bisa disambungin ke theme yang belum tayang maupun yang udah tayang.

Cara Kerjanya

Dua arah:

  1. GitHub → Shopify: tiap branch yang nyambung di-update (ada commit baru), theme di Shopify admin ikut ter-update.
  2. Shopify → GitHub: tiap theme diubah lewat Shopify admin, perubahannya di-commit ke branch biar branch dan theme selalu sinkron.

Arah kedua ini gak bisa dimatiin. Kalau kamu pengen misahin kode yang bisa diakses Shopify dari sisa kode project-mu, pakai beberapa repository atau subtree, dibahas di bagian strategi di bawah.

1. Commit dari Shopify

Waktu theme diedit lewat Shopify admin, perubahannya otomatis di-commit ke repository sama Shopify. Commit dibuat tiap pemilik, staff, atau collaborator nyimpen perubahan. Isi commit-nya nyebut siapa yang terakhir ngedit:

Update from Shopify for theme Dawn
 
Committed from shop: Snowdevil
Theme last edited by: Bob Bobsen

Perhatiin: perubahan yang disimpan dalam jarak sekitar 10 detik digabung jadi satu commit, jadi nama di commit itu orang yang terakhir nyimpen, bukan catatan per file. Kalau theme-nya gak punya catatan editor, cuma nama toko yang ditulis.

Tiga tempat di Shopify admin yang bisa nyentuh theme dan bakal ke-commit:

  1. Theme editor. Waktu merchant ngatur theme di sini, hasilnya disimpan ke file setting yang bagian dari kode theme, makanya ke-commit. Bahasannya di 32 Config settings_schema.json, settings_data.json, markets.json.
  2. Code editor.
  3. Theme apps yang terpasang di Online Store, misalnya app yang nambahin app block.

2. Akses Organisasi

Kalau kamu ngasih Shopify GitHub app akses ke repository di organisasi GitHub, maka semua user yang punya akun GitHub di organisasi itu dan punya izin Manage themes atau Themes di toko bisa lihat daftar repository yang diakses app. Tapi mereka cuma bisa nyambungin branch yang mereka punya izin tulisnya, dan branch-nya harus ngikutin struktur yang disyaratkan.

Kalau ada repository yang gak mau kelihatan, kasih app-nya akses cuma ke repository yang emang mau disambungin, jangan semua. Konsekuensinya: tiap bikin repository baru yang mau dipakai, kamu harus ngasih akses app-nya lagi lewat GitHub secara manual.

3. Konflik dan Error

Ini bagian yang harus dipahami biar gak kaget:

  1. Kalau seseorang lagi ngedit file di theme editor sementara file yang sama diubah di GitHub atau code editor, dia dapet peringatan waktu nyimpen kalau bakal nimpa perubahan baru.
  2. Di code editor gak ada peringatan konflik sama sekali. Versi di code editor langsung nimpa versi di GitHub. Jadi hati-hati.
  3. Kalau konflik terjadi di commit atau push di luar Shopify (misalnya dua developer push barengan), developer bisa nyelesain di GitHub atau force push buat nimpa file di Shopify.
  4. Dalam kasus terbatas, kalau file disimpan di theme editor atau code editor bersamaan dengan push ke branch GitHub, commit dari Shopify bisa dianggap usang dan ditolak GitHub.

Kalau kamu curiga ada yang gagal waktu push atau pull, lihat log-nya: di kartu theme, klik View logs di sebelah timestamp Last saved.

Kalau theme-nya kelihatan gak sinkron sama branch, tarik ulang secara manual: di kartu theme, Actions > Reset to last commit.

Batasannya

Ini batasan dari sisi izin GitHub, gak ada hubungannya sama collaborator account Shopify:

  1. Cuma repository yang kamu punya izin tulisnya yang bisa dipakai buat bikin theme baru.
  2. Outside collaborator GitHub gak bisa nyambungin branch. Cuma anggota organisasi dengan izin tulis yang bisa.
  3. Repository pribadi orang lain di mana kamu cuma collaborator (bukan pemilik) gak muncul di daftar.

Struktur Repository

Cuma branch yang ngikutin struktur folder theme standar yang bisa disambungin, persis kaya syarat CLI di 05 Shopify CLI > Struktur Folder yang Diharapkan. Struktur ini mewakili theme yang gak butuh build atau udah di-build. Folder yang gak cocok sama struktur standar bakal diabaikan.

❌ gak bisa disambungin, ada src dan dist yang bukan struktur theme

.
├── src/
│   └── scss/
├── dist/
│   └── assets/
└── package.json

✅ bisa disambungin

.
├── assets/
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
└── templates/

Ini yang bikin strategi branch di bawah jadi penting kalau kamu pakai alat build.

Strategi Branch

Dua aturan main yang harus diinget:

  1. Branch yang udah diputus gak bisa disambungin ulang ke theme yang sama. Kalau disambungin lagi, dia jadi theme baru.
  2. Theme yang belum tayang, nyambung ke branch, terus di-publish, tetap nyambung ke branch itu. Jadi kamu bisa nyiapin theme di branch, publish, dan seterusnya tetap update lewat Git.

Pola yang disarankan:

  1. Sambungin branch main ke toko, terus publish theme-nya. Dengan begitu theme yang tayang selalu update tiap ada fitur yang di-merge ke main.
  2. Buat acara kaya promo besar, pakai branch non-main. Theme yang nyambung ke branch itu bisa di-publish sementara, dan setelah acaranya selesai, publish lagi theme yang nyambung ke main.
  3. Kalau pakai alat build, bikin branch khusus deploy sebagai branch produksi, terus deploy hasil kompilasi dari main ke branch itu. Bahasannya di bagian berikutnya.

Langkah Nyambungin

1. Sambungin Repository

Pastiin Shopify GitHub app udah terpasang. Kamu bisa nyambungin sebagai pemilik toko, staff, atau collaborator, asalkan punya izin Manage themes atau Themes.

  1. Shopify admin, buka Online Store > Themes.
  2. Di Theme library, klik Add theme > Connect from GitHub.
  3. Di panel Connect theme, pilih organisasi atau akunmu.
  4. Di Repository, pilih repository-nya.
  5. Di Branch, cari branch yang mau disambungin.

Theme-nya muncul di theme library. Theme yang nyambung ke GitHub nampilin nama repository, nama branch, dan waktu commit terakhir di kartunya.

2. Tes Koneksinya

Coba ubah sesuatu yang kecil dan pastiin ada commit yang masuk:

  1. Online Store > Themes, klik Customize di theme yang nyambung.
  2. Ubah setting apapun, misalnya teks di announcement bar.
  3. Klik Save, keluar dari theme editor.
  4. Di kartu theme, klik nama branch-nya buat loncat ke GitHub.
  5. Lihat commit terbaru. Author-nya harus bot shopify, dan isi commit-nya nyebut nama toko dan orang yang ngedit.

Coba juga arah sebaliknya: push commit dari komputermu ke branch itu. Tanggal Last saved di kartu theme bakal update dan perubahannya kelihatan di theme.

3. Publish

Buat ngelacak perubahan di theme yang tayang, publish theme yang nyambung ke branch dari theme library. Biasanya ini theme yang nyambung ke main.

Version Control Strategy: Source vs Compiled

Ini bagian yang paling perlu dipikirin kalau kamu pakai alat build (SCSS, TypeScript, bundler kaya Webpack/Rollup, PostCSS). Karena integrasi GitHub cuma nerima struktur theme standar, branch yang nyambung ke Shopify gak boleh punya folder src dan dist. Kamu harus milih cara ngatur kode sumber (source) dan kode hasil kompilasi (compiled).

Ada alternatif sebelum masuk ke strategi: Shopify nyediain just-in-time file transformation buat beberapa tugas transformasi (misalnya minifikasi), yang bikin kamu bisa tetap pakai struktur standar tanpa alat build sendiri. Bahasannya di 54 Best Practices Umum.

Kalau tetap pakai alat build, keuntungan umum nyimpen source dan compiled di version control:

  1. Bisa pakai alat build umum (Webpack, Rollup, PostCSS).
  2. File di-build bertahap di komputer developer, jadi bisa live preview.
  3. Perubahan ke compiled code lewat Shopify gampang diidentifikasi.
  4. Bisa push compiled code ke toko lewat integrasi GitHub.

Kerugian umumnya: perubahan yang dibikin merchant di compiled code harus di-backfill manual ke source code, kalau nggak bakal hilang waktu di-build ulang.

Ada empat strategi:

1. Repository Terpisah buat Source dan Compiled

Satu repository berisi source code dan alat build, satu lagi berisi compiled code yang nyambung ke Shopify.

Keuntungannya: gampang diadopsi kalau kamu pindah dari model yang cuma nyimpen source. Kamu tetap push compiled code ke toko kaya biasa, terus pakai integrasi GitHub buat ngelacak perubahannya.

Kerugiannya: kerja di dua repository buat satu theme, yang bikin backfill lebih ribet. File statis yang gak kena transformasi jadi disalin ke dua tempat, nambah perawatan.

2. Pisahin Pakai Branch (Disarankan)

Compiled code ditaruh di branch terpisah dari source code. Isi branch itu kompatibel sama platform theme Shopify dan Theme Check.

Cara ngelakuinnya pakai git subtree: perintah ini bisa ngekstrak folder compiled code jadi branch sendiri yang aman disambungin ke theme.

Contoh: source di branch main dengan folder dist/, terus:

git subtree push --prefix dist origin production

Isi folder dist/ dari main jadi isi root branch production, dan branch production itulah yang disambungin ke Shopify.

Keuntungannya:

  1. Ada lokasi yang jelas buat kode produksi di dalam satu repository.
  2. Riwayat commit-nya bersih. Di branch produksi cuma ada update kode produksi, perubahan source tetap di branch-nya sendiri.

Kerugiannya:

  1. Buat preview branch kerja, butuh branch lain lagi yang berisi compiled code “preview”-nya. Ngatur branch bisa jadi ribet.
  2. File statis yang gak kena transformasi ada di branch terpisah, nambah perawatan dan backfill.

3. Campur Source dan Compiled

Compiled code ditaruh di folder yang sama dengan source code. Misalnya di assets/ ada main.js (source) dan main.min.js (compiled).

Keuntungannya: jumlah file yang di-compile diminimalkan cuma ke yang emang perlu. Perubahan merchant ke file yang gak di-compile gak perlu di-backfill.

Kerugiannya:

  1. Compiled code susah dibedain, dan merchant bisa ngedit langsung file yang harusnya gak disentuh.
  2. Kalau compiled code diedit, harus di-backfill biar gak hilang waktu di-build ulang.

4. Cuma Source di Version Control

Cuma source code yang di-commit. Compiled code di-deploy langsung ke toko waktu mau rilis, manual pakai CLI atau otomatis lewat CI/CD kaya di 05 Shopify CLI > Shopify CLI di CI/CD.

Keuntungannya:

  1. Paling banyak dipakai di komunitas developer theme Shopify.
  2. Bisa pakai alat build umum.
  3. Bisa live preview dari source.

Kerugiannya:

  1. Gak kompatibel sama integrasi GitHub, karena repository-nya cuma berisi source yang bukan struktur theme.
  2. Compiled code gak di-version control, jadi ngelacak perubahannya susah. Kamu harus manual nyari perubahan yang dibikin merchant di compiled code, terus backfill ke source.

❌ berbahaya di strategi ini, merchant ngedit theme lewat code editor, terus kamu deploy dari source

1. Merchant ubah warna tombol di assets/theme.css lewat code editor
2. Kamu build dari source dan push
3. Perubahan merchant hilang tanpa jejak

✅ lebih aman, pakai strategi 2 (branch terpisah) biar perubahan merchant ke-commit dan kelihatan

1. Merchant ubah warna tombol lewat code editor
2. Shopify commit perubahannya ke branch production
3. Kamu lihat commit-nya, backfill ke source, build, push subtree

Milih Strategi

Ringkasnya:

  1. Gak pakai alat build sama sekali (kaya Skeleton atau Dawn): sambungin main langsung, selesai. Ini yang paling gampang dan disarankan buat kebanyakan theme.
  2. Pakai alat build dan mau integrasi GitHub: pakai strategi 2, branch terpisah lewat git subtree.
  3. Pakai alat build dan gak butuh integrasi GitHub: strategi 4, cuma source, deploy lewat CI/CD. Tapi siap-siap backfill manual.

Ringkasan

  1. GitHub integration bikin repository jadi sumber kebenaran yang sinkron dua arah: commit ke branch → theme update, edit di Shopify admin → commit ke branch.
  2. Arah Shopify → GitHub gak bisa dimatiin. Kalau mau misahin kode, pakai repository atau subtree terpisah.
  3. Perubahan dalam 10 detik digabung jadi satu commit dengan nama orang yang terakhir nyimpen.
  4. Code editor gak punya peringatan konflik, versinya langsung nimpa GitHub. Theme editor punya peringatan.
  5. View logs buat ngecek error sinkronisasi, dan Actions > Reset to last commit kalau theme gak sinkron sama branch.
  6. Batasan integrasi itu soal izin GitHub: harus punya izin tulis, bukan outside collaborator, dan repository orang lain gak kelihatan.
  7. Cuma branch dengan struktur theme standar yang bisa disambungin, folder lain diabaikan.
  8. Branch yang diputus gak bisa disambungin ulang, jadi theme baru. Theme yang di-publish tetap nyambung ke branch-nya.
  9. Pola dasar: main nyambung dan di-publish, branch lain buat kampanye sementara.
  10. Kalau pakai alat build, strategi yang disarankan itu pisahin compiled code ke branch sendiri pakai git subtree.
  11. Strategi cuma-source itu paling populer tapi gak kompatibel sama integrasi GitHub, dan perubahan merchant harus di-backfill manual.

Selesai sudah Bagian 1, alat-alatnya udah lengkap. Bab selanjutnya kita masuk Bagian 2 dan mulai belajar bahasa Liquid dari nol: objects, tags, filters, dan konsep handle yang jadi tulang punggung semua theme Shopify.

Tampilan Grafik

Tautan Balik