テンプレート

テンプレートとは、オンラインストアに統一感のある見た目と雰囲気をもたらすよう設定されたセクションのコレクションのことです。テンプレートで利用可能なセクションは、ご利用のテーマによって異なります。テーマエディタでは、どのテンプレートがどのページに適用されているかを確認し、それらを編集してお客様に表示する情報をカスタマイズできます。

テンプレートを編集すると、そのページテンプレートを使用しているすべてのページに、その変更が適用されます。たとえば、コレクションテンプレートにニュースレターの登録フォームを追加すると、デフォルトのコレクションテンプレートを使用するすべてのコレクションページでは、ニュースレターの登録フォームが表示されるようになります。

合計で最大1000個のテンプレートを使用できます。

テンプレートを編集する

テンプレートを編集してオンラインストアにセクションを追加することができます。一部のセクションにはカスタマイズ可能なブロックがありますが、すべてのセクションまたはブロックの設定やコンテンツが編集可能というわけではありません。テンプレートを編集すると、その変更内容はテーマのプレビューウィンドウにリアルタイムで表示されます。

手順:

新しいテンプレートを作成する

一部のテンプレートタイプは、ストアのリソースを使用して複数のページを表示するために使用できます。これらには、次のテンプレートタイプが含まれます。

  • コレクション
  • 商品
  • ブログ
  • ブログ記事
  • ページ

すべてのテーマには、タイプごとにデフォルトのテンプレートが用意されています。このデフォルトのテンプレートは、代替テンプレートが明示的に設定されていない場合にリソースが使用するテンプレートです。

テンプレートに変更を加えると、そのテンプレートを使用するページすべてに影響が及びます。そのタイプのページの一部を異なる方法で表示したい場合、テーマにすでに存在しているテンプレートを基にして、新しいテンプレートを作成することができます。既存のテンプレートから新しいテンプレートを作成すると、同じセクションが新しいテンプレートに自動的に入力されます。同じタイプの他のテンプレートの表示に影響を与えることなく、新しいテンプレートを編集して、適宜、セクションを削除、追加、または非表示にすることができます。

手順:

メタオブジェクトのテンプレートを作成する

メタオブジェクトのウェブページ用にテンプレートを作成できます。

この機能を使用するには、以下の手順を実行する必要があります。

  1. ストアフロントへのアクセス権があるメタオブジェクト定義を作成します。必要に応じて、ウェブページ機能を手動で有効化します。テーマテンプレートを作成すると、テーマエディタによってウェブページ機能が有効になります。
  2. メタオブジェクト定義のエントリーを作成します。

これでテーマテンプレートを作成できます。

手順:

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズ] をクリックします。
  3. ページ上部にあるページセレクターを開きます。
  4. [メタオブジェクトのテンプレートを作成する] をクリックします。ダイアログで、テンプレートに使用するメタオブジェクトをクリックします。ページタイトルメタディスクリプションに使用するメタオブジェクトフィールドを編集することができます。また、[検索結果] セクションでURLハンドルを編集することもできます。テンプレートの名前には、メタオブジェクト定義と同じ名前が自動的に設定されます。
  5. [テンプレートを作成する] をクリックします。
  6. テンプレートを作成してから、セクションの追加、ブロックの追加、設定の編集を行って、テンプレートをカスタマイズすることができます。動的ソースを使用して、メタオブジェクト定義フィールドと連携させることもできます。たとえば、アンバサダー向けのページを画像付きで作成する場合、動的ソースアイコンをクリックすることにより、テキスト付き画像を追加し、メタオブジェクトエントリーを連携させることができます。
  7. [保存] をクリックします。

テンプレートのプレビュー

テンプレートプレビューでは、テンプレートを保存または公開したときに、異なるリソースがお客様にどのように表示されるかをテストできます。テンプレートプレビューを使用し、異なるテンプレートを適用したページや商品がどのように表示されるかをプレビューすることができます。

テンプレートは、ページレベルまたは商品レベルで割り当てられます。テンプレートの作成や編集はテーマエディタで行いますが、ページまたは商品に割り当てられたテンプレートは管理画面で変更します。ページと商品には複数のテンプレートを使用できます。

代替テンプレートをプレビューする

別のテンプレートが適用されたページや商品がどのように表示されるかをプレビューすることができます。

手順:

新しいテンプレートを適用する

