セクションとブロック

このページはApr 28, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/theme-structure/sections-and-blocksをご覧ください。

テーマでは、セクションを使用して理想的なレイアウトを作成できます。ほとんどのセクションは、ヘッダー、テキスト、単一画像、画像のコラージュ、リンクなど、特定の機能を果たすブロックで構成されています。テンプレートのセクションとブロックを使用すると、ストアのコンテンツをより柔軟に配置でき、コードを編集することなくオンラインストアの見た目と雰囲気を管理できるようになります。各テンプレートには、最多25個のセクションを追加できます。

各セクションには、追加できる特定のさまざまなブロックがあります。セクションごとに最多50個のブロックを追加できます。利用可能なセクションとブロックは、テーマによって異なります。利用可能なオプションの詳細については、「テーマのドキュメント」を参照してください。

一部のセクションでは、追加できるブロック数が制限されたり、特定のタイプのブロック数が制限されたりします。たとえば、[テキスト付き画像] セクションでは、テーマのテーマデザイナーが指定したブロックのみを表示できます。無料のShopifyテーマであるDawnでは、次の各ブロックを1つだけ追加できます。

  • 見出し
  • 段落
  • ボタン

さらに、セクションの [設定] を編集し、画像を含めたり、アラインメント、サイズ、背景色、お客様がオンラインストアにアクセスした際に何が最初に読み込まれるかを選択したりして、セクションをカスタマイズすることができます。

ストアのレイアウトに追加するセクションに必要な設定やオプションが含まれていない場合、テーマコードを編集するか、テーマの開発者にサポートを依頼することができます。

目次

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

テーマエディタを開くと、ストアのホームページがデフォルトで読み込まれます。ドロップダウンメニューを使用して別のテンプレートを選択したり、テンプレートのドロップダウンにある検索バーを使用して特定のページタイプを検索したりすることができます。テンプレートを選択すると、テーマエディタに読み込まれ、変更した内容がエディタ上でプレビューできるようになります。

セクションを追加する

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

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューからテンプレートを選択します。
  4. [+ セクションを追加]をクリックし、リストから新しいセクションを選択するか、[検索] バーを使用して特定のワードを検索します。
  5. 新しいセクションをクリックし、セクション内のブロックを編集します。
  6. オプション: ページのセクションを再配置するには、セクションの横にある [⋮⋮] アイコンをクリックしてドラッグします。
  7. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューからテンプレートを選択します。
  7. [+ セクションを追加]をクリックし、リストから新しいセクションを選択するか、[検索] バーを使用して特定のワードを検索します。
  8. 新しいセクションをクリックし、セクション内のブロックを編集します。
  9. オプション: ページのセクションを再配置するには、セクションの横にある [⋮⋮] アイコンをクリックしてドラッグします。
  10. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューからテンプレートを選択します。
  7. [+ セクションを追加]をクリックし、リストから新しいセクションを選択するか、[検索] バーを使用して特定のワードを検索します。
  8. 新しいセクションをクリックし、セクション内のブロックを編集します。
  9. オプション: ページのセクションを再配置するには、セクションの横にある [⋮⋮] アイコンをクリックしてドラッグします。
  10. [保存] をクリックします。

セクションを編集する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  5. オプション: 個別のブロックをクリックし、セクション内のブロックを編集します。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. オプション: 個別のブロックをクリックし、セクション内のブロックを編集します。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. オプション: 個別のブロックをクリックし、セクション内のブロックを編集します。
  9. [保存] をクリックします。

