テンプレート

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

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

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

テンプレートを編集する

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

メモ

1600ピクセルよりも広い幅の画面で、ブラウザのウィンドウが完全に展開されている場合、またはブラウザのウィンドウが少なくとも1600ピクセルの幅まで展開されている場合、2つのサイドバーが表示されます。左側のサイドバーにはメニューパネル、右側のサイドバーには設定パネルが表示されます。

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. ページ上部のドロップダウンメニューを開きます。

iPhone

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

Android

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

1. ドロップダウンメニューで、編集するテンプレートを選択します。
2. [+ セクションを追加] をクリックして、テンプレートの新しいセクションを選択します。
3. 新しいセクションをクリックして、設定とオプションを表示します。
4. セクションまたはセクション内のブロックに変更を加えます。
5. セクション内容に問題がなければ、[保存] をクリックします。

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

メモ

新しいテンプレートの作成は、Online Store 2.0のみで行うことができます。

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

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

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

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

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. ページ上部のドロップダウンメニューを開きます。

iPhone

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

Android

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

1. ドロップダウンメニューを使用してテンプレートを選択します。[+ テンプレートを作成する] をクリックします。
2. テンプレートに固有の名前を付けます。
3. ドロップダウンメニューを使用して、新しいテンプレートのベースにする既存のテンプレートを選択します。
4. [テンプレートを作成する] をクリックします。

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

メモ

管理画面で、[有効] なステータスのページと商品のみをプレビューできます。

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

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

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

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

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. ページ上部のドロップダウンメニューを開きます。

iPhone

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

Android

1. Shopifyアプリから [ストア] をタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。

1. ドロップダウンメニューを使用してテンプレートを選択します。
2. サイドバーで [変更] をクリックします。
3. 選択したテンプレートでプレビューする商品またはページを選択します。

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

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

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

管理画面で、割り当てられたテンプレートを変更します。テンプレートは、個々のアイテムレベルで、または [一括操作] を使用して複数のアイテムに割り当てることができます。この操作はテーマエディタでは行いません。

手順:

デスクトップ

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

iPhone

1. Shopifyアプリから [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。

Android

1. Shopifyアプリから [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。

1. ストアページのタイトルをクリックします。
2. [オンラインストア] セクションで、ドロップダウンメニューを使用して、選択したページに適用する新しいテーマテンプレートを選択します。
3. [保存] をクリックします。

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

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

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

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

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

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

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

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

デスクトップ

1. 管理画面から、オンラインストア > ブログ記事に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。

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

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

デスクトップ

1. 管理画面から、オンラインストア > ブログ記事に移動します。
2. [blogs を管理] をクリックします。

iPhone

1. Shopifyアプリから [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。
4. ブログ記事の横にある [...] ボタンをタップし、次に [blogsを管理] を選択します。

Android

1. Shopifyアプリから [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。
4. [ブログ記事] の横にある [⋮] ボタンをタップし、[blogs を管理] を選択します。

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

テンプレートの一括変更

メモ

ブログ記事とページの一括編集は利用できなくなりました。ブログ記事やページを引き続き編集する必要がある場合は、外部サービスアプリの利用を検討してください。

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

商品を一括編集する

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. コードエディタで、テンプレートフォルダを見つけます。削除するテンプレートの名前をクリックし、[ファイルを削除] をクリックします。そのテンプレートに割り当てられたリソースがある場合、別のテンプレートを割り当てるまではデフォルトのテンプレートで表示されます。