セクションとブロック

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

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

  • テンプレートのセクションの配置を変更したり、セクション内のブロックの配置を変更したりすることができます。
  • セクションとブロックには、特定のカスタマイズ設定を追加できます。
  • 対応するセクションとブロックを接続して、商品のお手入れ方法を追加するなど、カスタムデータからオンラインストアに動的な情報を表示できます。動的ソースの接続について、詳しくはこちらをご覧ください。

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

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

セクションとブロックの数の上限は、以下のとおりに設定されています。

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

ブロックソース

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

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

テーマには、セクションブロックを使用するセクションと、テーマブロックを使用するセクションを追加できます。1つのセクションに追加できるのは、テーマブロックまたはセクションブロックのいずれかで、両方を追加することはできません。

セクション内でアプリブロックを利用できるかどうかは、アプリの機能や、セクションがアプリブロックに対応しているかどうかによって決まります。

セクションブロック

セクションブロックは、特定のセクション用に設計されたブロックです。セクションによっては、追加できるセクションブロックのタイプが決まっていたり、ブロックのタイプごとに追加できる数に制限があったりする場合もあります。

セクションブロック付きのセクションの例

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

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

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

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

テーマブロック

テーマブロックは、テーマ内で定義されるブロックで、ネストなどの動的な機能を追加できます。テーマブロックに対応しているセクションでは、セクションの構造に応じて、異なるさまざまなブロックを追加できます。テーマブロックに対応しているセクションでは、利用可能なすべてのテーマブロック、ブロックの特定のサブセット、またはそのセクション固有のブロックを追加できる場合があります。また、テーマブロックによっては、以下のような仕様があります。

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

テーマブロック付きのセクションの例

たとえば、テーマにテーマブロック付きの [スライドショー] セクションがあるとします。

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

[スライドショー] セクションに [スライド] ブロックを追加した後、[+ ブロックを追加] をクリックして、[見出し][画像][ボタン] など、その他のブロックを [スライドショー] セクションの任意の [スライド] ブロックに追加できます。これらのブロックは [スライド] ブロックにネストされます。これが、ブロックのネストの例です。

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

テーマブロックへの対応状況

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

手順:

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

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

  3. サイドバーで [blocks] フォルダーを探します。

    テーマコードエディタ内の [blocks] フォルダーのハイライト

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

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

セクションを追加する

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

手順:

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをクリックして、セクションを追加するテンプレートを選択します。

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

    • リストからセクションを選択します。
    • [セクションを検索] フィールドを使用して特定のセクションを検索し、選択します。
  5. 新しいセクションをカスタマイズするには、次の手順を実行します。

    • 新しいセクションの設定とコンテンツを編集します。
    • セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
    • [+ ブロックを追加] をクリックして新しいブロックを追加します。
  6. 任意:ページのセクション順序の配置を変えるには、セクション名にカーソルを合わせ、⋮⋮アイコンをクリックしてドラッグします。

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

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

    • リストからセクションを選択し、[追加] をタップします。
    • 虫めがねアイコンをタップして特定のセクションを検索し、セクションを選択して、[追加] をタップします。
  7. 新しいセクションをカスタマイズするには、次の手順を実行します。

    • 新しいセクションの設定とコンテンツを編集します。
    • セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
    • [ブロックを追加] をタップして新しいブロックを追加します。
  8. 任意:ページのセクション順序の配置を変えるには、セクションをタップしてドラッグします。

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

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

    • リストからセクションを選択し、[追加] をタップします。
    • 虫めがねアイコンをタップして特定のセクションを検索し、セクションを選択して、[追加] をタップします。
  7. 新しいセクションをカスタマイズするには、次の手順を実行します。

    • 新しいセクションの設定とコンテンツを編集します。
    • セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
    • [ブロックを追加] をタップして新しいブロックを追加します。
  8. 任意:ページのセクション順序の配置を変えるには、セクションをタップしてドラッグします。

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

セクションを編集する

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページのセクションを編集するか、[ホームページ] ドロップダウンメニューをクリックして、編集するセクションを含むテンプレートを選択します。

  4. サイドバーでセクション名をクリックして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。

  5. 任意:個別のブロックをクリックし、セクション内のブロックを編集します。

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

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

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

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページのセクションまたはブロックを複製するか、[ホームページ] ドロップダウンメニューをクリックして、複製するセクションまたはブロックを含むテンプレートを選択します。

  4. 複製するセクションまたはブロックをクリックします。

  5. サイドバーで [...] > [複製] の順にクリックします。

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

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

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

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページのセクションまたはブロックを非表示にするまたは削除するか、[ホームページ] ドロップダウンメニューをクリックして、非表示にするまたは削除するセクションまたはブロックを含むテンプレートを選択します。

  4. 任意:オンラインストアからセクションまたはブロックを非表示にするには、セクション名またはブロック名にカーソルを合わせ、目のアイコンをクリックします。

  5. 任意:オンラインストアからセクションまたはブロックを削除するには、セクション名またはブロック名にカーソルを合わせ、ごみ箱アイコンをクリックします。

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

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

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

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

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

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

ブロックを追加する

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをクリックして、ブロックを追加するテンプレートを選択します。

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

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

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

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

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

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

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

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

たとえば、キャンドルを販売する場合、ストアで出品する各キャンドルの燃焼時間を表示できます。管理画面の [設定] の [カスタムデータ] セクションで [燃焼時間] の商品のメタフィールドを設定した後、商品テンプレートのメインセクションにテキストブロックを追加します。テキストブロックで、テキスト設定の [動的ソースを接続] アイコンをクリックし、[燃焼時間] メタフィールドを選択します。すると、燃焼時間に関する情報が商品ページに表示されます。

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

すべてのセクションまたはブロックが動的ソースに対応しているわけではありません。詳細については、利用しているテーマのドキュメントを参照してください。

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

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

[動的ソースを接続] アイコン

手順:

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

  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

  3. ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをクリックして、編集するセクションまたはブロックを含むテンプレートを選択します。

  4. サイドバーでセクションまたはブロック名をクリックして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。

  5. 編集したい関連するコンテンツタイプの [動的ソースを接続] ボタンをクリックして、動的ソースを接続します。

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

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

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

動的ソースセレクター

動的ソースセレクター

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

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