セクションとブロック

テーマのセクションを使用して、オンラインストアで希望するレイアウトを作成できます。セクションは、テキスト、ボタン、単一の画像、画像のコラージュ、リンクなど、それぞれに特定の機能があるさまざまな種類のブロックで構成されています。

セクションとブロックを使用すると、コンテンツを柔軟に配置でき、コードを編集することなくオンラインストアのスタイルや雰囲気を管理できます。これには、以下のカスタマイズオプションが含まれます。

• テンプレート内のセクションを並べ替えたり、セクション内のブロックを並べ替えたりすることができます。
• セクションとブロックには、特定のカスタマイズ設定があります。
• 互換性のあるセクションとブロックを連携させて、商品の取り扱い手順を追加するなど、カスタムデータからオンラインストアに動的な情報を表示できます。動的ソースの連携について、詳しくはこちらをご覧ください。

テーマエディタで利用できるセクションとブロックは、使用しているテーマとそのバージョンによって異なります。たとえば、テーマに、スライドショーセクションにのみ追加できるスライドブロックがあったり、テーマのすべてのセクションに追加できる見出しテキストブロックがあったりします。利用できるオプションについて詳しくは、テーマのドキュメントを参照してください。

セクションとブロックの上限

セクションとブロックには、以下の制限があります。

• 各テンプレートには、最大 25 個のセクションを含めることができます。
• 各テンプレートには、すべてのセクションで合わせて最大 1250 個のブロックを含めることができます。ブロックの正確な数と、各セクションに追加できるブロックのタイプごとの数は、セクションとブロックのソースによって異なり、テーマのデザイナーが指定します。たとえば、テーマにメール登録セクションがある場合、追加できるメールフォームブロックは 1 つのみであることがあります。
• ネストに対応しているブロックは、最大 8 階層までブロックをネストできます。

ブロックのソース

テーマの構造やインストールしたアプリによっては、さまざまなソースのブロックに対応した多様なセクションがテーマに含まれている場合があります。セクションにブロックを追加すると、そのセクションで利用可能なすべてのブロックがブロックピッカーに表示されます。テーマとそのバージョンに応じて、以下の種類のブロックをテーマのセクションに追加できます。

• アプリブロックは、テーマに機能を追加するブロックです。アプリブロックを使用すると、インストールしたアプリによって追加されたテーマの領域を、テーマ内のページの特定領域に再配置できます。
• セクションブロックは、特定のセクション内で定義されるブロックです。
• テーマブロックは、テーマ内で定義されるブロックで、ネストなどの動的な機能を持つことができます。

テーマには、セクションブロックを使用するセクションと、テーマブロックを使用するセクションが含まれている場合があります。1つのセクションで、テーマブロックまたはセクションブロックのどちらかを受け入れることはできますが、両方を混在させることはできません。

セクション内でのアプリブロックの利用可否は、アプリの機能、およびセクションがアプリブロックを受け入れられるかどうかによって異なります。

セクションブロック

セクションブロックは、特定のセクション用に設計されたブロックです。セクションには、セクションブロックのタイプに制限があったり、追加できる特定のタイプのブロックの数に制限があったりします。

セクションブロックを含むセクションの例

たとえば、テーマにメール登録セクションがあるとします。このセクションを使用してニュースレター登録フォームを追加し、お客様がニュースレターを定期購読できるようにします。メール登録セクションを追加すると、以下のブロックをそれぞれ 1 つずつ追加できます。

• メールフォームブロック
• 見出しブロック
• 小見出しブロック

メールフォームブロックを追加した後、 [ブロックを追加] をクリックして別のブロックを追加しようとすると、ブロックピッカーのオプションとしてメールフォームブロックは表示されなくなります。この制限により、お客様のメールの取得に関する問題を防ぎ、お客様が簡単にメールアドレスを入力できるようになります。

メール登録セクションで利用可能な 3 つのブロックをすべて追加した場合、ブロックピッカーに、利用可能なすべてのブロックが使用済みであることを示すメッセージが表示されます。

テーマブロック

テーマブロックは、テーマ内で定義されるブロックで、ネストなどの動的な機能を持つことができます。テーマブロックを受け入れるセクションは、セクションの構造に応じて、さまざまな種類のブロックを受け入れることができます。テーマブロックを受け入れるセクションでは、利用可能なすべてのテーマブロック、ブロックの特定のサブセット、またはそのセクションに固有のブロックを受け入れる場合があります。また、テーマブロックには以下の動作が見られる場合があります。

• 一部のブロックはネストに対応しており、他のブロック内に最大 8 階層までブロックをネストできます。
• 一部のセクションには必須のブロックがあります。これらのブロックはカスタマイズしたり非表示にしたりすることはできますが、並べ替えや削除はできません。
• 特定の条件が満たされた場合に、一部のブロックがセクションに自動で表示されます。

テーマブロックを含むセクションの例

たとえば、テーマにテーマブロックを含むスライドショーセクションがあるとします。

