Sayudha

27 Section Groups dan Migrasinya

Properties2
descriptionSection group sebagai wadah section di layout (header, footer, aside, custom), schema JSON-nya, contextual section group, dan cara migrasi dari section statis
tagsshopify, theme, arsitektur

8 menit baca

Di 26 Sections dan Section Schema kita bikin section. Di 22 Layouts kita lihat {% sections 'header-group' %} di theme.liquid. Sekarang kita bahas apa yang dirender tag itu: section group.

Section group itu file data JSON yang nyimpen daftar section dan app block yang mau dirender beserta setting-nya, di area yang dikuasai layout kaya header dan footer. Merchant bisa nambah, ngehapus, dan ngurutin section di dalamnya lewat theme editor.

Bedanya sama template JSON dari 23 Templates > Template JSON: template JSON ngatur section di isi halaman (yang berbeda tiap jenis halaman), section group ngatur section di layout (yang sama di semua halaman). Strukturnya hampir identik, cuma beda tempat dan cara dirujuk.

Section dan app block yang dirujuk dirender sesuai urutan order, tanpa markup apapun di antaranya. Batasnya sama: 25 section per group, 50 block per section. Dan section-nya sama persis dengan section yang dipakai di template, ngikutin panduan yang sama.

Section group itu pengganti section statis di layout. Cara migrasinya dibahas di akhir bab ini.

Saran umum: di kebanyakan theme, cukup pakai section group buat header dan footer aja. Kalau bikin section group lain (misalnya sidebar navigasi), namain sesuai tujuannya biar jelas.

Lokasi

Section group ditaruh di folder sections/, bareng file section Liquid, cuma ekstensinya .json:

└─ theme
  ...
  ├─ layout
  │  └─ theme.liquid
  ├─ sections
  │  ├─ footer-group.json
  │  ├─ header.liquid
  │  ├─ header-group.json
  │  └─ ...
  ...

Perhatiin: header.liquid itu section-nya, header-group.json itu group yang berisi section itu. Dua file berbeda dengan peran berbeda.

Schema

File-nya harus JSON valid dengan object di root yang punya empat atribut, semuanya wajib:

  1. type (string), tipe section group. Nilainya header, footer, aside, atau tipe kustom dengan format custom.<nama> di mana <nama> itu pengenal unik.
  2. name (string), nama section group, maksimal 50 karakter.
  3. sections (object), object dengan ID section sebagai kunci dan data section sebagai nilai. Boleh kosong, tapi ID gak boleh duplikat.
  4. order (array), array ID section sesuai urutan render. Boleh kosong, ID harus ada di sections, gak boleh duplikat.

Contoh minimal:

{
 "type": "header",
 "name": "Header Group",
 "sections": {
   "header": {
     "type": "header",
     "settings": {}
   }
 },
 "order": ["header"]
}

Bedanya sama template JSON: section group punya type dan name di root, dan gak punya layout atau wrapper. Dan sections serta order boleh kosong (di template JSON, sections minimal satu).

Kenapa type penting? Karena type inilah yang dicocokin sama atribut enabled_on.groups dan disabled_on.groups di schema section dari 26 Sections dan Section Schema > 14. enabled_on. Section dengan "enabled_on": { "groups": ["footer"] } cuma bisa masuk ke section group yang type-nya footer.

❌ salah, type gak valid dan name hilang

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

✅ benar

{
 "type": "header",
 "name": "Header Group",
 "sections": {},
 "order": []
}

Buat area di luar header, footer, dan aside, pakai tipe kustom:

{
 "type": "custom.sidebar",
 "name": "Sidebar Group",
 "sections": {},
 "order": []
}

Section Data

Format data tiap section di sections sama persis dengan template JSON dan settings_data.json:

sections: {
<SectionID>: {
  "type": <SectionType>,
  "disabled": <SectionDisabled>,
  "settings": {
    <SettingID>: <SettingValue>
  },
  "blocks": {
    <BlockID>: {
      "type": <BlockType>,
      "settings": {
        <SettingID>: <SettingValue>
      }
    }
  },
  "block_order": <BlockOrder>
}
}

Penjelasannya udah ada di 23 Templates > 3. Section Data: <SectionID> alfanumerik dan unik di dalam group, type nama file section, disabled buat nyembunyiin tanpa ngehapus, blocks dan block_order buat block-nya.

