コレクションの順序を変更する

このページはJan 14, 2025に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/change-collections-pageをご覧ください。

ストアには、すべてのコレクションをアルファベット順に表示する、your-store.com/collectionsのURLにあるコレクションリストページが含まれています。このカスタマイズでは、どのコレクションを含めるかを指定する方法、およびページ上でコレクションの順序を変更する方法について確認します。

コレクションリストのページ

目次

テーマ設定を確認する

すべての無料Shopifyテーマの最新バージョンには、テーマエディタからコレクションリストページのレイアウトを変更できるようにする設定が含まれています。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニュー、またはモバイルの [テンプレート] メニューから、[コレクションリスト] を選択します。
  4. [コレクションリストのページ] をクリックして、設定を表示して変更します。
  5. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ページ上部のドロップダウンメニュー、またはモバイルの [テンプレート] メニューから、[コレクションリスト] を選択します。
  7. [コレクションリストのページ] をタップして、設定を表示して変更します。
  8. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. ページ上部のドロップダウンメニュー、またはモバイルの [テンプレート] メニューから、[コレクションリスト] を選択します。
  7. [コレクションリストのページ] をタップして、設定を表示して変更します。
  8. [保存] をタップします。

テーマにコレクションリストのページを変更する設定が含まれていない場合は、メニューを作成してテーマコードを編集する必要があります。

コレクションリストページを管理するメニューを作成する

メニューを作成し、コレクションリストページにどのコレクションを含めるかを指定します。

手順:

デスクトップ

  1. 管理画面で [コンテンツ] > [メニュー] の順に移動します。

  2. [メニューを追加する] をクリックします。

  3. メニューにAll collectionsと名付けます。この名前を変更しないようにすることは重要です。なぜなら、コレクションリストページにどのコレクションを、どの順番で表示するかを決定するために、その名前がテーマで使用されるからです。メニュー名はオンラインストアには表示されません。

  4. [メニュー項目を追加] をクリックします。

  5. [メニュー項目を追加] ウィンドウで、コレクションリストページに表示するコレクションの名前を入力します。[リンク] フィールドをクリックし、[コレクション] を選択して、コレクションの名前をクリックします。メニュー項目を新しい位置に移動させるには、メニュー項目の左側のドットをドラッグします。

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

iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. [コンテンツ] > [メニュー] の順にタップします。
  3. [メニューを追加する] をタップします。
  4. メニューにAll collectionsと名付けます。この名前を変更しないようにすることは重要です。なぜなら、コレクションリストページにどのコレクションを、どの順番で表示するかを決定するために、その名前がテーマで使用されるからです。メニュー名はオンラインストアには表示されません。
  5. [メニュー項目を追加する] をタップします。
  6. [メニュー項目を追加] ウィンドウで、コレクションリストページに表示するコレクションの名前を入力します。[リンク] フィールドをタップし、[コレクション] を選択して、コレクションの名前をタップします。メニュー項目を新しい位置に移動させるには、メニュー項目の左側のドットをドラッグします。
  7. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. [コンテンツ] > [メニュー] の順にタップします。
  3. [メニューを追加する] をタップします。
  4. メニューにAll collectionsと名付けます。この名前を変更しないようにすることは重要です。なぜなら、コレクションリストページにどのコレクションを、どの順番で表示するかを決定するために、その名前がテーマで使用されるからです。メニュー名はオンラインストアには表示されません。
  5. [メニュー項目を追加する] をタップします。
  6. [メニュー項目を追加] ウィンドウで、コレクションリストページに表示するコレクションの名前を入力します。[リンク] フィールドをタップし、[コレクション] を選択して、コレクションの名前をタップします。メニュー項目を新しい位置に移動させるには、メニュー項目の左側のドットをドラッグします。
  7. [保存] をタップします。

Supplyなどの一部のテーマで必要なことは、All collectionsメニューを作成することだけです。変更されたかどうかを確認するには、オンラインストアのコレクションリストページ (your-store.com/collections) に移動します。変更が表示されない場合、テーマコードを編集する必要があります。

list-collections.liquidテンプレートをカスタマイズする

コレクションリストページのコードを編集し、All collectionsメニューに含めたコレクションのみをページに表示します。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. [セクション] ディレクトリで、list-collections-template.liquidをクリックします。
  4. 次のすべてのコードの発生を探します。 
{% for collection in collections %}

一部のテーマには、次のコードが代わりに含まれます。

{% for collection in list_collections %}

発生する上記のすべてのコードを、次のコードと置き換えます。

{% for link in linklists.all-collections.links %}
{% assign collection = link.object %}
  1. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
  5. [セクション] ディレクトリで、list-collections-template.liquidをタップします。
  6. 次のすべてのコードの発生を探します。 
{% for collection in collections %}

一部のテーマには、次のコードが代わりに含まれます。

{% for collection in list_collections %}

発生する上記のすべてのコードを、次のコードと置き換えます。

{% for link in linklists.all-collections.links %}
{% assign collection = link.object %}
  1. [保存] をクリックします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
  5. [セクション] ディレクトリで、list-collections-template.liquidをタップします。
  6. 次のすべてのコードの発生を探します。 
{% for collection in collections %}

一部のテーマには、次のコードが代わりに含まれます。

{% for collection in list_collections %}

発生する上記のすべてのコードを、次のコードと置き換えます。

{% for link in linklists.all-collections.links %}
{% assign collection = link.object %}
  1. [保存] をクリックします。

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

無料体験を試す