Shopify

2020.08.03 作成 | 2021.08.14 更新

【Shopify】商品一覧ページのカスタマイズ方法 - #06

今回の記事から、liquidでコードをどんどん書いて、Shopifyのサイトをカスタマイズしていきます。

まず、商品一覧ページをカスタマイズしていきます。

■バックナンバー

はじめに
商品データとコレクションの登録
- コレクションの登録
- 商品の登録
「templates/collection.liquid」の編集
- サンプルコード
- コードの解説
表示する商品の順番を変える
- デフォルトで表示する順番を変える
- URLで商品を並び替える
まとめ

はじめに

今回使用するテーマは無料の「Minimal」です。

公式テーマのURL：https://themes.shopify.com/themes/minimal/styles/modern

このテーマをベースにカスタマイズしていきます。

とはいえ、各テーマの既存のコードは一切使わないので、どのテーマをベースにしても大丈夫だと思います。

商品データとコレクションの登録

まずは商品データとコレクションを管理画面上で登録します。

（商品データが無いと商品一覧ページには何も表示されないので）

サンプルコードを見たい方はこちら

勘違いしやすい単語なので、一応「コレクション」について解説しておきます。

「コレクション」とは商品のカテゴリーのことです。

ファッション系の場合だと「トップス」「ボトムス」など、食料品の場合では「肉」「魚介」「野菜」など商品の属する分類名がカテゴリーに該当します。

コレクションの登録

まずはコレクションを登録します。

管理画面から商品管理＞コレクションに移動します。

その後、コレクションを作成するボタンをクリックします。

以下のような画面に遷移します。

今回は必要最低限の情報を入力します。

「タイトル」にコレクションのタイトルを入力
「コレクションの種類」で「手動」を選択

その後、「検索結果のプレビュー」の「ウェブサイトのSEOを編集する」をクリックします。

上記のようなコンテンツが表示されます。

今回は「URLとハンドル」を設定します。

ここに表示されているURLは、コレクションごとの商品一覧ページのURLです。

https://domain/collections/コレクション名の形式で、デフォルトではタイトルに入力した内容が反映されます。

コレクション名を日本語で入力したら、こちらのURLも日本語になります。

URLに日本語が含まれるとよろしくないので、コレクション名を日本語で設定した場合は、「URLとハンドル」では英語に変換して修正しましょう。

コレクションの登録の解説は以上です。

コレクションは3つほど登録しておきましょう。

（商品登録の際に、いくつかコレクションを設定したいので）

商品の登録

コレクションの登録が終わったら、次に商品の登録を行います。

管理画面から商品管理＞すべての商品に移動します。

その後、商品を追加するボタンをクリックします。

以下のような画面に遷移します。

今回は以下の項目を設定します。

タイトル（商品名です）
説明（商品の説明文です）
メディア（複数の画像を設定できます）
価格設定＞価格
右サイドバーの「コレクション」（複数のコレクションを設定できます）

また、商品も先程のコレクションと同様、URLとハンドルを設定できるので、必要に応じて修正しましょう。

入力が終わったら、画面右上の「保存する」ボタンをクリックしてください。

以上で商品の登録の解説は終わりです。

商品は最低5件ほど、コレクションは全て同じにしないで商品ごとに変えて登録してください。

（商品Aと商品BにはコレクションY、商品Cと商品DにはコレクションZのようなイメージです）

「templates/collection.liquid」の編集

サンプルコード

templates/collection.liquidのファイルを開きます。

現在記述されているコードは削除、もしくはコメントアウトしてください。

.liquidファイルでのコメントアウト

コメントアウトは{% comment %}〜{% endcomment %}のように記述します。

その後、以下コードを貼り付けてください。

{% paginate collection.products by 3 %}

  <div class="cards">
    {% for product in collection.products %}
      <article class="cards__item">
        <a href="{{ product.url }}">
          <h3 class="cards__title">{{ product.title }}</h3>
          <p class="cards__price">¥{{ product.price | money_without_currency }}</p>
          <p class="cards__category">
            {% for collection in product.collections %}
              <span>・{{ collection.title }}</span>
            {% endfor %}
          </p>
          <p class="cards__images">
            {% for image in product.images limit: 2 %}
              <img src="{{ image.src | product_img_url: 'master' }}">
            {% endfor %}
          </p>
        </a>
      </article>
    {% endfor %}
  </div>

  <div class="pagination">
    {{ paginate | default_pagination: next: 'Next', previous: 'Prev' }}
  </div>

{% endpaginate %}

以上で作業は終わりなので、試しに以下のページを開いてください。

https://domain.com/collections/コレクション名

※domain.comとコレクション名の箇所は各々で変えてください

各コレクションの商品一覧が表示されたら成功です。

コードの解説

まず、コレクションページで使えるオブジェクトについて解説します。

コレクションページではcollectionオブジェクトが使えます。

collectionオブジェクトには、そのページのコレクションの情報があります。

コレクションの情報の中には、そのコレクションの名前や、属する商品の情報があります。

collectionオブジェクトは、このようなイメージです。

