Mengedit kode tema

Perhatian

Jika perubahan yang Anda buat pada kode tema tidak kompatibel dengan pembaruan tema, semua perubahan kode Anda akan dihapus dalam salinan yang diperbarui. Sebaiknya Anda hanya mengedit kode tema jika tidak dapat membuat perubahan yang diperlukan menggunakan aplikasi Shopify atau editor tema.

Anda dapat mengedit kode tema untuk membuat perubahan mendetail pada toko online Anda dengan editor kode. Sebagian besar file yang menyusun tema berisi Liquid, bahasa templating dari Shopify. File tema juga berisi HTML, CSS, JSON, dan JavaScript. Edit kode untuk tema hanya jika Anda memahami HTML dan CSS, serta memiliki pemahaman dasar tentang Liquid.

Anda hanya dapat mengedit kode tema setelah membelinya. Ini termasuk menggunakan generator kode AI di editor tema. Jika Anda menggunakan versi uji coba dari tema berbayar, Anda perlu membelinya sebelum dapat membuat perubahan kode.

Kembangkan bisnis Anda

Jika Anda ingin menambahkan fitur atau kode kustom tetapi tidak memiliki pengalaman mengembangkan situs web dengan HTML, CSS, dan JavaScript, pertimbangkan untuk menyewa Shopify Partner.

Perhatian

Untuk mempersiapkan penyesuaian tema, selesaikan tugas-tugas yang direkomendasikan berikut:

• Duplikasikan tema Anda untuk membuat salinan cadangan. Hal ini memudahkan Anda untuk membuang perubahan dan memulai dari awal lagi jika perlu.
• Pastikan Anda memahami tingkat dukungan yang tersedia.
• Pelajari persyaratan dan praktik terbaik untuk mengunggah gambar.

Editor kode menampilkan direktori file tema Anda, dan ruang untuk menampilkan serta mengedit file. Saat Anda mengeklik file di direktori, file tersebut akan terbuka di editor kode. Anda dapat membuka dan mengedit beberapa file secara bersamaan. Anda juga dapat membuka dan meninjau beberapa file secara bersamaan.

Mengedit kode tema Anda

Anda dapat menggunakan editor kode untuk mengubah file tema Anda.

Langkah-langkah:

Desktop

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

Ponsel

1. Dari aplikasi Shopify, ketuk ikon .

2. Di bagian Saluran Penjualan, ketuk Toko Online.

3. Ketuk Kelola tema.

4. Ketuk > Edit kode.

Menyimpan perubahan

Saat Anda mengedit file, sebuah titik ditampilkan di sebelah nama tab untuk menunjukkan perubahan yang belum disimpan. Klik tombol Simpan untuk menyimpan perubahan Anda. Anda juga dapat menekan ⌘ + S di Mac atau Ctrl + S di Windows untuk menyimpan perubahan.

Memformat kode tema

Untuk memperbaiki indentasi kode, buka Palet Perintah dengan ⌘ + Shift + P di Mac atau Ctrl + Shift + P di Windows, ketik format, lalu pilih Format dokumen.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Buka file yang ingin Anda format.

4. Tekan ⌘ + P di Mac atau Ctrl + P di Windows.

5. Di palet perintah, ketik format, lalu tekan Enter di keyboard Anda.

6. Simpan file.

Melacak perubahan file

Untuk memulihkan file tema yang telah diubah ke versi sebelumnya, gunakan tampilan Riwayat aktivitas untuk file tersebut.

Tampilan Riwayat aktivitas memulihkan satu file yang ada dalam satu waktu. Fitur ini tidak memulihkan keseluruhan tema, serta tidak dapat memulihkan file tema yang telah dihapus. Riwayat aktivitas ini bersifat terbatas, sehingga versi yang lebih lama mungkin tidak tersedia.

Proses pemulihan akan mengganti seluruh konten file, termasuk perubahan yang mungkin ingin Anda pertahankan. Sebelum memulihkan file, simpan salinan konten file saat ini ke tempat yang aman jika Anda ingin mempertahankan perubahan apa pun.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Buka file yang ada dan ingin ditinjau atau dipulihkan.