公開済みのテーマの以下のセクションに割り当てられたテンプレートを変更できます。

  • ページ
  • 商品
  • コレクション
  • ブログ
  • ブログ記事

管理画面で、割り当てられたテンプレートを変更します。表示されるテンプレートオプションは、現在のライブテーマで利用可能なテンプレートに基づいています。

商品およびコレクションのテンプレートは、個々のアイテムレベルで、または [一括編集] を使用して複数のアイテムに一括で割り当てることができます。この操作はテーマエディタでは行いません。

ページに新しいテンプレートを適用する

商品に新しいテンプレートを適用する

  1. 管理画面から [商品管理] に移動します。

  2. 絞り込み検索を使用して変更する商品を見つけるか、既存の商品のリストから商品をクリックします。

  3. [オンラインストア] セクションで、ドロップダウンメニューを使用して、選択した商品に適用する新しいテーマテンプレートを選択します。

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

コレクションに新しいテンプレートを適用する

  1. 管理画面から、[商品管理] > [コレクション] の順に移動します。
  2. 絞り込み検索を使用して、変更するコレクションを見つけるか、既存のコレクションリストからコレクションをクリックします。
  3. [オンラインストア] セクションで、ドロップダウンメニューを使用して新しいテーマテンプレートを選択し、選択したコレクションに適用します。
  4. [保存] をクリックします。

ブログ記事に新しいテンプレートを適用する

ブログに新しいテンプレートを適用する

テンプレートの一括変更

商品やコレクションについては、一括編集を利用して新しいテンプレートを複数のものに同時に適用できます。

商品を一括編集する

  1. 管理画面から [商品管理] に移動します。
  2. 絞り込み検索を使用して、変更する商品を見つけます。
  3. 複数の商品を同時に編集するには、次のショートカットを使用します。

    • 複数の商品を同時に選択して編集するには、編集するアイテムのチェックボックスをクリックします。
    • 商品を範囲選択するには、チェックボックスをクリックし、Shiftキーを押しながら別の商品のチェックボックスをクリックします。
    • 隣接する複数の商品を選択するには、アイテムをクリックして選択し、Shiftキーを押しながら別のアイテムのチェックボックスをクリックします。
  4. [一括編集] をクリックします。

  5. [一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] チェックボックスをクリックします。

  6. 最初の行のテンプレートフィールドをクリックし、Shiftキーを押しながら最後の行のテンプレートフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。

  7. ドロップダウンメニューを使用して、選択したアイテムの新しいテンプレートを選択します。

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

コレクションを一括編集する

  1. 管理画面で、[商品管理] > [コレクション] の順に移動します。
  2. 絞り込み検索を使用して、変更するコレクションを見つけます。
  3. 複数のコレクションを同時に編集するには、次のショートカットを使用します。

    • 複数のコレクションを同時に選択して編集するには、編集するアイテムのチェックボックスをクリックします。
    • コレクションを範囲選択するには、チェックボックスをクリックし、Shiftキーを押しながら別のコレクションのチェックボックスをクリックします。
    • 隣接する複数のコレクションを選択するには、アイテムをクリックして選択し、Shiftキーを押しながら別のアイテムのチェックボックスをクリックします。
  4. [一括編集] をクリックします。

  5. [一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] チェックボックスをクリックします。

  6. 最初の行のテンプレートフィールドをクリックし、Shiftキーを押しながら最後の行のテンプレートフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。

  7. ドロップダウンメニューを使用して、選択したアイテムの新しいテンプレートを選択します。

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

テンプレートを管理する

テンプレート名を変更またはテンプレートを削除するには、コードエディタを使用する必要があります。テンプレートファイルを編集すると、オンラインストアに問題が発生する可能性があります。

テンプレート名を変更する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 名前を変更するテンプレートを含むテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
  3. コードエディタで、テンプレートフォルダを見つけます。名前を変更するテンプレート名をクリックし、[ファイル名を変更する] をクリックします。
  4. 新しいテンプレート名を入力し、[ファイル名を変更する] をクリックして保存します。

テンプレートを削除する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. テンプレートを削除するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
  3. コードエディタで、テンプレートフォルダを見つけます。削除するテンプレートの名前をクリックし、[ファイルを削除] をクリックします。そのテンプレートに割り当てられたリソースがある場合、別のテンプレートを割り当てるまではデフォルトのテンプレートで表示されます。

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

無料体験を試す