{
  "name": 'コレクション_A',
  "url": 'collection_a',
  "products": {
    "商品_A": {
      "title": '商品_A',
      "price": '220',
      "img": 'hoge.png',
      "url": 'products_a'
    },
    "商品_B": {
      "title": '商品_B',
      "price": '1730',
      "img": 'piyo.png',
      "url": 'products_b'
    }
  }
}

※あくまでも上記はイメージで、実際のオブジェクトの構造とは異なります

コレクションページでは、このcollectionオブジェクトの中のproductsプロパティを使用して商品の情報を出力します。

では、コードをひとつずつ解説していきます。

最初の行と最後の行の{% paginate %}

{% paginate collection.products by 3 %}
・
・
・
{% endpaginate %}

paginateとendpaginateで囲うことで、以下の処理が可能になります。

商品の表示件数を設定する
指定した表示件数以上の商品が存在する場合、ページャーを表示させる

現在はby 3と記述しているので、最大3件の商品が表示されます。

商品の一覧を繰り返す{% for %}

<div class="cards">
{% for product in collection.products %}
・
・
・
{% endfor %}
</div>

このforで商品の情報を繰り返しで出力しています。

collectionオブジェクトのcollection.productsを渡して、その情報を変数productに代入しています。

なので、productは別の変数名にしても大丈夫です。

出力される件数は、先程のpaginateで設定した件数になります。

このforの中で商品の名前や値段などのコードを記述していきます。

商品詳細のリンク：product.url

{{ product.url }}

商品詳細ページのリンクです。

商品のタイトル：product.title

{{ product.title }}

商品のタイトルです。

商品の値段：product.price

{{ product.price | money_without_currency }}

{{ product.price }}は、商品の値段の情報を持っています。

しかし、Shopify上で金額を表示する際は注意点があります。

{{ product.price }}のまま使用すると、思い通りの金額で表示されません。

なので、Shopify上で金額を表示する際は必ず金額フィルターを使用します。

金額フィルターを使用することで、Shopifyで設定した国の通貨単位に合わせた形式で金額を出力できます。

今回は{{ product.price | money_without_currency }}のような記述で金額を出力しています。

コレクション情報：product.collections

{% for collection in product.collections %}
  <span>・{{ collection.title }}</span>
{% endfor %}

コレクションは複数設定する場合があるので、forでproduct.collectionsに対して繰り返し処理をして、設定されている全てのコレクションを出力しています。

商品画像のURL：product.images

商品画像も複数設定する場合があるので、forを使っています。

{% for image in product.images limit: 2 %}
  <img src="{{ image.src | product_img_url: 'master' }}">
{% endfor %}

forの最後でlimit: 2を記述しており、この数値を変更することで、forの繰り返し回数を制御できます。

今回はlimit: 2で設定しているので、設定した画像が最大2枚まで表示されます。

画像のURLを出力する際に、product_img_urlフィルターを使うことで、画像サイズを制御できます。

{{ image.src | product_img_url: 'master' }}

'master'を指定すると、画像のオリジナルサイズのURLが返ってきます。

他にも、以下のような指定も可能です。

縦横のサイズを指定：'450x450'
横のみサイズを指定：'125x'
縦のみサイズを指定：'x500'

画像サイズに関しては公式ドキュメントのこちらのページでも解説されています。

ページャーを出力する{{ paginate }}

{{ paginate | default_pagination: next: 'Next', previous: 'Prev' }}

{% paginate %}の中で{{ paginate }}を記述することで、ページャーを出力できます。

{{ paginate }}を使うと、自動でHTMLが生成されます。

なので、自動で生成されたHTMLに合わせてCSSを設定する必要があります。

また、今回のサンプルコードのようにdefault_paginationフィルターを使うことで、ページャーの前後のリンクのテキストを変更することもできます。

paginateオブジェクトには、現在のページ位置の情報を持つpaginate.current_pageや、次のページのリンクの情報を持つpaginate.nextなどがあります。

これらを使うことで、オリジナルのページャーを作ることもできます。

こちらが公式ドキュメントのpaginateオブジェクトのページです。

表示する商品の順番を変える

デフォルトで表示する順番を変える

コレクションごとの商品一覧ページに表示される商品は順番を変えることができます。

管理画面から、商品管理＞コレクションを選択して、コレクションの編集画面へ移ります。

商品にコレクションを登録していると、その商品がコレクションの編集画面に表示されます。

この「並び替え」を変更することで、コレクション一覧ページに表示される商品を並び替えることができます。

URLで商品を並び替える

URLにパラメータを与えてアクセスすることで、商品を並び替えて表示することもできます。

この仕組みで、商品の並び替えのドロップダウンメニューを作ることもできます。

以下のようにパラメータを付けることで、商品を並び替えて表示できます。

https://domain/collections/コレクション名?sort_by=price-ascending

この場合、金額の安い順で商品が表示されます。

?sort_by=の後に並び替えたい種類を指定します。

price-ascendingは「金額の安い順」という意味です。

設定できる値は以下の通りです。

値	説明
manual	管理画面で手動で並び替えた順で表示される
best-selling	人気順（売れた個数順？）
title-ascending	あいうえお順（昇順）
title-descending	あいうえお順（降順）
price-ascending	値段が安い順
price-descending	値段が高い順
created-ascending	商品を登録した日時が新しい順
created-descending	商品を登録した日時が古い順