Sayudha

56 Design dan Color System

Properties2
descriptionPrinsip desain theme buat pengalaman merchant (purposeful, mudah disetup, antifragile, fleksibel, extensible) dan pembeli (aksesibel, ekspresif, intuitif, kohesif, efisien), plus sistem warna dengan color_palette, override lokal, warna hardcode, dan pola color scheme ke CSS variable
tagsshopify, theme, praktik

10 menit baca

Setelah aksesibilitas di 55 Accessibility, kita ke desain. Bukan soal estetika (itu urusan desainer), tapi soal prinsip yang bikin theme berguna buat dua audiens sekaligus: merchant yang ngatur, dan pembeli yang belanja. Terus kita bahas satu bagian desain yang paling teknis: sistem warna.

Theme yang didesain baik ngasih tau merchant dan pembeli kalau kebutuhan mereka dipikirin. Karena dua audiens ini beda, prinsipnya dibagi dua: pengalaman merchant dan pengalaman pembeli.

Sebelum mulai desain, pastiin ada umpan balik dua arah antara desainer dan developer. Theme gak boleh ngorbanin performa demi desain, dan modularitas section/block dari 54 Best Practices Umum harus dipikirin sejak desain.

Prinsip buat Merchant

1. Purposeful (Bertujuan)

Theme yang bertujuan menyeimbangkan tiga hal: konversi, keputusan beli, dan ekspresi brand. Caranya:

  1. Desain section dan block yang disesuaikan audiens target. Theme buat merchant fashion nyediain block size chart di section utama halaman produk.
  2. Bikin section berbeda per template buat pengalaman berbeda: section upsell khusus buat template cart.
  3. Definisiin segmen berdasarkan audiens, ukuran inventaris, dan pengalaman pembeli, dan bangun prinsip theme dari situ. Toko dengan 20 produk dan 20.000 produk butuh theme yang beda.
  4. Bangun arah seni yang kuat dan berpendapat, tapi seimbangkan sama praktik terbaik ecommerce.
  5. Bikin variasi dari komponen yang sama, bukan dua komponen yang tujuannya sama. Satu section “Image with text” dengan setting layout, bukan “Image left” dan “Image right”.

2. Mudah Disetup

Theme yang mudah disetup menghindari kebingungan merchant waktu kustomisasi dan ngurangin beban sebelum launch:

  1. Theme setting seminimal yang dibutuhin mayoritas merchant. Hindari setting niche dan buat kasus tepi. Tiap setting itu keputusan yang harus diambil merchant.
  2. Pakai block buat ningkatin kegunaan section: kelompokkan setting per komponen biar konten gampang diurutin dan diisi.
  3. Bikin empty state dan placeholder yang memanfaatkan data toko yang ada biar theme kelihatan siap launch. Section “Featured collection” tanpa koleksi terpilih nampilin placeholder produk (placeholder_svg_tag dari 19 Filters HTML, URL, Media, Color, dan Font > 4. placeholder_svg_tag), bukan kosong.

3. Antifragile

Theme antifragile punya komponen yang tangguh dan skala dengan tipe konten apapun:

  1. Komponen gak butuh aset sempurna dan rasio gambar tertentu buat kelihatan profesional. Kartu produk tetap rapi walaupun gambar produknya gak konsisten (pakai object-fit, rasio tetap, dari 59 Performance Gambar dan LCP).
  2. Pakai pendekatan atomic design yang secara sengaja ngatur urutan dan hierarki. Perhatiin urutan semantik elemen.
  3. Layout tetap tangguh berapapun konten yang ditambahin, bahkan kalau konten hilang. Section dengan heading kosong gak boleh nyisain ruang kosong yang aneh.
  4. Sistem font yang tangguh dengan hierarki yang skala buat berbagai skenario: teks lebih pendek buat label kartu produk, lebih panjang buat promosi.
  5. Style font terkait elemen yang tepat: semua heading pakai setting font yang sama biar konsisten.
  6. Sistem warna diterapin konsisten biar kontras selalu optimal buat keterbacaan dan aksesibilitas.
  7. Aksi kritis gak boleh tertutup app yang nambahin komponen melayang (chat, banner cookie). Tombol Add to cart sticky di mobile yang ketutup widget chat itu kehilangan penjualan.

