[Shopify] sectionの概要と新規セクション作成方法

Shopify開発で確実に必要になってくるのが、セクション（sections）です。

例えば、毎回コードを全て触ってカスタマイズや、サイト構築、編集を行える方なら無くても大丈夫なのかなと思うのですが、簡単にカスタマイズ画面からテキスト編集や画像編集がしたい！といった方には必須の機能です。（どちらにせよ便利なので、Liquidの知識が多少要りますがみんな使うべきものです！）

今回は、そんな便利なShopifyセクションの概要と新規section追加、使用方法をまとめていきます。

Shopifyのセクション（section）とは

まずShopifyのセクションとはなんぞや。という話ですね。

簡単にいうと、"サイトのパーツで管理画面のカスタマイズから簡単に編集できるパーツのこと"を指します。

もう一度いいます。

テーマのカスタマイズ画面から、、

簡単に画像やテキストなどをカスタマイズ編集できるファイルが、、、

セクションです！

上記の例だとカスタマイズ画面の左側のサイドバーで画像やテキスト、投稿数、ブログなどをしてしています。

セクションの何が便利なのか

sectionファイルがどのようなファイルかはご理解いただけたでしょうか。

しかし、このセクションは何が便利なの？と思う方向けにセクションの魅力をお伝えします！

1. 何より時短
   
   何より時短になります。例えば画像差し替えしたいとき。ファイルからアップロードして、URL取得して、コードエディター開いて、URL差し替えて、反映する。といった作業が、カスタマイズ画面から編集の1作業だけでできてしまうのです。開発者にとってもありがたい。
   
   
2. クライアント側で差し替え等の作業をしていただける
   
   そして、最大のメリットが先方で差し替え作業してもらえること。これはクライアントにとっても、差し替え依頼の作業が減り、時短になります。そして自由に編集・変更できるため、思う存分自分の理想に近づけるまで変更作業ができます。
   
   
3. 一つのパーツを複数ページで使用できる
   
   一つのパーツを複数ページで使用する場面があると思うのですが、それが後述する1行のコードだけで完了します。

新規セクションを作成・埋め込む方法

それでは早速新規セクションを作成していきましょう。

大事なのは、作成した新規セクションのliquidファイルを"sections"というディレクトリの中にいれることです。

管理画面から新規セクション作成の場合

管理画面→テーマ一覧→コードを編集する→新規セクション作成

エディターから新規セクション作成の場合

エディタ内で新規ファイルを作成し、拡張子を.liquidにして、sectionsディレクトリの中に保存します。

sectionの埋め込み方法

そして、セクションの埋め込み方法ですが、埋め込みたい場所に下記コードを記載すれば完了です。（newsection.liquidというファイル名の場合）

1行で埋め込みが完了します。

（ただセクションの中でセクションは使えないのでご注意ください。）

Liquidコードを使用してこその活用

ただセクションを活用していくには、Liquidの知識が必要になってきます。

表示/非表示のif文での場合分けやfor文でのループなど、プログラミング言語を触ったことがある人であれば、比較的すんなり理解出来るかもしれません。

Shopifyが提供しているLiquidのチートシートです。

https://www.shopify.com/partners/shopify-cheat-sheet

またschemaタグというものも使用していくので、興味がある方は下記記事にも遊びに来てくださいませ。

[Shopify] schemaタグの説明と簡単なliquidでの使用方法【概要を掴もう初級編】

Shopify sectionの概要と新規セクション作成方法 

以上、簡単なsectionについての概要記事でした。

セクションを活用出来るようになってから、他に使える時間が増えたなというのが正直な印象です。先方とのやりとりでやっぱり画像差し替えたい！テキスト変更したけど、やっぱり戻したい！というのは、お互いにとってもどかしいですもんね。

そして、sectionは本当に奥が深く、Liquidを勉強していくごとに、 こんなことも出来るのか！と驚きの連続です。

英語記事だとたくさん海外パートナーのブログで紹介されているのですがまだまだ日本語記事だと少ない印象です。もし面白そうな海外記事があればぜひシェアしてください。翻訳して、ブログで紹介いたします！

それではみなさま、本日も良い1日を！