セクションとブロック

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

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

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

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

  • 見出しブロック
  • テキストブロック
  • ボタンブロック
  • キャプションブロック

次のオプションを使用すると、[テキスト付き画像] セクションをさらにカスタマイズできます。

  • 画像を追加してサイズを設定する
  • 画像のアニメーションスタイルを選択する
  • ブロックのコンテンツに対する配置を選択する
  • セクションのカラースキームを設定する

追加できるブロック数の上限に達した場合、テーマエディタの [ブロックを追加] オプションはグレーで表示され、クリックまたはタップをすることはできません。たとえば、Dawnテーマの [テキスト付き画像] セクションで、見出しブロック、テキストブロック、ボタンブロック、キャプションブロックを追加した場合、[テキスト付き画像] セクションで利用できる4つのブロックすべてをすでに追加していることになるため、[ブロックを追加 (4/4)] が表示されます。

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

目次

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

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

セクションを追加する

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

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをクリックして、セクションを追加するテンプレートを選択します。

  4. サイドバーで [セクションを追加] をクリックし、次のいずれかの手順を実行します。

    • リストからセクションを選択します。
    • [セクションを検索] フィールドを使用して特定のセクションを検索し、選択します。

  5. 新しいセクションをカスタマイズするには、次の手順を実行します。

    • 新しいセクションの設定とコンテンツを編集します。
    • セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
    • [ブロックを追加] をクリックして新しいブロックを追加します。

  6. 任意：ページのセクション順序の配置を変えるには、セクション名にカーソルを合わせ、⋮⋮アイコンをクリックしてドラッグします。

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

  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. [保存] をタップします。
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. ホームページのセクションを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションを含むテンプレートを選択します。
  6. [セクション] をタップし、セクション名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
  7. 任意：個別のブロックをタップし、セクション内のブロックを編集します。
  8. [✓] をタップします。

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

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

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

  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. [✓] をタップします。

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

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

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

他のセクションでは任意のブロックを選択できますが、セクションに追加できるブロックの総数には制限があります。セクションが利用可能なブロックの最大数に達した場合、[ブロックを追加] オプションはグレーで表示され、クリックまたはタップをすることはできません。

ブロックを追加する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをクリックして、ブロックを追加するテンプレートを選択します。

  4. ブロックを追加するセクションを特定し、[ブロックを追加] をクリックして、次のいずれかの手順を実行します。

    • リストからブロックを選択します。
    • [ブロックを検索] フィールドを使用して特定のブロックを検索し、選択します。

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

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをタップして、ブロックを追加するテンプレートを選択します。

  6. [セクション] をタップし、ブロックを追加するセクションの [ブロックを追加] をタップして、次のいずれかの手順を実行します。

    • リストからブロックを選択します。
    • 虫めがねアイコンをタップして特定のブロックを検索し、ブロックを選択します。

  7. [保存] をタップします。

  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをタップして、ブロックを追加するテンプレートを選択します。

  6. [セクション] をタップし、ブロックを追加するセクションの [ブロックを追加] をタップして、次のいずれかの手順を実行します。

    • リストからブロックを選択します。
    • 虫めがねアイコンをタップして特定のブロックを検索し、ブロックを選択します。

  7. [✓] をタップします。

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

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

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

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

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

動的ソースを接続

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをクリックして、編集するセクションまたはブロックを含むテンプレートを選択します。
  4. サイドバーでセクションまたはブロック名をクリックして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
  5. 編集したい関連するコンテンツタイプの [動的ソースを接続] ボタンをクリックして、動的ソースを接続します。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションまたはブロックを含むテンプレートを選択します。
  6. [セクション] をタップし、セクションまたはブロック名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
  7. 編集したい関連するコンテンツタイプの [動的ソースを接続] ボタンをタップして、動的ソースを接続します。
  8. [保存] をタップします。
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションまたはブロックを含むテンプレートを選択します。
  6. [セクション] をタップし、セクションまたはブロック名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
  7. 編集したい関連するコンテンツタイプの [動的ソースを接続] ボタンをタップして、動的ソースを接続します。
  8. [✓] をタップします。

動的ソースセレクター

動的ソースセレクター

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

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

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

無料体験を試す