※2021年のアップデートに伴い、この記事の内容は古くなっております。記事で解説されているセクションの基本的な仕組みは変わっておりませんが、最新情報は開発者サイト（英語）でご確認ください。
クライアントがストアのカスタマイズを望んでいるなら、そのためのクリエイティブな手段を提供することが大切です。Shopifyのセクションは、サイトをパーソナライズするための強力なツールオプションになります。
ストアのお客さまは直感的な操作性を期待しているので、必要なセクション（またはブロック）がストアの適切な場所に配置してあることがコンバージョンに大きく影響します。
あなたがShopifyテーマをゼロから作成、またはクライアントのために調整をしているなら、状況に応じて異なるタイプのセクションが必要になるでしょう。ブロックを使用すれば、マーチャントは好きな場所にコンテンツを選択して表示させることができます。
今回の記事では、クライアントがストアをカスタマイズできるように、さまざまなタイプのテーマセクションを作成する方法を解説していきます。また、2つの機能的なブロックの使用例を確認して、そのポテンシャルを活用する方法も見ていきます。
テーマセクションとは？
セクションは、特定の機能をもったモジュールであり、カスタマイズできるページ要素です。テーマのテンプレートに（ヘッダーやフッター同様に）静的に含まれるか、テーマエディターによってテーマのホームページに動的に追加されます。
Shopifyテーマに静的セクションを作成する
静的セクションは、その名のとおり固定されたコンポーネントで、テーマエディターによってカスタマイズが可能です。このセクションの位置はページ上でロックされ、テンプレートによってその場所が決まります。ある意味でスニペットに似ていますが、もっと強力です！ {% include 'my-snippet-file' %}の代わりに{% section 'header' %}を使用することで、セクションはLiquidテンプレートに追加できます。
たとえば、クライアントのためにカートページに追加テキストを入れられるセクションを作るとしましょう。配送情報などを追記できるので、配送期間がシーズンによって異なるマーチャントにとってこうした機能はとくに有用です。
テーマファイルエディターで新しいセクションを作成すると、スキーマ、CSS、JavaScriptのタグと共に自動でスキャフォールドが作成されます。スキーマタグには、テーマエディターがコンテンツを読み取る方法を定義するJSONを追加します。CSSとJavaScriptはセクション固有のスタイリングやファンクションのために使用できますが、デフォルトではテーマのメインのスタイルシートからスタイルをセクションに引き継ぎます。
セクションにコンテンツを追加するには、HTMLとLiquidタグをファイルの一番上に記述します。Liquidタグはスキーマで定義することができ、テーマエディターでのカスタマイズが可能になります。スキーマ設定に追加できるさまざまな値については、開発者向けドキュメントに詳細があります。
上記の例では、text.liquidと呼ばれるセクションを作成しました。これはカスタムリッチテキストボックスと見出しを含みます。HTMLのLiquidタグとスキーマ内の設定が一致しているのがわかると思います。この例ではプレーンなtextボックスとrichtextボックスを作成していますが、クライアントの要求に応じてさまざまなタイプの出力が可能です。ほかの有効な入力タイプには、image_picker、radio、video_url、fontなどがあります。
スキーマの設定において、idは定義されるLiquidタグを示し、typeは作成する出力を割り当て、labelはこの出力の名前を定義し、defaultはプレースホルダーを設定します。
このテキストボックスはカートページに表示させたいので、{% section 'text' %}をcart.liquidテンプレートファイルに追加します。これはスニペットをページテンプレートに追加するのと同じことです。
テーマエディターに移動してカートページに行くと、このセクションがカートページのメインコンテンツの下、フッターの上に表示されているのが確認できます。以下のような見た目になります。
下記は、このセクションのコード全体です。クライアントのストアに最適なものを選ぶために、さまざまなスタイルとセクションのタイプを試行してみることをお勧めします。
こちらも参考にしてください：カスタムランディングページのテンプレートを作成するためにLiquidを使用する方法
動的セクションを作成する
静的セクションとは異なり、動的セクションはホームページのさまざまな位置に移動できます。このドラッグ＆ドロップ機能により、動的セクションを作成すればストアをパーソナライズする多様なオプションが手に入ります。動画、商品、画像ギャラリーなどのために移動可能なセクションを作成できるわけです。
動的セクションを作るには、プリセットをセクションファイルに追加する必要があります。プリセットは、テーマエディターにおけるセクションの表示方法を定義し、nameとcategoryが必要になります。
プリセットが追加されると、セクションは自動的にインデックスページに追加できるようになります。テーマエディターの「セクションを追加」をクリックしても、プリセットはベースファイルに含まれていませんが、マニュアルで追加するのは簡単です。
例として、CTA（Call To Action）ボタンのためのセクションを作成しました。Liquidタグでname（ヘッダー）、url、textをスキーマ内に定義しています。
ここで異なるのは、schema配列の最後のプリセット部分です。これにより、Shopifyは自動で動的セクションであることを認識し、インデックスページに追加できるようになります。テーマエディターでセクションをホームページに追加すると、次のようになっています。
このセクションはページ内のさまざまな場所に移動可能です。
動的セクションは出力タイプに応じてインデックスページ内を移動でき、これでクライアントはホームページの見た目を自由にコントロールできるようになりました。
セクションのブロックとは？
ブロックは、セクション内部のセクションと考えることができます。上記の例で見たように、セクションはホームページ内を移動可能です。ブロックがセクションと異なるのは、要素がセクション内を移動できる点です。
ブロックにはさまざまなタイプがあり、これらはセクションに追加することが可能で、ブロックの位置は移動できます。操作はテーマエディターでおこなえます。ブロックになり得るのは、画像、動画、カスタムテキスト、または以下に示す入力設定タイプオプションなどです。
これでクライアントは、特定のレイアウトに縛られることなく要素をセクションで動かすことができます。あなたの設定したルールに基づいて彼らが要素を追加することも可能です。理想のストアに向けてクライアントはさらにパーソナライズの手段を手にしたことになります。
ブロックは動的セクションでも静的セクションでも使用でき、特定の領域でもっとも効果的なブロックタイプは何かを考慮することが重要になります。ニュースレターのブロックを付加するオプションは動的セクションにはふさわしくないかもしれません。この場合はたとえばカスタムテキストのブロックを付加できるオプションが実用的でしょう。
ブロックは反復利用が可能なため、ユーザーインターフェイスの落とし穴を避けるために適切な条件下で制限を設けることが大切になります。たとえば、動画コンテンツのブロックを作成するとします。たくさんの動画ブロックを追加できるセクションはたしかに魅力的ですが、サイト読み込みの時間に影響をもたらすうえ、ページが雑然とします。その代わりに、動画は1つだけという制限を作ります。そのほうがユーザビリティへの責任という観点から賢明といえます。
動的セクションにブロックを追加する
動かせるCTAボタンのブロックを動的セクションに追加してみましょう。ストアのお客さまに複数のオプション（例：ポッドキャストまたはeBookのダウンロード）を提示したいクライアントにとって役立つはずです。
以下のサンプルでは、出力したい要素である「セクション全体の見出し」と、ブロックとなる「リンクとリンクテキストの変数」が確認できます。
セクションで見たように、ブロック設定はテーマファイルに追加され、スキーマタグ内で定義されています。ブロックを使用する場合、この設定（またはLiquid変数）の構文は{{ block.settings.id }}のようになり、IDはスキーマセクションで参照されます。
今回のブロックにはリンクとリンクテキストが入った下記の箇所が確認できます。
さらに重要なのは、コンテナがfor loopの中でラップされていることです。ここではsection.blocksの各ブロックが連続して処理されます。これにより、ブロックはテーマエディターで正確にレンダリングされることになります。
このセクションファイルのschemaエリアでは、個々の設定とブロックの値を定義するためにJSONが使われています。これは上述のセクション作成のときに見たのと同じ意味合いですが、追加要素もあります。
メインのスキーマ設定ではセクション内の最大ブロック数を指定できます。今回は3としていますが、どんな数値も可能です。出力のタイプに合わせてブロックの制限や上限の指定をおこない、ページが乱雑にならないようにしましょう。
その下に、動的セクションのためpresetsのエリアがあり、インデックスページへの追加が可能になっています。presetsにブロックを追加することで、デフォルトでのブロック表示数を定義することができます。上の例では2つのCTAボタンが表示されることになりますが、上限を3に設定していることを思い出してください。つまり、もう1つブロックを追加することが可能になります。
それでは、テーマエディターでどのように見えるか確認してみましょう。
静的セクションにブロックを追加する
ブロックにさまざまなオプションを追加すると、Webデザインのカスタマイズレベルが上がります。つまりクライアントはセクション内の複数のブロックを選択して自分で見え方をアレンジできるのです。
こうした柔軟性の高いアプローチは、たとえばフッターなどの静的セクションをカスタマイズしたいときに、とくに役立ちます。あなたのクライアントは、動画、テキスト、画像などを同じセクションの中に追加でき、これらの要素の順番を変更できます。ブロックを使用しない場合、クライアントが同じような変更をしようと思うとコードをいじる必要がありました。しかし今は、テーマエディターですべての変更が可能です。
コントロールフロータグの”case/when”を使用すると、出力タイプを含めた多様なオプションの設定ができます。たとえば、フッターにカスタムテキストやSNSアイコン、またはニュースレター登録フォームなどのオプションをもたせたい場合、こうしたブロックオプションのコードは次のようになります。
上記でわかるとおり、テーマエディターで正確にレンダリングされるようにするため、Liquidロジックタグでブロックを再度ラップしていますが、同時にコンテンツをフッターファイルの外から取得しています。ニュースレター登録やSNSリンクの場合、テーマファイルのスニペットのコードを含めます。つまり、スニペットフォルダーの中の機能をブロックに追加することができるのです。
コントロールフロータグを使ってレイアウトの条件を指定すると、ブロックが追加されたときの表示を正確に定義することも可能です。この例では、ブロックの最大数を6に設定し、個々のブロックのカラム幅を指定しています。
スキーマではブロックレベルでの制限を設定可能です。クライアントがフッターに複数バージョンのSNSアイコンを追加してしまうと、ストアのお客さまにとっては混乱の原因となるので、この特定ブロックを1つに制限すればそのような事態を防げます。マーチャントはSNSブロックをセクションのどこに置くか調整することができますが、1つのバージョンしか設置できません。この制限を追加した場合は下記のようになります。
このフッターのセクションファイルを全て表示すると次のようになります。
このセクションがtheme.liquidに含まれると、テーマエディターでは以下のように表示されます。
クリエイティビティを解放する
テーマの中にセクションやブロックを簡単に追加できることをここまで見てきました。これで、クライアントのストアに無限のオプションを追加可能です。プリセットを使用することで、固定されていたセクションを解放してページ内で動かすことが可能になり、マーチャントはあなたが示した方向性に従いながら、思い描くストアを自由に実現できます。
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
続きを読む
よくある質問
テーマのセクションとは？
静的セクションとは？
動的セクションとは？
セクションのブロックとは？
ブロックにはさまざまなタイプがあり、ブロックになり得るのは、画像、動画、カスタムテキストなどです。クライアントは、特定のレイアウトに縛られることなく要素をセクションで動かすことができます。