4. Opsional: Jika ingin mempertahankan perubahan saat ini, salin konten file tersebut ke tempat yang aman sebelum melakukan pemulihan.

5. Pada tampilan Riwayat aktivitas, klik salah satu entri dalam riwayat aktivitas untuk membandingkan perbedaannya.

6. Untuk mengganti seluruh konten file dengan versi sebelumnya yang dipilih, klik kanan pada entri riwayat aktivitas, lalu pilih Pulihkan konten.

7. Klik Pulihkan.

Pemeriksaan Tema

Editor kode menyertakan Theme Check, sebuah fitur yang membantu mencegah error dengan memberikan umpan balik langsung saat kode sedang ditulis, daripada menemukan error di tema langsung Anda.

Di editor kode, Theme Check dapat mengidentifikasi error berikut di dalam kode yang diedit:

• Skrip pemblokiran parser, yang dapat memperlambat etalase toko online
• Inkonsistensi antar file terjemahan, seperti kunci terjemahan yang hilang atau terjemahan yang tidak cocok dalam file lokal
• Templat yang hilang

Error ditandai dengan garis merah di bawah kode. Untuk melihat error, arahkan mouse ke baris yang disorot.

Mencari dan mengganti di editor kode

Anda dapat mencari di dalam editor kode dengan salah satu cara berikut:

• Mencari kode file tertentu.
• Mencari kode semua file di tema.

Anda juga dapat mengganti kode di file tertentu atau beberapa instance di semua file tema. Anda juga dapat mencari file berdasarkan nama untuk membuka file.

Mencari di dalam file

Anda dapat mencari kode di file tertentu dan mengganti kode tersebut. Gunakan tombol panah untuk meninjau setiap instance kode.

Setelah mencari kode, Anda dapat mengganti kode di dalam file.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Buka file yang ingin Anda cari.

4. Tekan ⌘ + F di Mac atau Ctrl + F di Windows.

5. Di kolom Cari, masukkan istilah pencarian Anda.

6. Opsional: Untuk mengganti kode, lakukan tindakan berikut:

• Di modal pencarian, klik ikon .
• Di kolom Ganti, masukkan kode pengganti. Anda dapat mengeklik Pertahankan kapitalisasi untuk mencocokkan kapitalisasi kode pengganti dengan instance yang ada.
• Klik ikon Ganti untuk mengganti instance satu per satu, atau klik ikon Ganti semua untuk mengganti semua instance sekaligus.

Mencari di semua file

Klik tombol pencarian di sidebar kiri untuk mencari di semua file tema. Hasil akan menampilkan setiap instance istilah pencarian Anda dan file tempat instance tersebut muncul.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Klik ikon untuk membuka panel pencarian.

4. Di kolom Cari, masukkan istilah pencarian Anda.

5. Opsional: Untuk mengganti kode, lakukan tindakan berikut:

• Di modal pencarian, klik ikon .
• Di kolom Ganti, masukkan kode pengganti.
• Ganti satu instance satu per satu, atau semua instance sekaligus.

Opsi pencarian lanjutan

Untuk mempersempit hasil pencarian, gunakan satu atau beberapa opsi pencarian berikut:

• Cocokkan kapitalisasi menampilkan istilah pencarian yang cocok kapitalisasinya. Misalnya, jika Anda memasukkan product, pencarian akan menyorot setiap instance "product" atau "Product". Jika Anda memilih Cocokkan kapitalisasi, pencarian hanya akan menyorot instance product.
• Cocokkan Seluruh Kata menampilkan istilah pencarian yang cocok dengan kata yang persis sama, dan mengecualikan pencocokan sebagian. Misalnya, jika Anda memasukkan cart, pencarian akan menyorot instance "cart", tetapi tidak "carton".
• Gunakan Ekspresi Reguler menampilkan hasil pencarian yang cocok dengan ekspresi reguler (regex). Regex adalah serangkaian karakter yang menentukan pola pencocokan dalam teks.