セクションやブロックを複製する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューから、複製するセクションやブロックを含むテンプレートを選択します。
  4. 複製するセクションやブロックをクリックします。
  5. サイドバーのセクション名の横にある...ボタンをクリックして [複製] をクリックします。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、複製するセクションやブロックを含むテンプレートを選択します。
  7. 複製するセクションやブロックをクリックします。
  8. サイドバーのセクション名の横にある...ボタンをクリックして [複製] をクリックします。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、複製するセクションやブロックを含むテンプレートを選択します。
  7. 複製するセクションやブロックをクリックします。
  8. サイドバーのセクション名の横にある...ボタンをクリックして [複製] をクリックします。
  9. [保存] をクリックします。

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  5. 目のアイコンをクリックし、セクションやブロックを表示または非表示にします。
  6. [削除] をクリックし、ブロックまたはセクションを削除します。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. 目のアイコンをクリックし、セクションやブロックを表示または非表示にします。
  9. [削除] をクリックし、ブロックまたはセクションを削除します。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. 目のアイコンをクリックし、セクションやブロックを表示または非表示にします。
  9. [削除] をクリックし、ブロックまたはセクションを削除します。

一部のセクションでは、ブロックのタイプと制限が固定されています。特定のセクションやブロックに制限がある場合、インターフェイスには、利用可能なX個のブロックのうちX個を使用済みであることが表示されます。ブロックの最大数を使用した場合、既存のブロックを削除するまでブロックを追加できなくなります。

ブロックを使用して作業する

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

Shopifyテーマには、カスタマイズ可能なセクションとブロックがあります。一部のセクションには固定のブロックタイプが設定されており、テーマデザイナーがそのセクションで利用可能にしたブロックからのみ選択できます。他のセクションでは任意のブロックを選択できますが、セクションに追加できるブロックの総数には制限があります。セクションで利用可能な最大ブロック数に達すると、上限に達したというメッセージが表示され、既存のブロックが削除されるまで、[+ ブロックを追加] オプションがグレーアウトされます。

ブロックを追加する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  5. [+ ブロックを追加] をクリックして新しいブロックを選択するか、[検索] バーをクリックして検索ワードを入力します。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. [+ ブロックを追加] をクリックして新しいブロックを選択するか、[検索] バーをクリックして検索ワードを入力します。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。
  8. [+ ブロックを追加] をクリックして新しいブロックを選択するか、[検索] バーをクリックして検索ワードを入力します。
  9. [保存] をクリックします。

動的ソースを用いたメタフィールドとメタオブジェクトの使用

メタフィールドとメタオブジェクトを使用すると、オンラインストアに動的な情報を表示することができます。メタフィールドに対応するテーマを使用している場合は、テーマエディタでメタフィールドをセクションやブロックに接続することができます。

たとえば、キャンドルのセラーは、販売しているキャンドルのタイプごとに燃焼時間を表示したいと考えます。セラーは、燃焼時間の商品メタフィールドを設定した後、商品テンプレートに燃焼時間のブロックを追加し、商品メタフィールドに連携させることができます。燃焼時間を表示したページのコレクションメタフィールドを設定した後、セラーはコレクションテンプレートにブロックを追加し、コレクションメタフィールドと連携させることができます。

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

設定プロセスが完了した後は、以下の手順に従って動的ソースをテーマのブロックまたは設定に接続します。

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  4. 既存のセクションをクリックしてプレビューウィンドウにコンテンツを読み込んで利用可能なオプションにアクセスするか、[+ セクションを追加] をクリックします。
  5. [動的ソース] ボタンをクリックして、動的ソースを接続します。
    Connect dynamic source
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. 既存のセクションをクリックしてプレビューウィンドウにコンテンツを読み込んで利用可能なオプションにアクセスするか、[+ セクションを追加] をクリックします。
  8. [動的ソース] ボタンをクリックして、動的ソースを接続します。
    Connect dynamic source
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ドロップダウンメニューから、編集するセクションが含まれているテンプレートを選択します。
  7. 既存のセクションをクリックしてプレビューウィンドウにコンテンツを読み込んで利用可能なオプションにアクセスするか、[+ セクションを追加] をクリックします。
  8. [動的ソース] ボタンをクリックして、動的ソースを接続します。
    Connect dynamic source
  9. [保存] をクリックします。

動的ソースセレクター

動的ソースセレクター

動的ソースセレクターを使用すると、オンラインストアエディタ内で直接、適切な動的ソースを簡単に接続できます。以下はセレクターの主な機能です。

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す