Contoh footer group dengan dua section:

{
 "type": "footer",
 "name": "Footer group",
 "sections": {
   "quick-links": {
     "type": "quick-links",
     "settings": {}
   },
   "newsletter-signup": {
     "type": "newsletter-signup",
     "settings": {}
   }
 },
 "order": [
    "newsletter-signup",
    "quick-links"
 ]
}

Perhatiin order-nya kebalik dari urutan penulisan di sections: yang dirender duluan itu newsletter-signup. Urutan di sections gak ngaruh, yang ngaruh cuma order.

Dua aturan yang sama kaya template JSON:

  1. Data section gak bisa dibagi antar section group, tiap group punya datanya sendiri.
  2. Semua section yang dirujuk (kecuali app section) harus ada di theme, kalau nggak error.

Section bisa ditambahin ke group lewat kode atau lewat theme editor.

Masukin ke Layout

Pakai tag sections dari 12 Tags Khusus Theme > sections, dengan nama file tanpa ekstensi, di posisi yang kamu mau di layout:

{% sections 'filename' %}

Kalau kamu punya sections/header-group.json berisi section header dan announcement bar, taruh di theme.liquid biar dirender di semua halaman yang pakai layout itu:

{% sections 'header-group' %}

Nama file-nya bebas, yang penting cocok sama yang dipanggil. Tapi konvensi yang dipakai Dawn dan hampir semua theme: header-group.json dan footer-group.json.

Jangan Campur Statis dan Group

Hindari pakai section group dan section statis di layout yang sama. Kalau terpaksa, kasih nama section statisnya yang nunjukin dia statis, misalnya static-announcement.liquid, biar developer lain (dan kamu sendiri bulan depan) gak bingung kenapa section itu gak bisa dipindah di theme editor.

❌ membingungkan, merchant bisa ngatur header tapi gak bisa ngatur announcement bar, dan gak jelas kenapa

{% section 'announcement-bar' %}
{% sections 'header-group' %}

✅ jelas, semuanya di section group

{% sections 'header-group' %}

Contextual Section Group

Sama kaya contextual template di 23 Templates > Contextual Template: waktu merchant nyesuaiin section group buat konteks pembeli tertentu (market atau B2B) lewat theme editor, Shopify bikin file:

header-group.context.<context-string>.json

Isinya cuma override dari group induknya:

{
  "context": {
    "market": "ca"
  },
  "parent": "header-group.json",
  "sections": {
    "announcement-bar": {
      "blocks": {
        "announcement-bar-one": {
          "settings": {
            "text": "Free shipping for Canada!"
          }
        }
      },
      "settings": {
        "change_slides_speed": 5
      }
    }
  }
}

Buat market ca, teks announcement bar-nya jadi “Free shipping for Canada!” dan kecepatan slide-nya 5. Section lain di header tetap ngikutin header-group.json. Ini dibikin merchant, kamu jarang nyentuhnya langsung.

Section Group buat Konten Template

Ada satu pemakaian opsional: section group juga bisa dipakai buat ngerender isi template, bukan cuma layout. Tapi ini jarang dan bukan pola standar, template JSON tetap cara utamanya.

Migrasi dari Section Statis

Kalau theme-mu dibikin sebelum section group ada, kemungkinan layout-nya ngerender section secara statis pakai {% section %}. Karena section group lebih luwes dan ngurangin kebutuhan ngedit kode, ganti section statis di layout dengan section group yang berisi section itu secara default.

Kabar baiknya: waktu migrasi, Shopify berusaha mindahin setting merchant secara otomatis waktu theme di-update. Jadi merchant gak perlu ngatur ulang logo, menu, dan warna header dari nol.

Langkah 1: Bikin Section Group Baru

Buat tiap area layout yang punya section statis, bikin satu section group. Biasanya header dan footer.

  1. Di folder sections/, bikin file JSON baru. Namanya harus nunjukin areanya, misalnya header-group.json.
  2. Isi schema dasarnya, tipe dan nama:
{
  "type": "header",
  "name": "Header group",
  "sections": {
  },
  "order": [
  ]
}
  1. Tambahin rujukan ke semua section statis yang mau digantiin. Ini penting: semua section yang diganti harus ada di group, biar Shopify bisa nyalin setting merchant-nya.

