Sayudha

01 Apa itu Theme Shopify

Properties2
descriptionMengenal apa itu theme Shopify, bahannya, dan cara kerjanya
tagsshopify, theme, dasar

10 menit baca

Ini bab pertama dari buku Shopify Theme. Belum ada kode yang ditulis di sini, kita kenalan dulu sama medan perangnya biar pas masuk ke bab-bab berikutnya gak kaget.

Kalau kamu buka toko online yang jalan di Shopify, semua yang kamu lihat di layar itu hasil kerja theme: halaman depan, daftar produk, halaman produk, keranjang, sampai halaman “produk tidak ditemukan”. Theme itu yang ngatur susunan, fitur, dan tampilan toko online milik merchant (sebutan Shopify buat pemilik toko).

Analoginya gini: Shopify itu mesin dan gudangnya, dia yang nyimpen produk, ngurus stok, ngitung harga, dan nerima pembayaran. Sedangkan theme itu etalase dan interior tokonya, dia yang nentuin barangnya dipajang gimana, rak-raknya di mana, dan kasirnya ada di sebelah mana. Mesin yang sama bisa dipasangin etalase yang beda-beda, dan itulah kenapa dua toko Shopify bisa kelihatan sama sekali berbeda.

Theme Itu Terbuat dari Apa?

Theme Shopify dibangun pakai lima bahan:

  1. Liquid, bahasa templating bikinan Shopify. Ini bahan utamanya, dan kita bahas tuntas di 09 Dasar Liquid sampai 20 Filters Money, Metafield, Cart, Customer, dan Localization.
  2. HTML, buat struktur halamannya.
  3. CSS, buat gayanya.
  4. JavaScript, buat interaksinya.
  5. JSON, buat nyimpen konfigurasi yang bisa diubah merchant lewat theme editor.

Kalau kamu udah pernah bikin website biasa, tiga di tengah (HTML, CSS, JavaScript) udah familiar. Yang baru cuma Liquid dan cara Shopify ngatur JSON-nya. Jadi jangan takut, ini bukan belajar dari nol.

Cara Kerjanya

Ini bagian yang paling penting dipahami sebelum apa-apa.

Theme kita gak pernah nulis data produk secara langsung. Kita gak nulis “Kaos Polos Hitam, Rp 85.000” di dalam file theme. Yang kita tulis itu cetakannya, terus Shopify yang ngisi cetakan itu pakai data dari toko merchant tiap kali ada pengunjung buka halaman.

Bayangin kamu bikin undangan pernikahan. Kamu gak nulis satu-satu nama tamunya pakai tangan. Kamu bikin satu desain dengan tulisan “Kepada Yth. ___”, terus mesin cetak yang ngisi nama tamunya dari daftar. Nah, desain undangan itu theme, daftar tamunya itu database Shopify, dan mesin cetaknya itu Liquid.

❌ salah, ini nulis data mentah di theme, kalau produknya ganti harus edit kode

<h1>Kaos Polos Hitam</h1>
<p>Rp 85.000</p>

✅ benar, ini cetakannya, Shopify yang ngisi datanya sendiri

<h1>{{ product.title }}</h1>
<p>{{ product.price | money }}</p>

Kode kedua itu Liquid. {{ product.title }} artinya “taruh judul produk di sini”, dan | money artinya “format angkanya jadi mata uang”. Satu cetakan ini bisa dipakai buat semua produk di toko, mau seribu produk pun tetap satu file.

Prosesnya tiap kali pengunjung buka halaman:

  1. Pengunjung minta halaman, misalnya /products/kaos-polos-hitam.
  2. Shopify nyari template mana yang cocok buat halaman produk.
  3. Shopify ngisi semua {{ ... }} dan {% ... %} di dalam Liquid pakai data produk itu.
  4. Hasilnya HTML biasa yang dikirim ke browser pengunjung.

Jadi browser gak pernah lihat Liquid. Yang nyampe ke browser udah HTML jadi. Ini beda sama framework JavaScript kaya React yang ngerender di browser. Liquid itu dirender di server Shopify.

Susunan Sebuah Halaman

Tiap halaman toko disusun dari enam lapisan yang saling bertumpuk. Ini cuma kenalan dulu, tiap lapisan punya babnya sendiri di Bagian 3:

  1. Layout, dasar dari semuanya. Isinya bagian yang muncul di semua halaman kaya <head>, header, dan footer. Bahasannya di 22 Layouts.
  2. Template, yang nentuin isi utama sebuah jenis halaman: halaman produk, halaman koleksi, halaman keranjang, dan seterusnya. Bahasannya di 23 Templates.
  3. Section groups, wadah di dalam layout (kaya header dan footer) yang bikin merchant bisa nambah, ngurangin, dan ngurutin section di situ. Bahasannya di 27 Section Groups dan Migrasinya.
  4. Sections, modul konten yang bisa dipakai ulang dan diatur merchant, kaya “banner hero”, “produk unggulan”, atau “testimoni”. Ini yang paling sering kita bikin. Bahasannya di 26 Sections dan Section Schema.
  5. Blocks, modul yang lebih kecil lagi di dalam section, misalnya di section “produk unggulan” ada block “judul”, block “harga”, block “tombol beli” yang bisa diurutin merchant. Bahasannya di 28 Blocks dan 29 Theme Blocks Mendalam.
  6. Snippets, potongan kode Liquid yang bisa dipanggil dari mana aja, kaya fungsi. Misalnya potongan kode buat nampilin bintang rating yang dipakai di banyak tempat. Bahasannya di 21 Gambaran Arsitektur Theme.

