Shopifyのページをカスタマイズする

Shopifyのページに検索フォームを設置して、ページ遷移無しで絞り込みを行いたかったので、ページをカスタマイズする方法を調べました。

こちらの公式ドキュメントを参考に実装しました。

Shopifyのページを構成する要素

• Pages（単体のページ）
• Layout（レイアウトのデフォルトはtheme.liquid）
• Template（Page毎に指定するテンプレート）
• Section（再利用可能なモジュール）
• Snippet（スニペット）
• Asset（画像、CSS、Javascriptのアセット）
• Config（設定）
• Locale（言語）

Shopifyのページは、Shopify製のテンプレートエンジンLiquidを使用します。

Shopifyの商品情報を取得する

コレクションの取得

colletionsでコレクションが取得できます。

{% for collection in collections %}
  {{ collection }}
{% endfor %}

商品の取得

collections.all.productsで全ての商品が取得できます。

{% for product in collections.all.products %}
  {{ product }}
{% endfor %}

タグの取得

collections.all.tagsで全てのタグが取得できます。

{% for tag in collections.all.tags %}
  {{ tag }}
{% endfor %}

商品を絞り込む

あとは、検索フォームを設置して、Javascriptでゴリゴリ書いていく感じになります。