4. Fleksibel

Theme fleksibel nawarin fleksibilitas cuma di tempat yang paling penting buat merchant ngekspresiin brand:

  1. Semua fleksibilitas bisa diprediksi: aksi merchant ngasilin hasil yang diharapkan. Hindari “magic setting” yang ngambil kendali dari merchant (setting yang diam-diam ngubah lima hal lain).
  2. Fleksibilitas yang sejalan sama praktik SEO, aksesibilitas, responsivitas, manajemen konten, dan translasi/lokalisasi. Contoh: sediain field teks bareng setting gambar, biar merchant bisa nambahin gambar dengan teks (bukan gambar yang teksnya di-bake ke dalam gambar, yang gak bisa diterjemahin dan gak aksesibel).
  3. Jangan ngeganti fungsi platform dengan theme setting (bikin sistem diskon sendiri, sistem review sendiri).
  4. Jangan nyediain workaround di luar nampilin dan ngatur konten.

5. Extensible

Theme extensible bantu merchant memperluas fungsi toko tanpa ngorbanin tampilan. Caranya lewat metafield, theme block, dan app block: dukung app block di section yang punya kasus jelas buat alat konversi tambahan, dari 54 Best Practices Umum > 3. Kapan Ndukung App Block.

Prinsip buat Pembeli

1. Aksesibel

Wajib buat Theme Store. Pakai sistem warna di bawah buat palet yang tangguh, dan pastiin komponen menghormati urutan DOM dan tab. Polaris accessibility bisa jadi rujukan.

2. Ekspresif

Sediain section yang bikin merchant bercerita: siapa mereka, nilai apa yang mereka bawa, apa bedanya. Section gambar/video lifestyle, section teks pendek atau panjang dalam layout menarik.

3. Intuitif

Memfasilitasi penemuan produk dan ngarahin ke konversi:

  1. Sesuaikan pengalaman penemuan sama segmen: alur inspirasional buat fashion, di mana cross-selling nyumbang porsi konversi besar.
  2. Navigasi menonjol dan mudah ditemukan, interaksi menu intuitif.
  3. Titik masuk kaya featured collection atau highlighted products yang ngarahin ke funnel pertimbangan beli.
  4. Halaman produk dengan judul, harga, dan tombol beli yang menonjol, deskripsi dan info sekunder gampang ditemukan.
  5. Pola desain yang membangun kepercayaan. Utamakan kepentingan pembeli buat hubungan jangka panjang, hindari dark pattern (countdown palsu, “3 orang lagi lihat ini”, checkbox newsletter yang tercentang default).
  6. Tes dengan pengguna nyata, dengan skenario pengambilan keputusan dan pembelian.

4. Kohesif

Theme kohesif mengartikulasikan brand merchant dengan satu suara sepanjang navigasi. Skala, spasi, bobot komponen, layout, dan halaman konsisten.

5. Efisien

Jalur cepat dan jelas ke checkout:

  1. Batasi langkah pembelian: aktifin accelerated checkout (43 Accelerated Checkout) secara default.
  2. Navigasi dan interaksi dengan umpan balik langsung yang terasa cepat.
  3. Layout mobile-first.
  4. Hindari elemen yang butuh beban kognitif tambahan: pakai ikonografi standar buat menu (hamburger) dan akun (orang), bukan ikon kreatif yang harus ditebak.

Sistem Warna

Warna itu salah satu komponen terpenting theme yang menarik, fungsional, dan aksesibel. Sistem warna yang dirancang baik memperkuat branding merchant dan mengarahkan pengalaman pembeli. Yang harus dipikirin: tampilan keseluruhan dan interaksi antar elemen. Harus ada hierarki (tekankan call-to-action) dan kontras yang cukup antara latar depan dan latar belakang. Ini yang bikin merchant bisa ngasih pengalaman aksesibel ke pembelinya tanpa harus paham teori warna.

