今回の記事では、ShopifyのLiquidについて解説していきます。
Shopifyについて調べていくとLiquidという言葉をよく見ると思います。
「よく聞く言葉だけど何のことか分からない」
そんな方も多いのではないでしょうか？
そんな方へ向けてLiquidについて、概要から分かりやすく解説していきますので、ぜひ最後までご覧ください。
ShopifyのLIquidとは
Shopifyの「Liquid」とは、Shopifyが独自に開発したテンプレート言語です。
Liquidは、HTMLの中にShopify特有の構文が混ざったもので、ECサイトの見た目を作成できます。
また、Shopify独自のタグや変数を使って、商品情報などの動的なデータをWebページに直接組み込める特徴があります。
Liquidを理解するには次に紹介する
Objets（オブジェクト）・Tags（タグ）・Filters（フィルター）を覚えておけば問題はないでしょう。
Objets（オブジェクト）とは
Objetsは、{{}}の中にオブジェクト・プロパティ・文字列を書くことで、中に出力したい文字を表示することができます。
例えば、{{product.title}}と書くとwebサイト上では商品タイトルが表示されます。
Tags（タグ）とは
Tagsは、{% %}で囲んで記述する繰り返しや条件分岐の記述のことです。 {% %}はロジックを示します。主に、for文やif文などがあり、Webサイト上には表示されないデータ内の処理になります。
例えば、{%assign hoge=’abc’%}と書くと変数hogeに対してabcの文字が格納されます。
Filters（フィルター）とは
Filterは、Objetsの出力内容を変更させる機能です。
書き方は {{ | }} というように中に縦棒で区切って記述します。
例：{{‘sale’|append:’.jpg’}}と入力すればsaleにjpgのタグがつきます。
Liquidを使用する際の注意点
Shopifyをカスタマイズする上でとても重要なLiquidですが、使用する際にいくつか注意事項があります。
ディレクトリ記載の間違い
Shopifyではディレクトリごとに役割が異なる仕様になります。
もし、Liquidファイルを作成してはいけないディレクトリに入れてしまうと、編集が上手くいかなかったり、不具合が起きたりします。
もし不具合が出たら、Liquidファイルが原因の可能性もあるので、不具合が出る前の操作を確認してみましょう。
各ディレクトリと役割は以下のようになっています。
| Layout | ほぼすべてのページで共通して使用され、サイト全体のレイアウト構造を記載した「theme.liduid」などが保存されている |
| Templates | ページ属性（article.json、cart.json）によって読み込まれるjsonファイルやページごとのLiquidファイルが保存されている |
| Sections | カスタマイズ画面のセクションパーツに関わるファイルであるLiquidファイルが保存されている |
| Snippets | セクションよりも詳細なアイテム要素が含まれるLiquidファイルが保存されている |
| Assets | JavaScriptやCSSが保存されており、画像ファイルを置くことも可能 |
| Config | サイト全体の設定などテーマ全体に関わるJavaScriptが保存されている |
| Locales | テーマで使う各言語についてのJavaScriptが保存されている |
アプリ利用によるLiquidファイルの増加
不要になったShopifyアプリをアンインストールした後も、Liquidファイルは残ったままになり、不具合の原因にもなります。
不要になったアプリをアンインストールした後は、それに関するLiquidファイルが残っていないかも確認すると良いでしょう。
まとめ
今回は、ShopifyのLiquidについてご紹介してきました。
特にObjets（オブジェクト）・Tags（タグ）・Filters（フィルター）はLiquidを理解する上でとても重要になりますので、理解を深めると良いでしょう。
Shopifyでは専門的な知識がなくても、誰でもECサイトを作ることができます。
しかし、自社ブランディングを強めたり、より顧客満足度を上げるストアにするにはオリジナルのカスタマイズが必要になってきます。
そんな時にLiquidを使えるようになるととても便利なので、この記事が少しでもお役に立てると嬉しいです。