Urutannya dari luar ke dalam: layout → template → section → block, dengan snippet yang bisa dipanggil dari mana aja. Kaya kotak di dalam kotak di dalam kotak.

Struktur Foldernya

Theme Shopify wajib pakai susunan folder ini, gak boleh dikarang sendiri:

.
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers
    └── metaobject

Sekilas fungsinya:

  1. assets, semua file pendukung: gambar, CSS, JavaScript.
  2. blocks, file-file block yang bisa dipakai di banyak section.
  3. config, file JSON berisi pengaturan theme yang bisa diubah merchant.
  4. layout, file layout, minimal ada theme.liquid.
  5. locales, file terjemahan biar theme bisa multi bahasa.
  6. sections, file-file section.
  7. snippets, file-file snippet.
  8. templates, file-file template, dengan sub-folder customers (halaman akun pelanggan) dan metaobject.

Dua hal yang wajib diinget:

Pertama, subfolder selain yang di atas gak didukung. Kamu gak bisa bikin assets/css/ atau sections/homepage/ biar rapi. Semua file harus rata di dalam foldernya masing-masing.

❌ salah, Shopify gak kenal subfolder ini

assets/
└── css/
    └── style.css

✅ benar, semua file rata di dalam assets

assets/
└── style.css

Kedua, satu-satunya yang wajib ada cuma layout/theme.liquid. Cuma dengan satu file itu, theme udah bisa di-upload ke Shopify. Sisanya opsional, walaupun theme yang cuma satu file ya gak bakal berguna.

Detail lengkap tiap folder ada di 21 Gambaran Arsitektur Theme. Kalau mau lihat contoh theme lengkap yang beneran dipakai jutaan toko, buka repository Dawn di GitHub, itu theme resmi bikinan Shopify.

Dua Jenis Pekerjaan Theme

Ada dua hal yang biasanya dikerjain developer theme, dan dua-duanya punya jalur sendiri di buku ini.

1. Bikin Theme Baru

Dari nol, biasanya berangkat dari Skeleton theme bawaan Shopify yang isinya kerangka kosong. Ini pekerjaan besar dan biasanya buat klien yang punya kebutuhan spesifik banget, atau buat dijual di Theme Store. Bahasannya di 02 Bikin Theme Baru dari Skeleton.

2. Kustomisasi Theme yang Udah Ada

Ini pekerjaan yang paling umum. Merchant udah punya theme (beli atau gratis), terus minta diubah dikit-dikit atau dirombak. Mulai dari ganti warna sampai nambah fitur baru. Bahasannya di 03 Kustomisasi Theme Milik Merchant.

Kalau kamu baru mulai, kemungkinan besar kerjaan pertamamu itu kustomisasi, bukan bikin dari nol.

Cara Nyebarin Theme

Setelah theme jadi, ada tiga cara ngasihnya ke toko merchant:

  1. Bungkus folder theme jadi file ZIP, terus merchant upload sendiri lewat Shopify admin. Cara paling sederhana.
  2. Taruh di repository GitHub, terus hubungkan salah satu branch-nya ke theme di Shopify admin. Tiap kali kamu push, theme-nya ikut ter-update. Bahasannya di 08 GitHub Integration dan Version Control.
  3. Push langsung pakai Shopify CLI dari terminal. Bahasannya di 05 Shopify CLI.

Cara Cari Uang dari Theme

Sebagai Shopify Partner, ada beberapa jalur penghasilan dari theme:

  1. Jasa kustomisasi theme. Ini yang paling banyak permintaannya. Kamu bisa daftar nawarin jasa ini lewat Shopify Partner Directory.
  2. Bikin theme dan toko pesanan (bespoke). Kamu bikin theme dari nol buat satu klien dengan harga yang disepakati. Kalau kliennya baru pindah ke Shopify, kamu bisa bangun tokonya di development store dulu, terus serahin ke merchant dan kamu dapat komisi berulang dari Shopify. Bahasannya di 04 Dev Store, Akun Kolaborator, dan Theme Access.
  3. Jual theme di Shopify Theme Store. Theme Store itu salah satu tempat pertama yang dikunjungi merchant waktu mau buka toko, jadi pasarnya jutaan orang. Tapi syaratnya ketat banget soal teknis, perawatan, dan dukungan. Bahasannya di 70 Theme Store Gambaran dan Requirements sampai 73 Sukses di Theme Store.
  4. Bikin app yang nyambung ke theme. Ini jalur developer app, bukan theme, tapi masih berkaitan lewat app blocks yang kita bahas di 28 Blocks.

Fitur-fitur yang Bisa Ditambahin

