Sayudha

03 Kustomisasi Theme Milik Merchant

Properties2
descriptionCara aman ngubah theme yang udah dipakai merchant, dari minta akses sampai publish
tagsshopify, theme, dasar

7 menit baca

Di 02 Bikin Theme Baru dari Skeleton kita bikin theme dari nol. Sekarang kita ke kerjaan yang jauh lebih sering datang: merchant udah punya theme, minta diubah.

Kustomisasi itu bisa kecil banget (ganti warna tombol) sampai gede banget (rombak total). Sebagai Shopify Partner, kamu bisa nawarin jasa ini lewat Shopify Partner Directory.

Bedanya sama bikin theme baru: ini toko orang, ada produk beneran, ada pembeli beneran, dan ada uang beneran yang lewat. Jadi cara kerjanya harus lebih hati-hati. Bab ini ngajarin alurnya sekaligus etikanya.

Satu catatan sebelum mulai: tutorial ini buat theme yang gak pakai GitHub integration. Kalau merchant-nya ngatur theme lewat GitHub, kamu minta akses ke repository-nya, atau push perubahan ke theme yang nyambung ke branch-nya pakai CLI. Bahasannya di 08 GitHub Integration dan Version Control.

Setelah bab ini kamu bakal udah:

  1. Dapat akses ke toko merchant.
  2. Nyiapin lingkungan kerja lokal.
  3. Download salinan theme merchant.
  4. Bikin perubahan dan preview.
  5. Bagiin hasilnya ke merchant.
  6. Publish perubahannya.

Syaratnya cuma dua: Shopify CLI udah terinstall (cara install-nya di 02 Bikin Theme Baru dari Skeleton > Install Shopify CLI) dan URL toko merchant kaya example.myshopify.com.

Langkah 1: Minta Akses ke Toko Merchant

Buat ngerjain theme merchant, kamu butuh akses ke tokonya. Kenapa gak ngerjain di dev store sendiri aja? Karena ngetes di toko merchant artinya ngetes pakai produk, koleksi, dan data asli mereka. Theme yang kelihatan bagus dengan 3 produk contoh bisa berantakan waktu ketemu 500 produk beneran.

Cara yang benar: minta collaborator account dengan izin Manage themes. Bahasan lengkapnya di 04 Dev Store, Akun Kolaborator, dan Theme Access, tapi intinya ada dua jenis akun:

  1. Collaborator account. Kamu akses toko klien lewat Partner Dashboard-mu sendiri. Merchant yang nentuin bagian mana aja yang boleh kamu sentuh, dan akun ini gak ngabisin jatah staff toko mereka. Toko yang kamu akses dengan cara ini bakal berlabel Managed di Partner Dashboard. Ini cara yang disarankan.
  2. Staff account. Kalau ada kerjaan yang gak bisa dilakuin collaborator account, misalnya perlu buka Shopify admin di HP buat ngetes app, kamu bisa minta merchant bikinin staff account.

Dan ini aturan yang gak boleh dilanggar: minta password merchant, atau pakai kredensial merchant buat masuk ke tokonya, itu dilarang. Bukan cuma gak sopan, tapi melanggar aturan Shopify.

❌ dilarang, minta login merchant

"Boleh minta email sama password Shopify-nya biar saya bisa langsung kerja?"

✅ benar, minta akses lewat jalur resmi

"Saya kirim collaborator request ya, nanti tinggal di-approve dari admin, kasih izin Manage themes aja cukup."

Langkah 2: Download Kode Theme Merchant

Kalau merchant gak punya repository GitHub buat theme-nya, kamu harus download salinan kodenya buat dikerjain di komputermu. Perintahnya shopify theme pull:

  1. Jalanin, ganti my-store dengan nama toko merchant. Kalau mau nentuin folder tujuannya, tambahin flag --path:
shopify theme pull --store my-store
  1. Pilih theme dari daftar yang muncul. Isinya bakal di-download ke folder sekarang, atau ke folder yang kamu sebut di --path.

Kalau belum login, kamu bakal diminta login waktu jalanin pull. Pastiin login pakai akun yang emang dikasih akses ke toko itu. Kalau kamu udah terlanjur login pakai akun lain yang gak punya akses, keluar dulu:

shopify auth logout

Ini jebakan yang sering kejadian: kamu punya beberapa akun Shopify (akun pribadi, akun kantor, akun Partner), terus CLI-nya nyangkut di akun yang salah dan bilang “theme gak ditemukan” padahal theme-nya ada. Obatnya ya logout dulu.

Langkah 3: Bikin Perubahan

Setelah kodenya ada di komputermu, ubah sesuai kebutuhan. Bisa sesederhana ngubah CSS buat ganti tampilan, atau sekompleks nambahin dukungan multi mata uang dan multi bahasa yang dibahas di 47 Markets Multi Currency, Multi Bahasa, Localization.

Tutorial fitur-fitur lainnya ada di Bagian 4 buku ini, mulai dari 36 Navigasi dan Menu.

Langkah 4: Preview Perubahannya

