セクションとブロック

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

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

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

  • 見出し
  • 段落
  • ボタン

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

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

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

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

セクションを追加する

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

手順:

  1. ドロップダウンメニューからテンプレートを選択します。4. [+ セクションを追加] をクリックし、リストから新しいセクションを選択します。5. 新しいセクションをクリックし、セクション内のブロックを編集します。6. オプション: ページのセクションを再配置するには、セクションの横にある⋮⋮アイコンをクリックしてドラッグします。7. [保存] をクリックします。

セクションを編集する

  1. ドロップダウンメニューから、編集するセクションを含むテンプレートを選択します。4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。5. オプション: セクション内のブロックを編集するには、個々のブロックをクリックします。6. [保存] をクリックします。

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

  1. ドロップダウンメニューから、編集するセクションを含むテンプレートを選択します。4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。5. 目のアイコンをクリックし、セクションやブロックを表示または非表示にします。6. [削除] をクリックして、ブロックやセクションを削除します。

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

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

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

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

ブロックを追加する

  1. ドロップダウンメニューから、編集するセクションを含むテンプレートを選択します。4. セクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスします。5. [+ ブロックを追加] をクリックし、利用可能なオプションを設定します。6. [保存] をクリックします。

メタフィールドと動的ソースを使用する

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

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

動的ソースを使用できるセクションまたはブロックを追加すると、オンラインストアに動的な情報を表示することができます。動的ソースは、商品テンプレートのセクションやブロックで使用できます。商品以外のテンプレートでは、商品を表示するセクションやブロックで動的ソースを使用することができます。テンプレートでは、メタフィールドを接続する前に、メタフィールドを追加する必要があります。テーマでメタフィールドと動的ソースを使用する方法の詳細については、「動的ソース」を参照してください。

設定プロセスを完了した後、次の手順に従って動的ソースをテンプレートに挿入します。

  1. ドロップダウンメニューから、編集するセクションを含むテンプレートを選択します。4. 既存のセクションをクリックしてプレビューウィンドウにコンテンツを読み込み、利用可能なオプションにアクセスするか、[+ セクションを追加] をクリックします。5. [+ ブロックを追加] をクリックし、動的ソースを接続します。*動的ソースを接続するアイコンが表示されている場合、クリックして1つのメタフィールドを選択します。
    動的ソースを接続する
    *動的ソースを接続するアイコンに [+] が表示されている場合、クリックして最大20個のメタフィールドを1つずつ選択して追加します。
    「動的ソースを挿入する」のアイコン
    6. [保存] をクリックします。

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

無料体験を試す