Salah satu elemen desain yang sering disesuaikan adalah padding pada section halaman Shopify. Dengan menyesuaikan padding, kita dapat mengontrol ruang di sekitar elemen untuk mengatur jarak antar section.
Dalam artikel ini, kami akan menjelaskan langkah-langkah detail untuk menyesuaikan padding pada section di Shopify menggunakan Liquid, CSS, dan Theme Editor menggunakan liquid.
Apa itu Liquid?
Liquid adalah bahasa template open-source yang dikembangkan oleh Shopify. Bahasa ini digunakan untuk membuat dan menyesuaikan tema di Shopify, memungkinkan pengembang dan pemilik toko untuk menampilkan konten secara dinamis berdasarkan data toko mereka.
Fitur Utama Liquid:
- Tag Template: Digunakan untuk mengontrol alur logika, seperti perulangan (
for), kondisi (if), dan variabel (assign). - Filter: Digunakan untuk memodifikasi output, seperti mengubah teks menjadi huruf besar atau memformat angka.
- Objek: Berisi data yang dapat diakses dalam tema Shopify, seperti produk, koleksi, pelanggan, dan keranjang belanja.
Contoh Penggunaan Liquid dalam Shopify
Berikut ini cara sederhana penggunaan bahasa pemrograman menggunakan liquid di shopify:
{% if product.available %}
<p>Produk tersedia untuk dibeli!</p>
{% else %}
<p>Maaf, produk ini sedang habis.</p>
{% endif %}
Baca juga: Cara Buat Kustom Section Shopify Liquid
Cara Membuat Kustom Padding di Shopify
Ada beberapa cara yang dapat Anda gunakan dalam membuat kustom padding atau mengatur jarak antar section di Shopify. Berikut ini beberapa alternatif metode yang dapat di coba:
- Melalui Theme Editor, Ingat! tidak semua tema shopify memiliki fitur padding
- Menggunakan CSS Kustom
- Mengedit File Liquid untuk Kontrol Lebih Lanjut
Saya akan membahas ketiga metode ini secara mendalam.
1. Menyesuaikan Padding melalui Theme Editor
Banyak tema Shopify yang memungkinkan pengeditan padding langsung melalui Theme Editor. Berikut caranya:
- Masuk ke Admin Shopify
- Navigasikan ke Online Store > Themes
- Klik Customize pada tema aktif
- Pilih section yang ingin disesuaikan
- Cari opsi Padding (biasanya dalam tab Layout atau Spacing)
- Sesuaikan nilai padding sesuai keinginan
- Klik Save untuk menyimpan perubahan
Catatan: Tidak semua tema memiliki opsi padding di Theme Editor. Jika tidak tersedia, gunakan metode CSS atau Liquid.
2. Menggunakan CSS Kustom
Jika tema Anda tidak menyediakan opsi padding di Theme Editor, Anda dapat menggunakan CSS kustom.
Langkah-langkahnya:
- Masuk ke Shopify Admin > Online Store > Themes
- Klik Actions > Edit code
- Buka file theme.css atau base.css di dalam folder Assets
- Tambahkan kode berikut di bagian bawah file:
.custom-section {
padding-top: 50px; /* Atur padding atas */
padding-bottom: 50px; /* Atur padding bawah */
padding-left: 20px; /* Atur padding kiri */
padding-right: 20px; /* Atur padding kanan */
}
5. Untuk menerapkan padding pada section tertentu, tambahkan class .custom-section ke elemen yang diinginkan dalam file Liquid
6. Gunakan media-query CSS untuk kontrol di setiap layar/perangkat lebih responsive,
3. Menggunakan Shopify Liquid
Jika Anda ingin kontrol lebih lanjut di setiap section, Anda dapat mengedit atau menambahkan kode kustom Liquid untuk menentukan padding.
Langkah-langkahnya:
- Buka Shopify Admin dan masuk ke Online Store > Themes
- Klik Actions > Edit Code
- Navigasi ke folder Sections dan pilih file yang ingin disesuaikan, misalnya
custom-section.liquid - Tambahkan parameter kontrol padding dalam schema, lihat kode dibawah ini
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"min": 0,
"max": 200,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"min": 0,
"max": 200,
"step": 5,
"unit": "px",
"default": 20
}
jika ingin menambahkan padding-left dan padding-right juga bisa, tambahkan kode lengkapnya berikut ini di schema liquid shopify
{
"name": "Custom Section",
"settings": [
{
"type": "range",
"id": "padding_top",
"label": "Padding Atas",
"min": 0,
"max": 100,
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bawah",
"min": 0,
"max": 100,
"default": 20
},
{
"type": "range",
"id": "padding_left",
"label": "Padding Kiri",
"min": 0,
"max": 100,
"default": 10
},
{
"type": "range",
"id": "padding_right",
"label": "Padding Kanan",
"min": 0,
"max": 100,
"default": 10
}
]
}
5. Selanjutnya, tambahkan class “section-{{ section.id }}-padding” di dalam tag HTML section yang Anda buat. Sebagai contoh lihat kode berikut ini:
Baca juga: Cara Menampilkan Nama Template Shopify dengan Liquid
<div class="section-{{ section.id }}-padding">
6. Tambahkan kode css, namun ini juga menggunakan liquid. Ini kodenya:
{%- style -%}
@media all and (min-width: 601px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media all and (max-width: 600px) {
.section-{{ section.id }}-padding {
padding-top: calc({{ section.settings.padding_top }}px * 0.40);
padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.40);
}
}
{%- endstyle -%}
atur media-query CSS dan jarak antar section sesuai kebutuhan ya!
7. Simpan file dan kembali ke Theme Editor, sekarang Anda dapat mengubah padding dengan kontrol slider langsung.
Tips Tambahan untuk Optimalisasi Padding
- Gunakan unit relatif seperti
em,rem, atau%untuk padding agar lebih responsif - Hindari padding berlebihan yang dapat mengganggu tata letak
- Gunakan media queries untuk menyesuaikan padding di perangkat mobile
Kesimpulan
Membuat kustom padding section di Shopify bisa dilakukan melalui beberapa cara, mulai dari Theme Editor yang sederhana, hingga menggunakan CSS dan Liquid untuk fleksibilitas lebih lanjut. Dengan memahami teknik ini, Anda dapat mengoptimalkan desain toko online agar lebih menarik dan profesional.
Cara ini dapat dilakukan apabila pada tema tidak tersedia kontrol untuk mengatur padding setiap section di shopify. Semoga bermanfaat ya, terima kasih sudah berkunjung!
