52 Online Store 2.0 dan Migrasinya

Sepanjang buku ini kita nulis theme dengan template JSON, section di mana-mana, dan app block, seolah itu satu-satunya cara. Padahal itu Online Store 2.0, dan sebelum 2021 theme Shopify gak begitu. Bab ini soal apa yang berubah dan gimana ngangkat theme lama (“vintage”) ke arsitektur baru.

Online Store 2.0 itu kumpulan fitur dan perbaikan yang bikin theme dan app theme lebih gampang dibangun, lebih fleksibel, dan lebih gampang dirawat. Diumumin di Shopify Unite 2021. Banyak fiturnya bergantung ke template JSON dari 23 Templates, jadi migrasi intinya: ubah template Liquid jadi JSON, dan pindahin kode Liquid/HTML-nya ke section yang dirujuk template JSON itu.

Migrasi gak wajib. Merchant boleh terus pakai theme vintage kalau udah memenuhi kebutuhannya. Tapi hampir semua fitur di bagian 3 dan 4 buku ini butuh 2.0.

Apa yang Didapat

1. Section di Semua Halaman

Di theme vintage, cuma homepage yang bisa nambah/hapus/urutin section lewat theme editor. Halaman produk, koleksi, dan lainnya pakai template Liquid tetap dengan {% section %} statis. Template JSON bikin section bisa ditambahin ke hampir semua halaman langsung dari theme editor. Merchant bisa mempersonalisasi jauh lebih banyak tanpa developer, dan developer bisa bikin theme yang lebih modular dan gampang dirawat.

2. Dynamic Sources

Merchant bisa nyambungin dynamic source ke setting (31 Dynamic Sources dan Fonts): atribut object atau metafield yang nilainya ngikutin konteks. Kamu juga bisa pakai standard metafields sebagai setting default theme, biar komponen lebih fleksibel dan bisa dipakai ulang, atau nyediain template standar buat segmen bisnis tertentu.

3. App Block

Theme 2.0 bisa ndukung app block yang dibangun lewat theme app extension: app nambahin kode ke theme tanpa ngubah kode theme merchant. Kodenya dikemas jadi block modular yang merchant kontrol di theme editor, dan waktu app di-uninstall, kodenya ikut hilang. Ini ngakhirin era app yang nyuntik script ke theme.liquid dan ninggalin sisa waktu dihapus, yang bikin theme susah di-support dan di-troubleshoot. Detailnya di 28 Blocks.

Menilai Jalur Migrasi

Ada empat jalur, dan pilihannya tergantung lima pertimbangan. Shopify ngasih tabel keputusan yang bisa diringkas gini:

1. Butuh fitur 2.0? Kalau gak (toko dasar yang gak butuh perubahan berkelanjutan dan puas sama theme-nya), jangan migrasi. Kalau ya, lanjut ke pertimbangan berikutnya.
2. Puas sama theme sekarang? Kalau ya, update ke versi 2.0 theme itu (kalau developer-nya nyediain) atau migrasi manual. Kalau gak, pasang theme baru dari Theme Store.
3. Pakai banyak app dan kustomisasi? Kalau ya, migrasi manual, karena kustomisasi app dan manual gak bisa dimigrasi otomatis. Pastiin app kuncinya kompatibel sama 2.0 dulu, dan hitung waktu buat masang ulang app di theme hasil migrasi. Kalau gak (theme gratis/berbayar dengan sedikit kustomisasi), pasang versi baru theme-nya atau theme baru.
4. Ada budget? Kalau ya, beli theme berbayar baru, atau sewa Shopify Partner buat migrasi manual. Kalau gak, pilih theme 2.0 gratis dari Shopify, download versi 2.0 theme sekarang kalau ada, atau migrasi manual sendiri kalau bisa ngoding.
5. Nyaman ngoding? Kalau ya, migrasi manual bisa per template (cuma bagian yang butuh) atau seluruh theme. Kalau gak, sewa Partner, download versi 2.0, atau pilih theme baru.