テーマのスライドショーセクションで [ブロックを追加] をクリックすると、ブロックピッカーからスライドブロックを選択できます。他のブロックタイプは利用できません。テーマの別のセクション (画像バナーセクションなど) にスライドブロックを追加しようとしても、スライドは利用できません。これは、制限付きブロックの例です。

[スライドショー] セクションに「スライド」ブロックを追加した後、 [ブロックを追加] をクリックすると、[スライドショー] セクションのいずれかの「スライド」ブロックに、「見出し」、「画像」、「ボタン」などのブロックを追加できます。これらのブロックは、「スライド」ブロックにネストされます。これが、ネストされたブロックの例です。

[スライドショー] セクションに 2 つ目の「スライド」ブロックを追加すると、テーマによって「スライドショーコントロール」ブロックが自動的に追加されます。このブロックには、サイトの訪問者がクリックしてスライド間を移動するためのボタンが表示されます。ボタンのスタイルをカスタマイズしたり、コントロールを非表示にしたりすることはできますが、ブロックを削除することはできません。これが、条件付きで表示される必須ブロックの例です。

テーマブロックの互換性

テーマブロックにアクセスするには、テーマにテーマブロックをサポートするセクションが必要です。テーマがテーマブロックをサポートしているかどうかは、テーマのコードで確認できます。Liquid エディタのサイドバーに「blocks」ディレクトリーがある場合は、テーマブロックをサポートするテーマを使用しています。テーマのドキュメントで確認することもできます。

手順：

1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

2. 確認するテーマの横にある ボタンをクリックし、[コードを編集する] をクリックします。

3. サイドバーで、blocks フォルダーを検索します。

   

セクションとブロックを使用したテーマテンプレートのカスタマイズ

テーマエディタを開くと、デフォルトでストアのホームページが読み込まれます。ドロップダウンメニューを使用して、商品、コレクション、ページ、ブログなどの別のテンプレートを選択するか、テンプレートドロップダウンの検索バーを使用して特定のテンプレートを検索できます。テンプレートを選択すると、テーマエディタに読み込まれ、加えた変更はエディタでプレビューされます。

セクションを追加する

オンラインストアの任意のページに新しいセクションを追加します。

手順：

セクションを編集する

セクションまたはブロックを並べ替える

ページテンプレートのセクションの順序を変更したり、それらのセクション内のブロックを並べ替えたりすることができます。さらに、互換性のあるブロックを異なるセクション間で移動することもできます。たとえば、ホームページに [スライドショー] セクションが 2 つある場合、一方のスライドショーからもう一方のスライドショーに「スライド」ブロックをドラッグできます。

ブロックタイプに互換性がない場合、またはセクションのブロック数が上限に達している場合は、ブロックを別のセクションに移動することはできません。セクションまたはブロックを無効な場所に移動しようとすると、元の位置に戻ります。

プレビューインスペクターを使用してセクションを並べ替えることもできます。テーマエディタのプレビューインスペクターの使用について詳しくは、こちらをご覧ください。

手順：

セクションまたはブロックを複製する

セクションまたはブロックを複製して、そのセクションまたはブロックのまったく同じコピーを作成できます。

ブロックを複製すると、新しいブロックは同じセクションに追加されます。ブロックを新しいセクションに移動する場合や、ブロックの順序を変更する場合は、ブロックを並べ替えることができます。また、ブロックをコピーして別のセクションに直接貼り付けることもできます。

ブロックをコピーして貼り付ける

複数のセクションで同じブロックを使用する場合は、ブロックを簡単にコピーして別のセクションに貼り付けることができます。同じセクション内でブロックをコピーして貼り付けることも、代わりにブロックを複製することもできます。複製されたブロックには、元のブロックのすべての設定とコンテンツが保持されます。

手順：

1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマの横にある [テーマを編集] をクリックします。

3. ホームページでブロックをコピーして貼り付けるには、ブロックを直接選択するか、[ホームページ] ドロップダウンメニューを使用して、編集するセクションまたはブロックを含む特定のテンプレートを選択します。

4. 複製するブロックを右クリックし、[コピー] をクリックします。

5. 同じセクションまたは別のセクションで、セクション内を右クリックしてから、[貼り付け] をクリックします。

6. [保存] をクリックします。

セクションまたはブロックを非表示または削除する

セクションまたはブロックの名前を変更する

デフォルトでは、テーマエディタのサイドバーメニューと設定詳細のセクションまたはブロックのタイトルは、「コレクション」や「テキスト」など、ブロックまたはセクションのタイプに設定されています。

ブロックの場合、ブロック設定に見出しや説明などのテキストフィールドが含まれている場合、そのテキストはサイドバーメニューのタイトルにも追加されます。テキストフィールドが複数ある場合は、コンテンツを含む最初のテキストフィールドが追加されます。テキストフィールドのテキストを変更すると、ブロックのタイトルが変更され、更新されたテキストが含まれます。セクションまたはブロックの名前を空白にすることはできません。