Perhatian

Menggunakan regex adalah teknik kustomisasi lanjutan. Anda dapat menggunakan alat pihak ketiga seperti regex101 atau RegExr untuk panduan dalam membuat string regex.

Di panel Cari, Anda juga dapat memilih file dan folder untuk disertakan atau dikecualikan dari hasil pencarian.

Klik untuk membuka menu lanjutan. Anda dapat memasukkan path file atau folder apa pun di kolom file untuk disertakan atau file untuk dikecualikan. Untuk menambahkan lebih dari satu file atau folder, pisahkan dengan spasi dan koma. Misalnya, untuk mencari file di folder sections, masukkan ./sections di kolom file untuk disertakan.

Anda juga dapat mencari di dalam folder tertentu dari tampilan direktori file. Klik kanan pada folder, lalu pilih Temukan di folder... dari menu tarik-turun.

Mengelola file tema

Anda dapat mengelola file di dalam kode tema. Anda dapat menghapus file, menambahkan file baru, mengganti nama file, dan memulihkan file kode yang telah dimodifikasi dari tampilan Riwayat aktivitas jika versi sebelumnya tersedia. File aset, seperti gambar, CSS, JavaScript, dan font di folder assets, tidak memiliki riwayat aktivitas.

Membuka file tema

Untuk membuka file tema, klik folder, lalu klik nama file dari explorer. Anda juga dapat mencari file berdasarkan nama atau ekstensi, lalu membuka file tersebut.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Tekan ⌘ + P di Mac atau Ctrl + P di Windows.

4. Masukkan nama file di bilah pencarian dan pilih file, atau pilih file dari daftar Baru saja dibuka.

Menambahkan file tema baru

Untuk menambahkan file, pilih folder, klik ikon File baru, lalu masukkan nama file dan ekstensi file.

Nama file dapat berisi karakter A-Z, 0-9, dan tidak boleh berisi spasi. Pisahkan kata dengan tanda hubung atau garis bawah. Ekstensi file ditentukan oleh titik . dan jenis ekstensi. Misalnya, .liquid atau .css.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Klik folder tempat Anda ingin menambahkan file baru.

4. Klik kanan nama folder dan pilih File baru... dari menu tarik-turun.

5. Masukkan nama baru untuk file tersebut.

6. Tekan Enter di keyboard Anda.

Mengunggah aset baru

Anda dapat mengunggah aset baru, seperti ikon atau file gambar, ke folder assets di editor kode.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Klik kanan pada folder assets.

4. Klik Unggah....

5. Pilih file yang ingin Anda unggah.

6. Klik Buka.

Mengganti nama file tema

Anda dapat mengeklik kanan file untuk mengganti namanya. Pastikan untuk tidak mengedit atau menghapus ekstensi file. Ekstensi file ditentukan oleh titik . dan jenis ekstensi. Contohnya, .liquid atau .css. Nama file dapat berisi karakter A-Z, 0-9, dan tidak boleh berisi spasi. Pisahkan kata dengan tanda hubung atau garis bawah. Jika nama file tidak valid, nama file yang baru tidak akan disimpan.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Klik kanan file, lalu pilih Ganti nama... dari menu tarik-turun.

4. Masukkan nama baru untuk file tersebut.

5. Tekan Enter di keyboard Anda.

Menghapus file tema

Perhatian

Menghapus file tema dapat merusak tema Anda. Sebelum menghapus file apa pun, pastikan untuk membuat duplikat tema Anda.

Anda dapat menghapus file apa pun di tema Anda. File tema yang dihapus tidak dapat dipulihkan.

Langkah-langkah:

1. Dari admin Shopify, buka Toko Online > Tema.

2. Klik > Edit kode.

3. Klik kanan file dan pilih Hapus permanen dari menu tarik-turun.

4. Klik Hapus.