Misalnya area header layout-mu punya:

{% section 'announcement-bar' %}
{% section 'header' %}

Maka group-nya:

{
  "type": "header",
  "name": "Header Group",
  "sections": {
    "header": {
      "type": "header",
      "settings": {
      }
    },
    "announcement-bar": {
      "type": "announcement-bar",
      "settings": {
      }
    }
  },
  "order": [
    "announcement-bar",
    "header"
  ]
}

Langkah 2: Ganti Tag di Layout

Hapus tag-tag section statisnya, ganti dengan satu tag sections:

Yang dihapus:

{% section 'announcement-bar' %}
{% section 'header' %}

Yang ditambahin:

{% sections 'header-group' %}

Selesai. Merchant sekarang bisa nambahin section lain ke header (misalnya bar promo kedua), ngurutin ulang, atau ngehapus announcement bar, semuanya tanpa nyentuh kode.

Migrasi Setting

Waktu merchant nge-update theme dari versi yang pakai section statis ke versi yang pakai section group, Shopify nyalin setting section statis ke section yang setara di group, dicocokin berdasarkan type section.

Contoh: versi lama nyimpen setting header di config/settings_data.json:

{
  "current": {
    "colors_solid_button_labels": "#ffffff",
    "colors_accent_1": "#121212",
    "sections": {
      "header": {
        "type": "header",
        "settings": {
          "color_scheme": "background-1",
          "logo_width": 90,
          "logo_position": "middle-left",
          "menu": "main-menu",
          "show_line_separator": true,
          "enable_sticky_header": true,
          "margin_bottom": 0
        }
      }
    }
  },
  "presets": {}
}

Versi baru punya section group dengan section bertipe header, dan Shopify nyalin setting-nya:

{
  "type": "header",
  "name": "Header Group",
  "sections": {
    "header": {
      "type": "header",
      "settings": {
        "color_scheme": "background-1",
        "logo_width": 90,
        "logo_position": "middle-left",
        "menu": "main-menu",
        "show_line_separator": true,
        "enable_sticky_header": true,
        "margin_bottom": 0
      }
    }
  },
  "order": [
    "header"
  ]
}

Ini alasan kenapa type section di group harus sama persis dengan nama file section lama: Shopify nyocokin "type": "header" di group dengan "type": "header" di settings_data.json lama.

❌ salah, type diganti jadi main-header, setting merchant gak kebawa

"sections": {
  "header": { "type": "main-header", "settings": {} }
}

✅ benar, type sama dengan nama section lama

"sections": {
  "header": { "type": "header", "settings": {} }
}

Bahasan migrasi theme lama secara keseluruhan (dari Liquid template ke JSON, dari section statis ke group) ada di 52 Online Store 2.0 dan Migrasinya.

Ringkasan

  1. Section group itu JSON berisi daftar section buat area layout (header, footer), dan merchant bisa nambah, ngehapus, ngurutin section di dalamnya.
  2. Ditaruh di sections/ dengan ekstensi .json, di samping file section .liquid.
  3. Empat atribut wajib: type (header, footer, aside, atau custom.<nama>), name (maksimal 50 karakter), sections, order. sections dan order boleh kosong.
  4. type group dicocokin sama enabled_on.groups dan disabled_on.groups di schema section.
  5. Format section data sama persis dengan template JSON dan settings_data.json, dan urutan render cuma ditentuin order.
  6. Dirender di layout pakai {% sections 'nama-file' %}.
  7. Jangan campur section group dan section statis di satu layout. Kalau terpaksa, namain section statisnya secara jelas.
  8. Contextual section group header-group.context.<konteks>.json berisi override per market atau B2B, dibikin merchant.
  9. Migrasi: bikin group berisi semua section statis yang diganti, terus ganti tag section jadi sections.
  10. Shopify otomatis nyalin setting merchant waktu migrasi, dicocokin berdasarkan type section, jadi type-nya harus sama dengan nama section lama.

Bab selanjutnya kita ke lapisan paling dalam: block. Perbedaan section block, theme block, dan app block, cara app nyisipin konten ke theme lewat app block dan app embed, praktik terbaik bikin block, dan theme block yang dibikin AI.

Tampilan Grafik

Tautan Balik