【shopify】テーマをカスタマイズするためのLiquidの書き方

最近、ネット通販サービスとして名前を聞く事が増えてきた「shopify」について、
サイトのデザインをカスタマイズするにあたり何をすればいいのか、どのようなことができるのかを解説したいと思います。

はじめに

本記事では、過去にソースコードを直接編集してwebサイトのカスタマイズを行ったことがある方に向けて作成しています。
ソースコードの編集を行った事の無い方は、shopifyから提供されているカスタマイズ画面を使用して、サイトのカスタマイズを行う事をお勧めします。

Liquidについて

shopifyではLiquidという言語を使用してページの作成を行います。
言語と言っても、実際の使用感はPHPやテンプレートエンジンに近く、それらを触ったことのある方であれば、割とすんなり理解できると思います。

ファイル構成

まず、shopifyのサイトに使われているファイル構成を確認したいと思います。
管理画面のメニューより「テーマ」を選択し「アクション」→「コードを編集する」を選択します。

すると、フォルダ分けされたファイルの一覧が表示されるので、この画面より各ファイルを編集していくことになります。

フォルダ毎のファイル種別

• Layout

ページを構成する一番ベースとなるファイルです。
「theme.liquid」を開いてみると、headタグやbodyタグが記述されている事がわかります。
Mainタグの中に{{content_for_layout}}という記述があり、別ファイルで記述した各ページの内容がこの部分に反映されます。

• Template

各ページごとの大枠のファイルです。
Blog、cart、product等、それぞれの機能に対してのファイルが設置されています。
Templateから、次に説明するSectionsのパーツを呼び出しページを作成します。

• Sections

商品一覧やお知らせなど、ページを構成するパーツです。

• Snippets

アイコンや商品の値段など、Sectionsから更に細分化されたパーツです。

Liquidで使用される記述方法

Liquidでは変数やロジックをHTMLの中に埋め込んで記述していきます。
基本的に、出力を伴わないロジックの記述は{% 〜 %}で囲んで記述し、画面に出力する場合は{{ 〜 }}で囲みます。
では、実際どのような物があるか以下の紹介します。

タグ

プログラム的なロジックの記述を、Liquidではタグと呼びます
以下によく使いそうなタグを紹介します。

• 変数

Liquidで変数を使う場合はassignを使用します。

{% assign item_name = ‘商品その１’ %}
この商品は{{ item_name }}です。

このように記述することで、変数への代入、変数の中身の表示を行います。

• 繰り返し

繰り返し処理はfor文を使いますが、動きのイメージとしてはforeachの方が近いです。

{% for in collection.products %}
{{ product.title }}
{% endfor %}

この例では、商品名の一覧が表示されます。
「collection.products」は後ほど説明するオブジェクトと呼ばれるもので、ページに表示される商品の一覧が格納されてます。

• 分岐

分岐処理にはif文を使用します。

{% if product.price > 100 %}
100円より高いです。
{% else %}
100円以下です。
{% endif %}

もちろんelseifも使用することができます。

• コメント

コメントを記述する場合は、commentで囲むことで画面に出力されないようになります。

{% comment %}
これはコメントです。
{% endcomment %}

オブジェクト

先に紹介した「collection.products」のように、Liquidでは様々なオブジェクトと呼ばれるものが提供されています。
これらは、各ページで使われるグローバル変数のようなものだとイメージしやすいかと思います。
例えば、商品ページにて

{{ product.title }}

と記述すればそのページで表示される商品の商品名が表示されます。

また同じように

{{ shop.url }}

と記述知ればサイトのURLが表示されます。

フィルタ

フィルタとは、オブジェクトや変数の中身を加工して出力する機能です。

• 日付のフィルタ

日付のフォーマットを指定して表示します。

{{ product.published_at | date: “%Y/%m/%d" }}

この場合商品の登録日が「年/月/日」の形式で表示されます。

• ページャ表示フィルタ

{{ paginate | default_pagination }}

このように記述することで以下のHTMLが出力されます。

<span class="page current">1</span>
<span class="page"><a href="/collections/all?page=2" title="">2</a></span>
<span class="page"><a href="/collections/all?page=3" title="">3</a></span>
<span class="deco">…</span>
<span class="page"><a href="/collections/all?page=17" title="">10</a></span>
<span class="next"><a href="/collections/all?page=2" title="">Next »</a></span>

このように、Liquidではタグ、オブジェクト、フィルタを使用してページの作成を行っていきます。
今回紹介したものはそれぞれのほんの一部ですが、下記のページに使用できるものは全て載っていますので、一度目を通して置くと、実際のカスタマイズの際に役に立つと思います。

https://www.shopify.com/partners/shopify-cheat-sheet

まとめ

今回は、shopifyでテーマのカスタマイズをする際に、コードを直接触ってカスタマイズする方法を紹介しました。
これらの情報はまだ入り口に過ぎませんので、より一層shopifyのカスタマイズに触れ、今後は応用的な内容もご紹介できたらと思っています。