Tiga alat yang Shopify sediain, dari 30 Settings dan Input Settings > Specialized Input Settings: Warna:

1. Color Palette

color_palette itu kumpulan warna bernama global yang didefinisiin sekali di settings_schema.json (2 sampai 20 warna). Merchant lihatnya sebagai grid di theme editor dan bisa milih dari situ waktu ngatur setting color atau color_background manapun: di section, block, dan theme setting.

Palet cocok kalau kamu mau merchant tetap di dalam set warna brand yang terdefinisi. Daripada ngetik hex ke tiap picker, merchant milih dari warna yang udah ada. Dan section/block bisa ngerujuk warna palet sebagai default pakai {{ settings.colors.key }}: waktu merchant ngubah satu warna palet, semua setting yang ngerujuknya ikut berubah. Satu tempat buat ngelola warna brand, tanpa perlu paham hubungan warna yang dikelompokkan.

Tips desain palet:

  1. Mulai kecil: cuma warna yang theme butuhin, bukan set generik yang besar. Merchant bisa nambah sendiri di editor.
  2. Nama key mencerminkan kegunaan, bukan tampilan: primary, accent, text lebih jelas dari blue atau dark, karena nilai warnanya bakal berubah (merchant yang ganti blue jadi merah bakal bingung).
  3. Pakai referensi palet buat default warna section dan block, biar satu perubahan menyebar ke seluruh theme.

❌ nama berdasarkan tampilan, salah begitu merchant ganti warnanya

{ "type": "color_palette", "id": "colors", "default": { "blue": "#1A73E8", "dark": "#121212" } }

✅ nama berdasarkan peran

{ "type": "color_palette", "id": "colors", "default": { "primary": "#1A73E8", "text": "#121212", "background": "#FFFFFF" } }

2. Override Lokal

Setting color tanpa default bikin merchant bisa ngeset warna sekali pakai buat section atau block tertentu. Waktu belum diset, nilainya blank di Liquid dan editor nampilin opsi Clear. Pola ini buat merchant yang mau menyimpang dari palet buat elemen tertentu tanpa ngubah theme keseluruhan.

Contoh: section hero banner nawarin override heading_color tanpa default, dan CSS/Liquid theme ngurus fallback-nya:

{% if section.settings.heading_color != blank %}
  --heading-color: {{ section.settings.heading_color }};
{% endif %}

Kalau kosong, CSS variable --heading-color gak di-set di level section, jadi nilai dari level theme (palet/skema) yang berlaku. Ini pasangan yang bagus: palet ngeset baseline, override lokal buat penyesuaian tertarget.

3. Warna Hardcode

Boleh, tapi jangan di elemen yang butuh rasio kontras aksesibel. Warna hardcode buat garis pemisah tipis atau bayangan itu wajar, buat teks di atas latar yang merchant bisa ubah itu gak boleh, karena merchant bisa milih latar yang bikin teksnya gak kebaca.

4. Color Scheme

Alat ketiga, yang paling terstruktur: color_scheme_group dan color_scheme. Skema itu sekumpulan warna yang dirancang bareng (latar, teks, tombol, border) dan dijamin kontras satu sama lain. Merchant milih skema buat tiap section, bukan warna satu-satu, jadi mustahil mereka bikin teks putih di atas latar putih.

Pola implementasinya, dari 15 Objects Konten > 2. color_scheme dan color_scheme_group: loop settings.color_schemes di layout dan bikin class CSS per skema yang ngeset CSS variable:

<style>
  {% for scheme in settings.color_schemes %}
    .color-{{ scheme.id }} {
      --color-background: {{ scheme.settings.background.red }}, {{ scheme.settings.background.green }}, {{ scheme.settings.background.blue }};
      --color-foreground: {{ scheme.settings.text.red }}, {{ scheme.settings.text.green }}, {{ scheme.settings.text.blue }};
      --color-button: {{ scheme.settings.button.red }}, {{ scheme.settings.button.green }}, {{ scheme.settings.button.blue }};
      --color-button-text: {{ scheme.settings.button_label.red }}, {{ scheme.settings.button_label.green }}, {{ scheme.settings.button_label.blue }};
      {% if scheme.settings.background_gradient != blank %}
        --gradient-background: {{ scheme.settings.background_gradient }};
      {% else %}
        --gradient-background: rgb(var(--color-background));
      {% endif %}
    }
  {% endfor %}
  body, .color-{{ settings.color_schemes.first.id }} {
    color: rgb(var(--color-foreground));
    background-color: rgb(var(--color-background));
  }
</style>

Terus tiap section pakai setting color_scheme dan class-nya:

<div class="section color-{{ section.settings.color_scheme.id }}">
  ...
</div>

Kenapa disimpan sebagai komponen RGB (red, green, blue) bukan hex? Biar CSS bisa bikin variasi opasitas dari warna yang sama: rgba(var(--color-foreground), 0.6) buat teks sekunder, rgba(var(--color-foreground), 0.1) buat border. Satu warna skema jadi seluruh hierarki. Properti red/green/blue ada di object color dari 15 Objects Konten > 1. color.

Dan role di color_scheme_group (dari 30 Settings dan Input Settings > 4. color_scheme_group) yang bikin theme editor bisa nampilin preview tiap skema.

5. Kapan Pakai yang Mana

  1. Color scheme: buat theme yang mau menjamin kontras dan ngasih merchant cara cepat ngatur tampilan section (Dawn, Horizon). Merchant mikir dalam “skema 1, 2, 3”, bukan warna individual.
  2. Color palette: buat theme yang brand-nya punya set warna kecil dan merchant butuh satu tempat buat ngatur semuanya, dengan setting warna individual yang ngerujuk palet.
  3. Override lokal: pelengkap keduanya, buat pengecualian sesekali.
  4. Hardcode: cuma buat yang gak butuh kontras.

Dua pendekatan pertama bisa digabung: skema buat section, palet buat warna aksen yang muncul di dalam skema. Apapun pilihannya, tes kontras hasilnya pakai filter color_contrast dari 19 Filters HTML, URL, Media, Color, dan Font > 3. Aksesibilitas atau alat dari 55 Accessibility > Warna dan Kontras.

Ringkasan

  1. Desain buat dua audiens: merchant (purposeful, mudah disetup, antifragile, fleksibel, extensible) dan pembeli (aksesibel, ekspresif, intuitif, kohesif, efisien), dengan umpan balik desainer-developer dan tanpa ngorbanin performa.
  2. Purposeful: section/block sesuai segmen, per template, arah seni berpendapat, variasi bukan duplikat. Mudah disetup: setting minimal, block buat kelompokkan, placeholder dari data toko.
  3. Antifragile: gak butuh aset sempurna, atomic design, tangguh terhadap konten hilang/berlebih, sistem font dan warna konsisten, aksi kritis gak ketutup app. Fleksibel: bisa diprediksi, sejalan praktik terbaik, gak ngeganti platform. Extensible: metafield, theme block, app block.
  4. Pembeli: DOM order, cerita brand, penemuan produk sesuai segmen dengan titik masuk, judul/harga/beli menonjol, tanpa dark pattern, tes pengguna nyata, konsisten, jalur cepat ke checkout dengan ikon standar.
  5. Sistem warna: color_palette (global, 2–20, nama berdasarkan peran, default section lewat {{ settings.colors.key }}), override lokal (color tanpa default, cek blank), hardcode cuma buat non-kontras, dan color_scheme (kumpulan warna yang dijamin kontras, di-loop ke class CSS dengan variable RGB buat variasi opasitas).

Bab selanjutnya kita masuk ke performa, delapan bab berturut-turut. Dimulai dari dasarnya: kenapa performa penting buat merchant, metrik Core Web Vitals (LCP, INP, CLS), cara Shopify ngukur, dan alat buat ngetes theme kamu.

Tampilan Grafik

Tautan Balik