Shopify punya banyak fitur toko yang bisa kita pilih mau dipasang atau nggak di theme. Kalau bikin buat klien atau toko sendiri, ya bebas pilih. Kalau bikin buat Theme Store, sebagian wajib ada.

Kategorinya:

  1. Product merchandising, varian, media produk, rekomendasi, gift card. Bab 39 Produk Variants dan High-variant Products sampai 41 Produk Recommendations, Gift Card, dan Bundles.
  2. Pricing and payments, diskon, langganan, pre-order, cicilan, B2B. Bab 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B sampai 45 Pre-orders dan Try Before You Buy.
  3. Delivery and fulfillment, ambil di toko. Bab 49 Delivery Pickup Availability.
  4. Customer engagement, akun pelanggan, form kontak, izin email. Bab 46 Customer Sign-in, Account Component, Contact Form, Email Consent.
  5. Shopify Markets, multi mata uang dan multi bahasa. Bab 47 Markets Multi Currency, Multi Bahasa, Localization.
  6. Navigation and search, menu, filter, pencarian. Bab 36 Navigasi dan Menu sampai 38 Search dan Predictive Search.
  7. Trust and security, CAPTCHA dan lencana keamanan. Bab 50 Trust & Security CAPTCHA dan Security Badges.

Alat-alatnya

Shopify nyediain banyak alat, dan tiap alat punya babnya di Bagian 1 dan Bagian 6:

  1. Shopify CLI, alat baris perintah buat bikin, preview, tes, dan push theme dari komputer sendiri. Ini alat utama kita.
  2. Shopify Liquid VS Code extension, biar VS Code paham Liquid: pewarnaan sintaks, auto-complete, dan deteksi error.
  3. Theme editor, editor visual di Shopify admin yang dipakai merchant buat ngatur theme tanpa nyentuh kode. Kita sebagai developer harus bikin theme yang enak dipakai di sini.
  4. Code editor, editor kode di dalam Shopify admin, buat edit cepat tanpa setup lokal.
  5. Development stores, akun Shopify gratis buat bikin dan ngetes theme.
  6. Collaborator accounts, cara aman buat masuk ke toko klien tanpa minta password mereka.
  7. GitHub integration, nyambungin repository ke theme.
  8. Theme Check, linter yang nangkep error dan maksa kita ngikutin praktik terbaik.

Ada juga alat lama yang udah gak disarankan tapi masih kamu temuin di tutorial-tutorial lama: Shopify CLI 2.x dan Theme Kit. Dua-duanya dibahas di bagian paling belakang buku ini, 74 Shopify CLI 2.x (deprecated) dan 75 Theme Kit (deprecated), cuma biar kamu ngerti kalau nemu.

Peta Buku Ini

Biar kamu tau posisimu di mana:

  1. Bagian 1 (bab 01–08): siapin alat dan lingkungan kerja.
  2. Bagian 2 (bab 09–20): kuasai bahasa Liquid.
  3. Bagian 3 (bab 21–35): bedah arsitektur theme lapis demi lapis.
  4. Bagian 4 (bab 36–53): pasang fitur-fitur toko satu per satu.
  5. Bagian 5 (bab 54–64): praktik terbaik dan performa.
  6. Bagian 6 (bab 65–69): alat penjaga kualitas kode.
  7. Bagian 7 (bab 70–73): jualan di Theme Store.
  8. Bagian 8 (bab 74–75): alat-alat lama.

Referensi tambahan yang bakal sering kepakai: Liquid cheat sheet yang interaktif, dan kumpulan contoh kode Liquid siap pakai.

Ringkasan

  1. Theme itu yang ngatur susunan, fitur, dan tampilan toko online. Shopify itu mesinnya, theme itu etalasenya.
  2. Bahannya lima: Liquid, HTML, CSS, JavaScript, dan JSON. Yang beneran baru cuma Liquid.
  3. Theme itu cetakan, bukan data. Kita nulis {{ product.title }}, Shopify yang ngisi judulnya dari database tiap kali halaman dibuka.
  4. Liquid dirender di server Shopify, browser cuma nerima HTML jadi.
  5. Tiap halaman disusun dari enam lapisan: layout, template, section groups, sections, blocks, dan snippets.
  6. Struktur foldernya baku dan gak boleh ditambahin subfolder sendiri. Satu-satunya file wajib itu layout/theme.liquid.
  7. Dua jenis kerjaan theme: bikin baru dari Skeleton, atau kustomisasi yang udah ada. Yang kedua jauh lebih umum.
  8. Tiga cara nyebarin theme: ZIP, GitHub, atau push lewat CLI.
  9. Empat jalur penghasilan: jasa kustomisasi, bikin theme pesanan, jual di Theme Store, atau bikin app yang nyambung ke theme.
  10. Fitur toko itu pilihan, kecuali kalau kamu bikin buat Theme Store, sebagian jadi wajib.
  11. Alat utamanya Shopify CLI dan VS Code extension. CLI 2.x dan Theme Kit itu barang lama.

Bab selanjutnya kita langsung praktek: install Shopify CLI, bikin theme baru dari Skeleton theme, dan lihat hasilnya jalan di browser.

Tampilan Grafik

Tautan Balik