セクションとブロック

このページはDec 05, 2023に印刷されています。最新のバージョンについては、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
    • 「動的ソースを接続する」のアイコンに [+] が表示されている場合、アイコンをクリックして一度に1つずつメタフィールドを追加することで、最大20のメタフィールドを選択します。
      Insert dynamic source icon

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

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

  8. [+ ブロックを追加] をクリックしてから、動的ソースを接続します。

    • 「動的ソースを接続する」のアイコンが表示されている場合、アイコンをクリックして単一のメタフィールドを選択します。
      Connect dynamic source
    • 「動的ソースを接続する」のアイコンに [+] が表示されている場合、アイコンをクリックして一度に1つずつメタフィールドを追加することで、最大20のメタフィールドを選択します。
      Insert dynamic source icon

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

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

  8. [+ ブロックを追加] をクリックしてから、動的ソースを接続します。

    • 「動的ソースを接続する」のアイコンが表示されている場合、アイコンをクリックして単一のメタフィールドを選択します。
      Connect dynamic source
    • 「動的ソースを接続する」のアイコンに [+] が表示されている場合、アイコンをクリックして一度に1つずつメタフィールドを追加することで、最大20のメタフィールドを選択します。
      Insert dynamic source icon

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

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

無料体験を試す