Sama kaya waktu bikin theme baru, jalanin shopify theme dev. CLI bakal upload theme-mu sebagai development theme di toko yang lagi nyambung. Development theme itu cuma kamu yang bisa lihat, toko merchant yang tayang gak kesentuh sama sekali.

  1. Di terminal, masuk ke folder theme-nya.
  2. Jalanin:
shopify theme dev
  1. Buka Google Chrome ke http://127.0.0.1:9292.

Gak perlu --store lagi karena udah diinget dari perintah pull tadi. Perubahan CSS dan section bakal otomatis reload di browser, pakai data asli toko merchant.

Perintah dev juga ngasih link preview dan link theme editor buat development theme-mu.

Tapi inget: development theme itu ikut hancur kalau kamu jalanin shopify auth logout. Jadi jangan pakai link preview development theme buat nunjukin ke merchant kalau kamu berencana logout. Buat bagiin ke merchant, pakai langkah berikutnya.

Langkah 5: Bagiin Perubahan ke Merchant

Buat ngasih lihat ke merchant, kamu harus upload perubahanmu ke toko mereka pakai shopify theme push:

shopify theme push

Kamu bakal ditanya theme mana yang mau di-update. Setelah selesai, perintah ini ngasih dua link yang bisa kamu kirim ke merchant:

  1. Link ke theme editor di Shopify admin, biar merchant bisa buka dan lihat sendiri.
  2. Link preview, biar merchant bisa lihat tampilannya kaya pengunjung biasa.

Nah, di sini ada keputusan penting. Kalau kamu gak mau nimpa theme yang udah ada, upload aja sebagai theme baru yang belum tayang pakai --unpublished:

shopify theme push --unpublished

Ini cara paling aman buat kerjaan klien: theme lama merchant tetap utuh, theme baru kamu duduk di sebelahnya sebagai draft. Merchant bisa bandingin dua-duanya, dan kalau ada apa-apa, tinggal balik ke yang lama.

❌ berisiko, nimpa theme yang lagi dipakai merchant sebelum mereka setuju

shopify theme push
# terus pilih theme yang lagi tayang

✅ aman, hasil kerjamu jadi theme terpisah yang belum tayang

shopify theme push --unpublished

Langkah 6: Publish Theme yang Udah Di-update

Setelah merchant setuju, baru kamu publish biar tayang. Ingat aturan dari bab sebelumnya: push dulu semua perubahan sebelum publish, karena yang di-publish itu versi yang ada di Shopify.

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

Theme-nya tayang dan jadi theme aktif toko merchant.

Perhatiin kata kuncinya: setelah merchant setuju. Jangan pernah publish theme klien tanpa persetujuan eksplisit dari mereka, walaupun kamu yakin banget hasilnya bagus. Ini toko mereka, keputusan tayang itu hak mereka.

Soal Version Control

Kalau hubunganmu sama merchant ini jangka panjang (bukan cuma satu kerjaan terus selesai), pertimbangkan nyambungin theme mereka ke version control pakai Shopify GitHub integration, yang dibahas di 08 GitHub Integration dan Version Control.

Tapi sebelum itu, ada satu obrolan yang harus diselesaikan dulu: siapa yang punya dan ngurus repository GitHub-nya, merchant atau perusahaanmu? Ini sering dilewatin dan jadi masalah belakangan waktu kerja sama berakhir.

Praktik yang bagus: serahin repository-nya ke merchant sebagai bagian dari paket akhir yang kamu kirim, jadi mereka atau developer lain bisa lanjutin kerjaannya tanpa tergantung sama kamu. GitHub punya fitur transfer repository buat ini.

Alur Kerjanya Kalau Diringkas

shopify theme pull --store my-store    # download theme merchant
shopify theme dev                      # ngoding sambil preview
shopify theme push --unpublished       # kirim ke merchant sebagai draft
shopify theme publish                  # setelah merchant setuju

Ringkasan

  1. Kustomisasi itu kerjaan theme yang paling umum, dan bedanya sama bikin baru: ini toko beneran dengan uang beneran, jadi harus lebih hati-hati.
  2. Minta akses lewat collaborator account dengan izin Manage themes. Akun ini gak makan jatah staff dan merchant yang nentuin batas aksesnya.
  3. Minta password merchant itu dilarang, titik.
  4. shopify theme pull --store my-store buat download theme merchant. Kalau CLI nyangkut di akun yang salah, shopify auth logout dulu.
  5. shopify theme dev buat preview, gak perlu --store lagi karena udah diinget dari pull.
  6. Development theme hancur kalau kamu logout, jadi jangan pakai link preview-nya buat nunjukin ke merchant.
  7. shopify theme push --unpublished buat ngasih lihat ke merchant tanpa nimpa theme yang lagi tayang. Merchant bisa bandingin dan balik kapan aja.
  8. Publish cuma setelah merchant setuju, dan push dulu sebelum publish.
  9. Kalau kerja samanya jangka panjang, pakai GitHub integration, tapi sepakati dulu siapa yang punya repository-nya, dan idealnya diserahkan ke merchant di akhir.

Bab selanjutnya kita bahas tuntas soal akun dan akses: bikin dev store sendiri buat ngetes, ngisi data contoh, cara kerja collaborator account, dan Theme Access buat ngasih akses ke orang lain tanpa akun Shopify.

Tampilan Grafik

Tautan Balik