Pola yang muncul: theme kustom atau yang dikustomisasi berat → migrasi manual, theme standar → ganti versi/theme. Dan migrasi manual gak butuh jadi Partner, tapi butuh paham Liquid, HTML, CSS, JavaScript, yang udah kamu punya dari buku ini.

Migrasi Manual: Sembilan Langkah

Contohnya theme Debut (theme gratis Shopify era vintage) dan template product.liquid. Prosesnya sama buat template lain.

1. Backup

Setelah nentuin theme-nya, bikin salinannya. Di code editor admin, duplikat theme dan pastiin yang diedit itu yang belum dipublikasi, karena kamu bakal ngehapus file, yang langsung ngaruh ke storefront kalau theme-nya live. Kamu juga butuh salinan buat rujukan atau balik kalau gagal. Kalau kerja lokal pakai CLI, shopify theme pull dari 05 Shopify CLI.

2. Catat dan Hapus Tag section

Buat ngubah template Liquid jadi JSON, kamu harus nyatat dan ngehapus semua {% section %} di template. Alasannya: sisa kode template bakal dipindah ke file section, dan section gak boleh ngerujuk section lain (26 Sections dan Section Schema).

Di templates/product.liquid Debut ada dua di atas:

{% section 'product-template' %}
{% section 'product-recommendations' %}

product-template berisi hampir semua markup halaman produk (judul, gambar, tombol add to cart), product-recommendations nampilin produk saran. Catat nama dan posisinya, terus hapus tag-nya dari product.liquid.

3. Pindahin Kode Template ke Section

Sisa kode di template (yang bukan {% section %}) harus pindah ke section, yang udah ada atau yang baru:

1. Ke section yang ada: kalau udah ada section yang ngerender sebagian besar halaman (kaya product-template di Debut), buka file-nya, salin sisa kode dari product.liquid, tempel di atas tag {% schema %}.
2. Ke section baru: kalau gak ada yang cocok, bikin file baru di /sections, misalnya product-content.liquid (hapus kode placeholder kalau bikin lewat code editor), dan tempel kodenya di situ.

Di Debut sisa kodenya biasanya cuma script JSON produk atau markup pembungkus kecil, tapi di theme lain bisa banyak.

4. Hapus Template Liquid

Setelah kodenya disalin, hapus templates/product.liquid. Alasannya teknis: product.liquid dan product.json gak bisa ada bersamaan di /templates.

❌ dua-duanya ada, Shopify bingung

templates/product.liquid
templates/product.json

✅ cuma JSON

templates/product.json

5. Bikin Template JSON

Bikin templates/product.json. Di code editor: Add a new template, pilih Product, tipe JSON. Lokal: bikin file-nya langsung. Ganti isinya dengan:

{
  "sections": {
    "main": {
      "type": "product-template"
    }
  },
  "order": [
    "main"
  ]
}

type ngerujuk nama file section tempat kamu mindahin markup di langkah 3. Struktur sections/order ini yang dibedah di 23 Templates.

6. Tes

Buka di theme editor. Lewat CLI: shopify theme dev ngasih link ke theme editor (dokumen lamanya masih nyebut shopify login --store, di CLI 3.x cukup shopify theme dev --store <domain>). Buka halaman produk: harusnya ada tombol Add section di sidebar kiri, dan semua section yang dulu cuma bisa di homepage sekarang muncul di menu Add section. Itu tanda migrasinya jalan.

7. Tambahin Rujukan Section Lain

Kalau product.liquid asli punya section tambahan (product recommendations), definisiin di product.json dan atur urutannya. Mulai dari yang cuma main, tambahin object recommendations dengan type nama file section-nya:

{
  "sections": {
    "main": {
      "type": "product-template"
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main"
  ]
}

Terus masukin ke order di posisi yang diinginkan, di bawah main:

{
  "sections": {
    "main": {
      "type": "product-template"
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}

Ingat aturan dari bab 23: section yang ada di sections tapi gak ada di order gak dirender. Section juga bisa ditambah dan diurutin langsung dari theme editor, yang bakal nulis ke file JSON ini.

8. Dukung App Block

Biar merchant bisa nambahin app block ke section, dua perubahan di tiap section yang mau ndukungnya:

1. Schema: tambahin block bertipe @app. Di product-template Debut yang gak punya block, tambahin node blocks setelah settings:

"settings": [
...
],
"blocks": [
  {
    "type": "@app"
  }
]

Catatan: @app gak didukung di section yang dirender statis ({% section %}), jadi ini alasan lain kenapa section harus masuk template JSON. 2. Render: cek tipenya dan render pakai {% render block %}, di mana pun yang masuk akal di section:

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

Buat ngetes tanpa nunggu app beneran, Shopify nyediain product reviews sample app. Bahasan app block lengkap di 28 Blocks.

9. Ulangi

Ulangi buat semua template: collection.liquid, page.liquid, blog.liquid, article.liquid, cart.liquid, search.liquid, 404.liquid, list-collections.liquid, dan customers/*.liquid. Kamu bisa berhenti di tengah, template JSON dan Liquid boleh campur di satu theme selama nama yang sama gak dobel.

Setelah Migrasi

Template JSON cuma langkah pertama. Yang bikin theme beneran 2.0:

1. Lebih modular: ekstrak fungsi dari kode template inti jadi section dan block. Checkbox “Show vendor” bisa jadi block vendor yang merchant tambah/hapus/urutin. Best practice-nya di 54 Best Practices Umum.
2. Dynamic source di setting default: rujuk atribut produk sebagai default text box ("default": "{{ product.title }}"), dari 31 Dynamic Sources dan Fonts > 5. Default yang Nunjuk ke Dynamic Source.
3. Version control: sambungin theme ke GitHub (08 GitHub Integration dan Version Control) biar update berikutnya lebih gampang dan perubahan dari theme editor tercatat.
4. Tools baru: CLI, Theme Check, VS Code extension dari bagian 1 buku ini dirilis bareng 2.0.

Dan yang lebih jauh lagi: section group buat header/footer (27 Section Groups dan Migrasinya) dan theme block (29 Theme Blocks Mendalam) yang jadi arsitektur theme Shopify generasi sekarang (Horizon). Migrasi ke 2.0 itu fondasinya.

Ringkasan

1. Online Store 2.0 = template JSON + section di semua halaman + dynamic sources + app block via theme app extension. Gak wajib, tapi hampir semua fitur modern butuh ini.
2. Empat jalur: gak migrasi (gak butuh fitur 2.0), pasang theme baru (gak puas theme lama), update ke versi 2.0 theme yang sama (puas, sedikit kustomisasi), migrasi manual (theme kustom/banyak app, atau tanpa budget tapi bisa ngoding). Kustomisasi app dan manual gak bisa dimigrasi otomatis.
3. Sembilan langkah: backup (duplikat, jangan yang live), catat dan hapus {% section %} (section gak boleh ngerujuk section), pindahin sisa kode ke section (ada/baru, di atas schema), hapus product.liquid (gak boleh dobel sama JSON), bikin product.json dengan sections/order, tes di theme editor (tombol Add section muncul), tambahin section lain ke sections dan order, dukung app block (@app di schema + {% render block %}, gak bisa di section statis), ulangi buat semua template.
4. Setelahnya: modularisasi ke block, dynamic source di default, GitHub, tools baru, lalu section group dan theme block.

---

Bab selanjutnya kita buka bagian best practices dengan hal yang pasti kamu temuin: error umum di theme, dari Liquid error, error upload, sampai masalah theme editor, dan cara ngelacaknya.