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

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

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

テーマ設定を確認する

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

手順:

  1. ページ上部のドロップダウンメニュー、またはモバイルの [テンプレート] メニューから、[コレクションリスト] を選択します。

  2. [コレクションリストのページ] をクリックして、設定を表示して変更します。

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

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

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

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

手順:

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

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

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

  4. [メニュー項目を追加] ウィンドウで、コレクションリストページに表示するコレクションの名前を入力します。[リンク] フィールドをクリックし、[コレクション] を選択して、コレクションの名前をクリックします。

    メニュー項目を新しい位置に移動させるには、メニュー項目の左側のドットをクリックしてドラッグします。

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

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

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

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

手順:

  1. [セクション] ディレクトリで、list-collections-template.liquidをクリックします。

  2. 次のすべてのコードの発生を探します

{% for collection in collections %}

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

{% for collection in list_collections %}

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

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

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

無料体験を試す