Ikon SVG Khusus Shopify: Siapkan Tanda Merek Bersih

Ikon SVG khusus dapat dimasukkan ke tema Shopify melalui dua cara praktis: unggah file sebagai aset tema dan tampilkan dengan tag image, atau masukkan markup-nya dalam snippet Liquid dan render snippet di lokasi ikon. Jalur pertama lebih sederhana untuk tanda dengan warna tetap. Jalur kedua memberi kontrol langsung atas path dan warna. Kontrol yang muncul dalam editor tema bergantung pada tema Anda, jadi periksa blok ikon yang ada sebelum mengubah kode.

Jika satu-satunya sumber Anda adalah PNG, buat SVG berbasis path terlebih dahulu. Sekadar mengganti nama file tidak mengubah piksel menjadi bentuk. SVG asli yang bersih lebih baik jika tersedia; foto mendetail biasanya lebih baik tetap sebagai gambar. Langkah di bawah membawa piktogram merek kecil dari persiapan file hingga pratinjau tema tanpa mengasumsikan akun merchant atau versi tema tertentu.

Pilih lokasi ikon

Tema Shopify memiliki direktori assets untuk file dan direktori snippets untuk markup Liquid yang dapat digunakan ulang. Shopify mendokumentasikan keduanya dalam arsitektur tema dan menyarankan pemeriksaan opsi editor tema sebelum menyunting kode dalam panduan kode tema. Tema dengan kolom SVG khusus mungkin tidak memerlukan kedua jalur kode di bawah. Keberadaan kolom dalam satu tema tidak berarti setiap tema memilikinya.

Dua jalur penyerahan

Perbedaan ini penting karena CSS halaman tidak dapat menjangkau bagian dalam SVG yang dimuat melalui <img> biasa. Path inline dapat memakai currentColor, yang mengambil nilainya dari properti CSS color. Lihat panduan konteks gambar SVG MDN dan penjelasan currentColor-nya. Untuk contoh browser lebih umum, baca SVG inline dibandingkan tag image.

Siapkan SVG sebelum menyentuh tema

Mulai dengan versi tanda merek terkecil yang masih berguna. Untuk ikon, pertahankan siluet dan bukaan yang disengaja pada ukuran yang benar-benar akan dilihat pelanggan. Tulisan halus atau tekstur yang tampak baik di artboard dapat tidak terbaca pada 20 hingga 32 piksel. Simpan file sumber merek sebagai master; buat ekspor ikon terpisah.

1. Dapatkan kembali sumber bersih. Ekspor SVG dari desain vektor asli jika tersedia. Jika satu-satunya sumber adalah PNG datar, PerfectVector dapat membantu pada satu langkah itu: buat kandidat SVG dengan alur clipart ke SVG, lalu buka file unduhan dalam editor vektor. Bandingkan siluet dan bentuk terpisah dengan PNG. Hasil tracing adalah titik awal, bukan janji geometri identik.
2. Periksa struktur. Pastikan tanda yang terlihat terdiri atas path atau bentuk vektor dasar, bukan satu persegi panjang <image> raster tertanam. Hapus kotak latar yang tidak disengaja, fragmen tersasar, kontur duplikat, dan wilayah warna kecil. Panduan persiapan ikon PNG membahas kisi dan ukuran optis yang konsisten dalam satu set.
3. Tetapkan kanvas dan warna. Berikan viewBox dengan padding yang masuk akal pada ekspor. Pertahankan warna merek tetap jika tanda harus tetap dua warna. Jika ikon satu warna harus mewarisi warna tema, buat path yang dimaksud memakai currentColor. Mengubah warna SVG menjelaskan mengapa fill yang ditetapkan langsung dapat menolak perubahan warna berikutnya.
4. Tinjau file sebagai kode. Pertahankan hanya elemen dan atribut yang diperlukan ikon. Hapus skrip tak terduga, referensi eksternal, data tambahan editor, dan markup tidak tepercaya sebelum menempatkannya inline dalam tema. Buka SVG yang dibersihkan pada ukuran ikon dan ukuran pemeriksaan yang lebih besar; keduanya menemukan kesalahan berbeda.

Untuk bintang monokrom kecil, sumbernya dapat sesederhana ini. Path di bawah adalah contoh asli, bukan ikon yang disediakan Shopify atau hasil konversi PerfectVector. Path memiliki sistem koordinat eksplisit dan tanpa image tertanam:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Tanda merek dua warna memerlukan path atau bentuk terpisah dengan isian yang disengaja. Mengganti setiap warna dengan currentColor akan menghapus perbedaan itu. Jika tanda merupakan bagian keluarga ikon yang lebih besar, terapkan aturan ukuran dan warna yang sama pada beberapa ikon representatif sebelum mengekspor sisanya.

Jalur A: tampilkan aset tema

Filter asset_url Shopify mengembalikan URL CDN untuk file dalam direktori assets tema. Tambahkan SVG yang sudah ditinjau di sana, lalu rujuk nama file persisnya dalam template, section, atau snippet Liquid yang sesuai. Contoh sederhana di bawah mengasumsikan brand-mark.svg adalah tanda dekoratif berwarna tetap di samping teks terlihat:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Gunakan teks alt deskriptif jika gambar menyampaikan informasi yang tidak disampaikan teks di sampingnya. Untuk gambar yang murni dekoratif, alt="" sesuai. Panduan aksesibilitas tema Shopify meminta atribut alt pada setiap image dan nilai kosong pada ikon dekoratif. Lebar dan tinggi eksplisit juga menyediakan ruang saat aset dimuat, sebagaimana dijelaskan panduan pengiriman aset Shopify.

