ヘッダーやフッターをグループ化することによって、カスタマイズ画面で「セクションを追加」することができます。
【type】
・header
・footer
・aside
・custom.<name>
<header>をグループ化する例
① sectionsの中にheader-group.jsonファイルを作る
sections ＞ header-group.json
{
"type": "header",
"name": "Header Group",
"sections": {
"header": {
"type": "header",
"settings": {}
}
},
"order": ["header"]
}② theme.liquidの<header>部分を、グループ化する
theme.liquidの中の
{% section ‘header’ %} ⇒ {% sections ‘header-group’ %} に変更する
③VSCodeのターミナルでshopify theme devを実行し、プレビュー画面を確認する
Header Groupが反映され、セクションを追加できるようになっている
④（例）スライドショーを追加する
{
“type”: “header”,
“name”: “Header Group”,
“sections”: {
“header”: {
“type”: “header”,
“settings”: {}
},
“slideshow”: {
“type”: “slideshow”,
“settings”: {}
}
},
“order”: [“header”,”slideshow”]
}
VSCodeで、shopify theme devを実行
<footer>をグループ化する例
①sectionsの中にfooter-group.jsonファイルを作る
sections ＞ footer-group.json
{
“type“: “footer”,
“name”: “Footer Group”,
“sections”: {
”footer”: {
”type”: “footer”,
”settings”: {}
}
},
“order”: [“footer”]
}
② theme.liquidの<header>部分を、グループ化する
theme.liquidの中の
{% section ‘footer’ %} ⇒ {% sections ‘footer-group’ %} に変更する
③VSCodeのターミナルでshopify theme devを実行し、プレビュー画面を確認する
Footer Groupが反映され、セクションを追加できるようになっている
本番環境に反映
VSCodeのターミナルで、Ctrl+C（Windowsの場合）を実行した後、shopify theme pushを実行し、本番環境に反映させる
コメント