Shopify adalah platform e-commerce yang banyak digunakan oleh pebisnis untuk membangun toko online dengan cepat dan efisien.
Meskipun Shopify menyediakan berbagai tema siap pakai, sering kali pengguna ingin melakukan penyesuaian agar tampilan toko lebih sesuai dengan identitas dan kemauan mereka.
Salah satu cara terbaik untuk melakukan ini adalah dengan menambahkan kustom CSS di Shopify, yang memungkinkan perubahan tampilan tanpa perlu mengubah struktur dasar tema.
Alasan dan Manfaat Menambahkan Kustom CSS di Shopify
CSS (Cascading Style Sheets) digunakan untuk mengontrol tampilan dan tata letak situs web. Dengan menambahkan CSS kustom, Anda dapat:
- Menyesuaikan warna, font, dan ukuran teks,
- Mengubah tata letak elemen di halaman toko,
- Menambahkan efek hover, animasi, dan transisi,
- Meningkatkan pengalaman pengguna (UX) dan konversi penjualan,
- Menghindari kerusakan tema asli, dan kehilangan kode CSS
Cara Menambahkan Kustom CSS di Shopify
Ikuti beberapa panduan atau cara menambahkan kustom CSS di Shopify, ketahui kekurangan dan kelebihan setiap metodenya berikut ini:
1. Edit File Tema CSS Shopify
Cara pertama yang dapat Anda lakukan adalah menggunakan file CSS tema asli yang aktif. Ada beberapa kekurangan menggunakan cara ini, yaitu jika tema Anda sering melakukan update otomatis dari pembuat tema ada kemungkinan kode CSS yang Anda buat akan hilang.
Bagaimana menghindari sebelum terjadi kehilangan kode CSS? Perlu melakukan backup setiap kali melakukan perubahan. Namun, jika tema tidak akan di update secara berkala, itu tidak akan masalah dilakukan. Mau coba? ikuti caranya berikut ini ya:
- Login ke akun Shopify Anda.
- Navigasi ke Online Store » Themes.
- Pilih tema yang sedang aktif, lalu klik Edit Code.
- Selanjutnya akan diarahkan ke halaman editor Tema,
- Pada kolom pencarian ketikkan theme.css atau base.css. Penamaan file general CSS setiap tema berbeda-beda, namun pada umumnya menggunakan nama theme.css.
- Beriku komentar atau penanda dimana kustom kode css Anda di buat, ini sebagai penanda mempermudah pencarian kustom kode cssnya.
7. Simpan perubahan jika sudah selesai. Jangan lupa untuk backup tema Shopify ya, untuk jaga-jaga.
2. Membuat File CSS Baru
Panduan selanjutnya adalah menggunakan metode pembuatan file css baru. Bagaimana caranya? simak satu persatu atau tahapannya dibawah ini ya:
- Akses tema editor Shopify yang Anda gunakan. Silahkan lihat panduan diatas pada langkah 1 hingga 3.
- Buka folder Assets, lalu klik pada bagian Add a new assets.
3. Nantinya akan muncul popup, Anda dapat mengunggah file css yang sudah Anda buat sebelumnya atau membuat file baru. Jika ingin membuat baru, klik tab Create a blank file.
4. Pilik extention CSS ya, lalu isikan nama file CSS. Sebagai contoh kustom.css.
5. Klik tombol tombol Done.
6. Selanjutnya, buka dan edit file theme.liquid. Ketikkan saja nama file pada kolom pencarian untuk mempercepat pencarian file. Tambahkan kode di bawah ini di dalam tag <head> atau sebelum tag penutup </head>.
Cara 1:
<link rel="stylesheet" href="{{ 'kustom.css' | asset_url }}">
Cara 2:
{{ 'kustom.css' | asset_url | stylesheet_tag }}
diatas ada 2 cara, pilih salah satu ya jangan menerapkan kedua caranya bersamaan.
7. Klik Save dan periksa tampilan toko Anda.
3. Menggunakan Editor CSS di Pengaturan Tema
Beberapa tema Shopify memiliki editor CSS langsung, yang memungkinkan pengguna menambahkan CSS langsung dari menu kustomisasi tanpa harus mengedit kode tema. Caranya:
- Buka Online Store > Themes > Customize.
- Cari opsi Custom CSS.
- Tambahkan kode CSS sesuai kebutuhan.
- Klik Save dan lihat hasilnya di toko Anda.
Kekurangannya menggunakan metode ini adalah tampilan editor css yang sangat kecil, ini sangat kesulitan jika terlalu banyak css selector yang digunakan.
4. Menggunakan Editor CSS Section
Ternyata Shopify juga memberikan fitur kustom CSS di setiap masing-masing section yang digunakan. Bagaiaman cara akses dan menggunakannya? Ini cara mudahnya:
- Buka Online Store > Themes > Customize.
2. Tambahkan section, lalu lihat pada bagian sidebar sebelah kanan akan Anda temukan Custom CSS di bagian bawahnya,
3. Tambahkan kode kustom Css
4. Klik tombol Save.
Sayangnya pada metode ini banyak kekurangan. Diantaranya adalah ada limit atau batas baris kode css, jika terlalu banyak kode css tidak dapat di simpan. Selain itu tidak dapat menggunakan selector css menggunakan ID, hanya class saja.
Tips Optimalisasi Kustom CSS di Shopify
- Gunakan Selectors yang Spesifik – Agar perubahan hanya berlaku pada elemen tertentu tanpa mempengaruhi elemen lain.
- Gunakan !important dengan Bijak – Hindari penggunaan
!importantkecuali benar-benar diperlukan. - Gunakan Developer Tools – Gunakan Inspect Element (F12) di browser untuk mengetahui kelas yang perlu dimodifikasi.
- Optimalkan Performa CSS – Hindari kode yang tidak perlu untuk mempercepat waktu loading halaman.
- Gunakan Variabel CSS – Jika tema mendukung, gunakan variabel untuk memudahkan perubahan warna dan font.
Kesimpulan
Menambahkan kustom CSS di Shopify memungkinkan Anda untuk menyesuaikan tampilan toko sesuai kebutuhan bisnis dan meningkatkan pengalaman pengguna.
Dengan mengikuti langkah-langkah di atas, Anda bisa mengubah warna, tata letak, hingga animasi tanpa mengganggu fungsi utama Shopify. Pastikan untuk selalu menguji perubahan sebelum diterapkan secara penuh di toko Anda.
Jika Anda ingin membaca lebih banyak informasi tentang pengembangan dan Seo Shopify, kunjungi kategori Shopify dan SEO pada blog ini. Terima kasih atas kunjungan Anda.