たとえば、ページテンプレートに [マルチカラム] セクションを [列] ブロックとともに追加します。列ブロックには、デフォルトのテキストが 列 の [見出し] 設定と、デフォルトのテキストが テキストと画像を組み合わせて、選択した商品、コレクション、またはブログ記事に焦点を当てます。 の [説明] 設定の両方が含まれています。デフォルトのセクションタイトルは マルチカラム です。デフォルトの [列] ブロックのタイトルは 列 - 列 です。[見出し] セクションからテキストを削除すると、ブロックのタイトルは 列 - テキストと画像を組み合わせ... に更新されます。

テーマエディタのサイドバーメニューのセクションまたはブロックの設定から、セクションまたはブロックの名前をカスタム名に変更できます。

手順：

ブロックの操作

ブロックとは、テンプレートのセクションにコンテンツを追加するために使用するカスタマイズ可能なモジュールです。ブロックを使用して、テキスト、画像、リンク、ボタンなどを追加できます。

Shopify のテーマには、カスタマイズ可能なセクションとブロックがあります。セクションによってはブロックタイプが固定されているものがあります。つまり、テーマデザイナーがそのセクションで利用可能にしたブロックからのみ選択できます。

セクションによっては、どのブロックでも選択できますが、セクションに追加できるブロックの合計数には上限があります。セクションが利用可能なブロックの最大数に達した場合、[ブロックを追加] オプションはグレー表示になり、クリックまたはタップできなくなります。

検索機能を使用して名前で特定のブロックを検索したり、ブロックピッカーのドロップダウンメニューからブロックを選択したりできます。テーマのブロックは、ブロックピッカーでカテゴリーに分類されている場合があります。たとえば、コレクションピッカーのあるブロックの [コレクション] や、画像ブロックと動画ブロックの [メディア] などです。

追加する前にブロックの表示を確認できるよう、ブロックピッカーにブロックのプレビューが表示されます。

ブロックを追加する

メタフィールドとメタオブジェクトを動的ソースで使用する

メタフィールドとメタオブジェクトを使用すると、オンラインストアに動的な情報を表示できます。メタフィールドをサポートするテーマを使用している場合は、テーマエディタで互換性のあるセクションまたはブロック設定にメタフィールドを接続できます。

たとえば、キャンドルを販売している場合、ストアで販売されている各キャンドルの燃焼時間を表示できます。管理画面の設定の [カスタムデータ] セクションで 燃焼時間 の商品メタフィールドを設定した後、商品テンプレートのメインセクションにテキストブロックを追加できます。テキストブロックでは、テキスト設定の ボタンをクリックして、燃焼時間のメタフィールドを選択できます。これで、商品に燃焼時間の情報が表示されるようになります。

Shopify のテーマを使用している場合は、テーマエディタを使用してほとんどのメタフィールドとメタオブジェクトをテーマに接続できます。他のテーマを使用している場合や、テーマでサポートされていないカスタムデータタイプを追加する場合は、テーマコードを編集するか、Shopify パートナーを雇ってサポートを依頼することができます。 Shopify パートナーを雇うことについて、詳しくはこちらをご覧ください。

すべてのセクションやブロックが動的ソースをサポートしているわけではありません。テーマが動的ソースをサポートしているかどうかを確認するには、テーマエディタでテーマのアーキテクチャのバージョンと利用可能なカスタマイズオプションを確認してください。

動的ソースを使用できるセクションやブロックを追加することで、オンラインストアに動的な情報を表示できます。動的ソースは、互換性のあるリソース (商品、コレクション、ページ、ブログ、ブログ記事) を表示する任意のテンプレート、セクション、ブロックで使用できます。テンプレートで接続する前に、メタフィールドを追加する必要があります。テーマで動的ソースを使用してメタフィールドとメタオブジェクトを使用する方法についての詳細は、動的ソースを参照してください。

設定プロセスが完了したら、以下の手順に従って、 ボタンを使用し、動的ソースをテーマのセクションやブロックに接続します。

手順：

オンラインストアにメタフィールドを表示する方法とオンラインストアにメタオブジェクトを表示する方法について、詳しくはこちらをご覧ください。

動的ソースセレクター

動的ソースセレクターを使用すると、テーマエディタで正しい動的ソースを直接接続できます。動的ソースセレクターの主な機能は以下のとおりです。

• 該当する場合、さまざまなリソースから動的ソースを参照できます。たとえば、商品リソースとページリソースの両方に接続されているブロックに設定を接続する場合、動的ソースセレクターのドロップダウンメニューを使用して、商品リソースとページリソースのどちらに関連付けられたメタフィールドを検索するかを指定できます。
• 動的ソースセレクターには、必要なメタフィールドを見つけるのに役立つ検索機能と絞り込み機能があります。
• 動的ソースセレクターでは、カテゴリーメタフィールドを選択できます。これらは、商品カテゴリーを商品に割り当てると使用可能になる追加の属性です。これらのメタフィールドにアクセスすると、基になる属性メタオブジェクトの関連フィールドに動的ソースを接続できます。