Jalur ini mempertahankan SVG sebagai satu gambar dari sudut pandang halaman. Jika warna tema berubah, perbarui fill SVG atau pilih jalur inline alih-alih menganggap aturan CSS induk akan mewarnai ulang file. Jangan menempelkan URL file dari satu toko ke tema lain; biarkan asset_url meresolusikan aset tema.

Jalur B: render snippet ikon inline

Untuk ikon satu warna yang berulang, masukkan markup SVG yang telah ditinjau ke snippet seperti snippets/brand-mark-icon.liquid. Dokumentasi snippet Shopify memakai {% render %} untuk memasukkan markup yang bisa digunakan ulang. Snippet minimal dapat mengambil warna dari gaya teks di sekitarnya:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Lalu render dalam file tema terkait:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Di sini aria-hidden="true" digunakan untuk ikon yang hanya menghias teks terlihat di dekatnya. Jika ikon sendirian menjadi label tombol atau tautan, berikan nama yang dapat diakses pada kontrol, jangan mengandalkan SVG dekoratif. Uji dengan keyboard dan pembaca layar. Pertahankan warna CSS dan dimensinya dalam sistem gaya normal tema, bukan menyebarkan nilai inline sekali pakai.

Snippet bisa digunakan ulang, tetapi tetap merupakan kode tema. Shopify menyarankan menduplikasi tema sebelum perubahan kode. Buat perubahan pada salinan, pratinjau halaman atau section yang tepat, dan simpan snippet asli agar dapat dibandingkan setelah pembaruan tema. Pustaka ikon khusus tema mungkin memiliki argumen dan strukturnya sendiri; periksa file tersebut sebelum mengganti ikon bawaan. Diskusi Shopify Community saat ini tentang pustaka ikon menggambarkan mengapa merender seluruh pustaka belum tentu sama dengan memilih satu ikon di dalamnya.

Periksa hasil penyerahan pada ukuran akhir

File dapat valid secara teknis tetapi tampak salah di storefront. Tinjau halaman pada latar terang dan gelap jika tema memakainya. Periksa tanda pada ukuran CSS sebenarnya, pada viewport sempit, dan di samping ikon tetangganya. Pastikan lubang tetap terbuka, warna memiliki kontras cukup, dan ikon tidak terpotong oleh viewBox atau wadahnya.

Jika aset muncul sebagai persegi panjang kabur saat diperbesar, periksa raster tertanam. Jika ikon inline mengabaikan warna tema, cari fill yang ditetapkan langsung, gaya inline, atau selector yang lebih spesifik. Jika tidak ada yang muncul, periksa nama file aset atau nama snippet dahulu, lalu markup section tema sendiri. Jangan mengubah beberapa hal sekaligus. Panduan ikon mask CSS membahas jalur lain ketika Anda perlu mewarnai ulang siluet tanpa menyematkan path-nya inline.

Untuk piktogram datar Anda sendiri yang hanya berupa raster, buat kandidat SVG dengan PerfectVector, lalu periksa path, bukaan, dan warna pada ukuran ikon yang dimaksud sebelum memilih jalur tema. Jika Anda sudah memiliki SVG baik, lewati tracing dan gunakan waktu tersebut untuk pratinjau storefront.

FAQ

Bisakah saya mengunggah ikon SVG melalui layar Customize setiap tema Shopify? Tidak. Sebagian tema menyediakan kolom ikon atau SVG khusus; yang lain memerlukan aset atau penyuntingan kode. Periksa section dan dokumentasi tema tertentu sebelum menganggap kolom tersebut ada.

Mengapa SVG yang saya unggah tidak mengikuti warna tema? SVG yang digunakan melalui tag image adalah sumber daya gambar, sehingga CSS halaman tidak memberi gaya pada path internalnya. Sunting fill SVG untuk aset berwarna tetap, atau gunakan markup inline yang ditinjau dengan currentColor ketika warna yang mengikuti tema diperlukan.

Haruskah saya mengonversi ikon merek PNG ke SVG sebelum menambahkannya? Konversikan piktogram datar jika memerlukan path yang dapat diskalakan dan diedit. Periksa hasil tracing pada ukuran ikon yang dimaksud dan hapus bentuk tersasar. Pertahankan foto atau gambar bertekstur sebagai raster jika tracing akan membuang detail yang menjadi cirinya.

Sources

1. Shopify Developers — Arsitektur tema — Aset tema, snippet, dan lokasi markup.
2. Shopify Developers — asset_url — Perilaku URL aset tema yang digunakan dalam contoh Liquid.
3. Shopify Developers — Snippets — Markup Liquid yang bisa digunakan ulang dan tag render.
4. Shopify Help Center — Menyunting kode tema — Pendekatan melalui editor terlebih dahulu, duplikasi tema, dan perhatian dalam perubahan kode.
5. Shopify Developers — Praktik terbaik aksesibilitas — Teks alt dan penanganan ikon dekoratif.
6. Shopify Developers — Sajikan aset dari CDN Shopify — Filter aset dan dimensi image eksplisit.
7. MDN — SVG sebagai gambar — Batasan konteks gambar browser.
8. MDN — Atribut color SVG — Cara currentColor menyediakan nilai bagi fill dan stroke SVG.