セクションとブロック
テーマのセクションを使用して、オンラインストアに使用するレイアウトを作成できます。セクションは、テキスト、ボタン、単一画像、画像のコラージュ、リンクなど、特定の機能を持つさまざまなタイプのブロックで構成されます。
セクションとブロックを使用すると、コンテンツを柔軟に配置できるため、コードを編集することなくオンラインストアのスタイルと雰囲気を管理できます。以下のカスタマイズオプションが用意されています。
- テンプレートのセクションの配置を変更したり、セクション内のブロックの配置を変更したりすることができます。
- セクションとブロックには、特定のカスタマイズ設定を追加できます。
- 対応するセクションとブロックを接続して、商品のお手入れ方法を追加するなど、カスタムデータからオンラインストアに動的な情報を表示できます。動的ソースの接続について、詳しくはこちらをご覧ください。
テーマエディタで利用可能なセクションとブロックは、利用しているテーマとテーマのバージョンによって異なります。たとえば、利用しているテーマには、[スライドショー] セクションにのみ追加できる [スライド] ブロックや、テーマのすべてのセクションに追加できる [見出し] テキストブロックがあるかもしれません。利用可能なオプションの詳細については、利用しているテーマのドキュメントを参照してください。
セクションとブロックの数の上限
セクションとブロックの数の上限は、以下のとおりに設定されています。
- 各テンプレートには、最多25個のセクションを追加できます。
- 各セクションには最大50個のブロックを追加できます。各セクションに追加できるブロックの正確な数と各タイプのブロックの数は、セクションとブロックソースによって異なり、テーマのテーマデザイナーによって指定されます。たとえば、テーマに [メール登録] セクションがある場合、追加できる [メールフォーム] ブロックは1つだけかもしれません。
- ネストをサポートしているブロックでは、最大8レベルまでブロックをネストできます。
目次
ブロックソース
テーマの構造とインストールしたアプリによっては、さまざまなソースからのブロックに対応するさまざまなセクションがテーマに含まれている場合があります。ブロックをセクションに追加するときに、そのセクションで利用可能なすべてのブロックがブロックピッカーに表示されます。テーマとテーマのバージョンに応じて、テーマのセクションに以下のタイプのブロックを追加できます。
- アプリブロックは、テーマに機能を追加するブロックです。アプリブロックを使用して、インストールしたアプリによってテーマに追加されたエリアを、テーマ内のページにある特定のエリアに移動できます。
- セクションブロックは、特定のセクション内で定義されるブロックです。
- テーマブロックは、テーマ内で定義されるブロックで、ネストなどの動的な機能を追加できます。
テーマには、セクションブロックを使用するセクションと、テーマブロックを使用するセクションを追加できます。1つのセクションに追加できるのは、テーマブロックまたはセクションブロックのいずれかで、両方を追加することはできません。
セクション内でアプリブロックを利用できるかどうかは、アプリの機能や、セクションがアプリブロックに対応しているかどうかによって決まります。
セクションブロック
セクションブロックは、特定のセクション用に設計されたブロックです。セクションによっては、追加できるセクションブロックのタイプが決まっていたり、ブロックのタイプごとに追加できる数に制限があったりする場合もあります。
セクションブロック付きのセクションの例
たとえば、テーマに [メール登録] セクションがあるとします。このセクションを使用してニュースレターの登録フォームを追加し、お客様がニュースレターを購読できるようにすることができます。[メール登録] セクションを追加したら、以下のいずれかのブロックを追加します。
- [メールフォーム] ブロック
- 見出しブロック
- [小見出し] ブロック
メールフォームブロックを追加し、
[ブロックを追加] をクリックして別のブロックを追加すると、[メールフォーム] ブロックはブロックピッカーのオプションとして表示されなくなります。こうした制限があることで、お客様のメールアドレスの取得に関する問題は回避され、お客様はメールアドレスを簡単に入力できます。
[メール登録] セクションで利用可能な3つのブロックすべてを追加した場合、ブロックピッカーには、利用可能なすべてのブロックが使用されているというメッセージが表示されます。
テーマブロック
テーマブロックは、テーマ内で定義されるブロックで、ネストなどの動的な機能を追加できます。テーマブロックに対応しているセクションでは、セクションの構造に応じて、異なるさまざまなブロックを追加できます。テーマブロックに対応しているセクションでは、利用可能なすべてのテーマブロック、ブロックの特定のサブセット、またはそのセクション固有のブロックを追加できる場合があります。また、テーマブロックによっては、以下のような仕様があります。
- 一部のブロックはネストをサポートしており、最大8レベルまでブロックを他のブロック内にネストできます。
- 一部のセクションには必須ブロックがあります。これらのブロックはカスタマイズしたり非表示にしたりできますが、配置を変更したり、ブロックを削除したりすることはできません。
- 一部のブロックは、特定の条件が満たされた場合に、セクションにおいて自動的に表示されます。
テーマブロック付きのセクションの例
たとえば、テーマにテーマブロック付きの [スライドショー] セクションがあるとします。
テーマのスライドショーセクションで、[ブロックを追加] をクリックすると、ブロックピッカーから [スライド] ブロックを選択することができます。他のブロックタイプは利用できません。[画像バナー] セクションなど、テーマの別のセクションに [スライド] ブロックを追加しようとしても、[スライド] ブロックは利用できません。これが、ブロックの制限の例です。
[スライド] ブロックをスライドショーセクションに追加した後、[ブロックを追加] をクリックして、スライドショーセクションの任意の [スライド] ブロックに [見出し]、[画像]、[ボタン] などの追加のブロックを追加できます。これらのブロックは [スライド] ブロック内にネストされています。これが、ブロックのネストの例です。
2つ目の [スライド] ブロックを [スライドショー] セクションに追加すると、テーマは自動的に [スライドショーのコントロール] ブロックを追加します。このブロックには、サイトへの訪問者がクリックしてスライド間を移動できるボタンが表示されます。ボタンのスタイルをカスタマイズしたり、コントロールを非表示にしたりできますが、ブロックを削除することはできません。これが、特定の条件が満たされた場合に表示される必須ブロックの例です。
テーマブロックへの対応状況
テーマブロックにアクセスするには、利用しているテーマに、テーマブロックに対応しているセクションが必要です。利用しているテーマがテーマブロックに対応しているかどうかは、テーマのコードで確認できます。Liquidエディタのサイドバーに [blocks] ディレクトリーがある場合は、テーマブロックに対応しているテーマを使用しています。利用しているテーマのドキュメントを確認することもできます。
手順
管理画面から [オンラインストア] > [テーマ] に移動します。
確認するテーマの横にある [
] ボタンをクリックし、[コード編集] をクリックします。サイドバーで [ブロック] フォルダーを探します。
![テーマコードエディタで [ブロック] フォルダーを強調表示します](https://cdn.shopify.com/shopifycloud/help-center/manual/themes/theme-editor/theme_blocks_folder.png)
セクションとブロックを使用してテーマテンプレートをカスタマイズする
テーマエディタを開くと、ストアのホームページがデフォルトで読み込まれます。商品、コレクション、ページ、またはブログなどの各種テンプレートを選択するには、ドロップダウンメニューを使用するか、テンプレートのドロップダウンの検索バーを使用して特定のテンプレートを検索することができます。テンプレートを選択すると、テーマエディタに読み込まれ、変更を加えるとエディタにプレビューされます。
セクションを追加する
オンラインストアのページに新しいセクションを追加します。
手順
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをクリックして、セクションを追加するテンプレートを選択します。
サイドバーで、
[セクションを追加] をクリックし、次のいずれかの手順を実行します。- リストからセクションを選択します。
- [セクションを検索] フィールドを使用して特定のセクションを検索し、選択します。
新しいセクションをカスタマイズするには、次の手順を実行します。
- 新しいセクションの設定とコンテンツを編集します。
- セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
- 新しいブロックを追加する には、サークル ブロックの追加 を クリックします。
任意：ページのセクション順序の配置を変えるには、セクション名にカーソルを合わせ、
![[ドラッグ&ドロップ]](https://cdn.shopify.com/shopifycloud/help-center/manual/admin-icons/DragHandleIcon.svg)
ボタンをクリックしてドラッグします。[保存] をクリックします。
iPhone
Shopifyアプリから、[
![] メニュー [](https://cdn.shopify.com/shopifycloud/help-center/manual/admin-icons/MenuIcon.svg)
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをタップして、セクションを追加するテンプレートを選択します。
[セクション] をタップし、[セクションを追加] をタップして、次のいずれかの手順を実行します。
- リストからセクションを選択し、[追加] をタップします。
ボタンをタップして特定のセクションを検索し、セクションを選択して、追加するをタップします。
新しいセクションをカスタマイズするには、次の手順を実行します。
- 新しいセクションの設定とコンテンツを編集します。
- セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
- [ブロックを追加] をタップして新しいブロックを追加します。
任意：ページのセクション順序の配置を変えるには、セクションをタップしてドラッグします。
[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをタップして、セクションを追加するテンプレートを選択します。
[セクション] をタップし、[セクションを追加] をタップして、次のいずれかの手順を実行します。
- リストからセクションを選択し、[追加] をタップします。
- ボタンをタップして特定のセクションを検索し、セクションを選択して、追加するをタップします。
新しいセクションをカスタマイズするには、次の手順を実行します。
- 新しいセクションの設定とコンテンツを編集します。
- セクションで読み込むデフォルトブロックの設定とコンテンツを編集します。
- [ブロックを追加] をタップして新しいブロックを追加します。
任意：ページのセクション順序の配置を変えるには、セクションをタップしてドラッグします。
[✓] をタップします。
セクションを編集する
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページのセクションを編集するか、[ホームページ] ドロップダウンメニューをクリックして、編集するセクションを含むテンプレートを選択します。
サイドバーでセクション名をクリックして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
任意：個別のブロックをクリックし、セクション内のブロックを編集します。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションを含むテンプレートを選択します。
[セクション] をタップし、セクション名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
任意：個別のブロックをタップし、セクション内のブロックを編集します。
[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションを含むテンプレートを選択します。
[セクション] をタップし、セクション名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
任意：個別のブロックをタップし、セクション内のブロックを編集します。
[✓] をタップします。
セクションまたはブロックを並べ替える
ページテンプレート上のセクションの順序を変更したり、それらのセクション内のブロックを並べ替えたりできます。さらに、互換性のあるブロックを異なるセクション間で移動することもできます。たとえば、ホームページに2つの [スライドショー] セクションがある場合、1つのスライドショーから別のスライドショーに [スライド] ブロックをドラッグできます。
ブロックタイプに互換性がない場合、またはセクションがすでにブロックの上限に達している場合は、ブロックを別のセクションに移動することはできません。セクションまたはブロックを無効な位置に移動しようとすると、元の位置に戻ります。
プレビューインスペクターを使用して、セクションを並べ替えることもできます。テーマエディターでのプレビューインスペクターの使用方法について詳しくご覧ください。
手順
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページ上のセクションまたはブロックを編集するには、セクションまたはブロックを直接選択するか、[ホームページ] ドロップダウンメニューを使用して、編集するセクションまたはブロックを含む特定のテンプレートを選択します。
- を長押しして、ブロックまたはセクションを新しい場所にドラッグします。
[保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマの横の [カスタマイズ] をタップします。
- ホームページ上のセクションまたはブロックを編集するには、セクションまたはブロックを直接選択するか、[ホームページ] ドロップダウンメニューを使用して、編集するセクションまたはブロックを含む特定のテンプレートを選択します。
- [セクション] > **[編集]**をタップします。
- を長押しして、続いて、ブロックまたはセクションを新しい場所にドラッグします。
- [完了] をタップします。
- [保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマの横の [カスタマイズ] をタップします。
- ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションまたはブロックを含むテンプレートを選択します。
- [セクション] > **[編集]**をタップします。
- を長押しして、続いて、ブロックまたはセクションを新しい場所にドラッグします。
- [完了] をタップします。
- [✓] をタップします。
セクションやブロックを複製する
セクションまたはブロックを複製することで、そのセクションまたはブロックの同一の複製を作成できます。
ブロックを複製すると、新しいブロックが同じセクションに追加されます。ブロックを新しいセクションに移動したり、ブロックの順序を変更したりする場合は、ブロックを並べ替えることができます。また、ブロックをコピーしてから、別のセクションに直接貼り付けることもできます。
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページのセクションまたはブロックを複製するか、[ホームページ] ドロップダウンメニューをクリックして、複製するセクションまたはブロックを含むテンプレートを選択します。
複製するセクションまたはブロックを右クリックして、[複製] をクリックします。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマの横の [カスタマイズ] をタップします。
ホームページのセクションまたはブロックを複製するか、[ホームページ] ドロップダウンメニューをタップして、複製するセクションまたはブロックを含むテンプレートを選択します。
[セクション] > **[編集]**をタップします。
- > [複製] をタップします。
[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマの横の [カスタマイズ] をタップします。
ホームページのセクションまたはブロックを複製するか、[ホームページ] ドロップダウンメニューをタップして、複製するセクションまたはブロックを含むテンプレートを選択します。
[セクション] > **[編集]**をタップします。
- > [複製] をタップします。
[✓] をタップします。 。
ブロックをコピーして貼り付ける
同じブロックを複数のセクションで使用する場合は、簡単に、コピーして別のセクションに貼り付けることができます。また、同じセクション内でブロックをコピーして貼り付けたり、代わりにブロックを複製したりすることもできます。複製されたブロックは、元のブロックのすべての設定と内容を保持します。
手順
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマの横の [カスタマイズ] をクリックします。
ホームページにブロックをコピーして貼り付けるには、ブロックを直接選択するか、[ホームページ] ドロップダウンメニューを使用して、編集するセクションまたはブロックを含む特定のテンプレートを選択します。
複製するブロックを右クリックして、[コピー] をクリックします。
同じセクションまたは別のセクションで、セクションを右クリックして、[貼り付け] をクリックします。
[保存] をクリックします。
セクションまたはブロックを非表示または削除する
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページのセクションまたはブロックを非表示にするまたは削除するか、[ホームページ] ドロップダウンメニューをクリックして、非表示にするまたは削除するセクションまたはブロックを含むテンプレートを選択します。
任意：オンラインストアからセクションまたはブロックを非表示にするには、セクション名またはブロック名にカーソルを合わせて [
] ボタンをクリックします。任意：オンラインストアからセクションまたはブロックを削除するには、セクション名またはブロック名にカーソルを合わせて [
] ボタンをクリックします。[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションまたはブロックを非表示にするまたは削除するか、[ホームページ] ドロップダウンメニューをタップして、非表示にするまたは削除するセクションまたはブロックを含むテンプレートを選択します。
[セクション] をタップし、非表示または削除するセクションまたはブロックをタップします。
任意：オンラインストアでセクションまたはブロックを非表示にするには、[
] > [非表示] をタップします。任意：オンラインストアでセクションまたはブロックを削除するには、[
] > [削除] をタップします。[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションまたはブロックを非表示にするまたは削除するか、[ホームページ] ドロップダウンメニューをタップして、非表示にするまたは削除するセクションまたはブロックを含むテンプレートを選択します。
[セクション] をタップし、非表示または削除するセクションまたはブロックをタップします。
任意：オンラインストアでセクションまたはブロックを非表示にするには、[
] > [非表示] をタップします。任意：オンラインストアでセクションまたはブロックを削除するには、[
] > [削除] をタップします。[✓] をタップします。
セクションまたはブロックの名前を変更する
デフォルトでは、テーマエディタのサイドバーのメニューおよび設定仕様のセクションまたはブロックのタイトルは、「コレクション」や「テキスト」などのブロックまたはセクションのタイプに設定されます。
ブロックの場合、ブロック設定に見出しや説明などのテキスト フィールドが含まれていると、そのテキストはサイドバー メニューのタイトルにも追加されます。テキスト フィールドが複数ある場合は、コンテンツがある最初のテキスト フィールドが追加されます。テキスト フィールド内のテキストを変更すると、ブロックのタイトルが変更され、「更新する」というテキストが含まれるようになります。 セクション名またはブロック名は空白にできません。
たとえば、列ブロックを使用して、ページテンプレートにマルチカラムセクションを追加します。列ブロックには、デフォルトのテキストが「列」の見出し設定と、デフォルトのテキストが「画像とテキストを組み合わせて、選択した商品、コレクション、またはブログ記事に焦点を当てましょう」の説明設定が含まれています。両方。デフォルトのセクションタイトルは「マルチカラム」です。デフォルトの列ブロックのタイトルは「列 - 列」です。見出しセクションからテキストを削除すると、ブロックのタイトルが「列 - 画像とテキストの組み合わせて...」に更新されます。
テーマエディタのサイドバー メニューにあるセクションまたはブロックの設定から、セクションまたはブロックの名前をカスタム名に変更できます。
手順
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
名前を変更するセクションまたはブロックをクリックします。
次のいずれかの方法でタイトルを更新します。
- タイトルをクリックして、新しい名前を編集または入力します。
- >
[名前の変更] をタップし、新しい名前を入力します。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
タップするかスワイプしてセクション「メニュー」を開きます。
名前を変更したいセクションまたはブロックをタップして設定を開きます。
- > 名前の変更をタップし、新しい名前を入力します。
[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
タップするかスワイプしてセクション「メニュー」を開きます。
名前を変更したいセクションまたはブロックをタップして設定を開きます。
- > 名前の変更をタップし、新しい名前を入力します。
[✓] をタップします。
ブロックを使用して作業する
ブロックは、テンプレートのセクションにコンテンツを追加するために使用する、カスタマイズ可能なモジュールです。ブロックを使用して、テキスト、画像、リンク、ボタンなどを追加できます。
Shopifyテーマには、カスタマイズ可能なセクションとブロックがあります。一部のセクションには固定のブロックタイプが設定されており、テーマデザイナーがそのセクションで利用可能にしたブロックからのみ選択できます。
他のセクションでは任意のブロックを選択できますが、セクションに追加できるブロックの総数には制限があります。セクションが利用可能なブロックの最大数に達した場合、[ブロックを追加] オプションはグレーで表示され、クリックまたはタップをすることはできません。
検索を使用して名前で特定のブロックを検索したり、ブロックピッカーのドロップダウン メニューからブロックを選択したりできます。テーマのブロックは、ピッカー コレクションのブロックのコレクションや、画像とビデオのブロックのメディアなど、ピッブロックカー内のカテゴリに分類される場合があります。
ブロックのプレビューがブロックピッカーに表示されるため、追加する前にブロックの表示を確認できます。
ブロックを追加する
デスクトップ
管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをクリックして、ブロックを追加するテンプレートを選択します。
ブロックを追加するセクションを特定し、[ブロックを追加] をクリックして、次のいずれかの手順を実行します。
- リストからブロックを選択します。
- [ブロックを検索] フィールドを使用して特定のブロックを検索し、選択します。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをタップして、ブロックを追加するテンプレートを選択します。
[セクション] をタップし、ブロックを追加するセクションの [ブロックを追加] をタップして、次のいずれかの手順を実行します。
- リストからブロックを選択します。
- ボタンをタップして特定のブロックを検索し、ブロックを選択する。
[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページでセクションにブロックを追加するか、[ホームページ] ドロップダウンメニューをタップして、ブロックを追加するテンプレートを選択します。
[セクション] をタップし、ブロックを追加するセクションの [ブロックを追加] をタップして、次のいずれかの手順を実行します。
- リストからブロックを選択します。
- ボタンをタップして特定のブロックを検索し、ブロックを選択する。
[✓] をタップします。
動的ソースを用いたメタフィールドとメタオブジェクトを使用する
メタフィールドとメタオブジェクトを使用して、オンラインストアに動的な情報を表示できます。メタフィールドに対応しているテーマを利用している場合、テーマエディタで、対応しているセクションまたはブロックの設定にメタフィールドを接続できます。
たとえば、キャンドルを販売する場合、ストアで出品する各キャンドルの燃焼時間を表示できます。Shopify管理画面の [設定] の [カスタムデータ] セクションで [燃焼時間] の商品のメタフィールドを設定した後、商品テンプレートのメインセクションにテキストブロックを追加します。テキストブロックでは、テキスト設定の [
] ボタンをクリックし、[書き込み時間] メタフィールドを選択することができます。すると、燃焼時間に関する情報が商品ページに表示されます。
Shopifyテーマを利用している場合、テーマエディタを使用して、ほとんどのメタフィールドおよびメタオブジェクトをテーマに接続できます。その他のテーマを利用している場合、または利用中のテーマで使用できないカスタムデータタイプを追加したい場合は、テーマコードを編集するか、Shopifyパートナーを雇ってサポートを受けることができます。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。
すべてのセクションまたはブロックが動的ソースをサポートしているわけではありません。テーマが動的ソースをサポートしているかどうかを判断するには、テーマのアーキテクチャバージョン、およびテーマエディタで利用可能なカスタマイズオプションを確認してください。
動的ソースを使用できるセクションやブロックを追加すると、オンラインストアに動的な情報を表示することができます。動的ソースは、対応するリソース (商品、コレクション、ページ、ブログ、ブログ記事) を表示するテンプレート、セクション、ブロックで使用できます。テンプレートでメタフィールドを連携させるには、メタフィールドを追加する必要があります。テーマ内で動的ソースを用いてメタフィールドやメタオブジェクトを使用する方法の詳細は、「動的ソース」を参照してください。
設定プロセスを完了したら、以下の手順に従い、 ボタンを使用して、動的ソースをテーマのセクションまたはブロックに接続します。
手順
デスクトップ
iPhone
Shopifyアプリから、[
] アイコンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションまたはブロックを含むテンプレートを選択します。
[セクション] をタップし、セクションまたはブロック名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
編集するコンテンツタイプの [
] ボタンをタップすることで、動的ソースを接続します。[保存] をタップします。
Android
Shopifyアプリから、
ボタンをタップします。販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
ホームページのセクションまたはブロックを編集するか、[ホームページ] ドロップダウンメニューをタップして、編集するセクションまたはブロックを含むテンプレートを選択します。
[セクション] をタップし、セクションまたはブロック名をタップして、プレビューウィンドウにコンテンツを読み込み、編集可能な設定とオプションにアクセスします。
編集したい関連するコンテンツタイプの [動的ソースを接続] ボタンをタップして、動的ソースを接続します。
[✓] をタップします。
オンラインストアにメタフィールドを表示する方法の詳細はこちらを、オンラインストアにメタオブジェクトを表示する方法の詳細はこちらをご覧ください。
動的ソースセレクター
動的ソースセレクターを使用して、テーマエディタで正しい動的ソースを直接接続できます。以下では、動的ソースセレクターの主な機能を紹介します。
- 適宜、各種のリソースから動的ソースを参照できます。たとえば、商品リソースとページリソースの両方に接続されているブロックに設定を接続する場合、動的ソースセレクターのドロップダウンメニューを使用して、商品リソースまたはページリソースのいずれかに関連付けられたメタフィールドを検索するかどうかを指定できます。
- 動的ソースセレクターには、必要なメタフィールドを見つけるのに役立つ検索と絞り込み機能があります。
- 動的ソースセレクターを使用すると、カテゴリーのメタフィールドを選択することができます。これらは、商品カテゴリーを商品に割り当てた際に利用可能になる付加的な属性です。これらのメタフィールドにアクセスすると、基になる属性メタオブジェクトの関連フィールドに動的ソースを接続できるようになります。