Shopify（ショッピファイ）には、オリジナルの言語である「Liquid」と呼ばれる言語が存在します。このLiquidを用いてShopifyを自分の思った通りにカスタマイズ可能です。
しかし、Liquidがどのようなものかを知らない人もまだいるでしょう。そこで今回は、Shopifyの独自言語であるLiquidの基本について解説します。プログラミングスキルのある方は、今回の内容を参考にぜひShopifyストアをカスタマイズしてみてください。
Contents
Liquidの特徴
Liquidは、Shopifyの独自言語です。まずは、Liquidの特徴を解説します。ポイントは次の2点です。
- HTMLを直接記載できる
- テンプレート言語である
HTMLを直接記載できる
Liquidは、HTMLの文中にコードを直接書くことで処理や出力できます。そのため、本来はエンジニアが担当する部分もHTMLを直接記載でき、エンジニアを介することなくデザイナーだけでも構築可能です。
また、HTMLで記載できるとタグの色分けやハイライト表示が可能なので、文字数が多くても探したい文字をすぐに見つけられます。
テンプレート言語である
Liquidは、テンプレート言語と呼ばれます。これは、従来のプログラミング言語のように構文があり、アウトプット、ロジック、ループといったコンセプトがあり、変数を扱うからです。また、ほかのテンプレート言語同様、HTMLファイルとデータの橋渡しをします。これは、PHPのようなWeb中心の言語と似ています。
しかし、Liquidでもできないことはあり、他の言語と一緒とは言えません。プラットフォームの奥まで入れないので、経験豊富なプログラマーには、直感に反するように見える部分もあるでしょう。
Liquidの概要
では、次内容について詳しく解説するので、Liquidの概要を理解しましょう。
- コード構文
- ハンドル
- 演算子
- データ型
- オブジェクト
- タグ
- フィルター
コード構文
Shopifyストアにおいて、いつどこでアクセスしても毎回同じものが表示される静的な要素は、HTMLやCSS、Javascriptで作成されます。これは、一般的なWeb技術と同様です。
しかし、アクセスしたときの状況に応じて異なる内容が表示される動的な要素については、Liquidが利用されます。たとえば、データの出力は二重括弧（{{ }}）や、ロジックと制御フローは中括弧のパーセント区切り（{% %}）などです。そのため、Liquidが使われるのは、Shopifyストアの動的な要素と覚えておくと良いでしょう。
ハンドル
Shopifyのほとんどのオブジェクトには、handleがあります。handleは、Liquidオブジェクトのデータモデルにアクセスするために使用し、URLにも利用され同じ名前は使えません。
また、オブジェクトのデータモデルへのアクセスにもhandleが利用されます。
演算子
論理演算子や比較演算子の利用もでき、例として下記が挙げられます。プログラミング言語を使っている方には、お馴染みのものですね。
- ==：等しい
- !=： 等しくない
- >：より大きい
- <：未満 ・>=：以上
- <=：以下
- or：条件Aまたは条件B
- and：条件Aと条件B
データ型
StringやNumber、Booleanの変数を宣言できたり、NilやArray、EmptyDropなどの利用も可能です。
空白スペースは {{-, -}}や{%-, -%}で制御できます。プログラミングで使われるものなので、スキルのある方には問題ないでしょう。
オブジェクト
Liquidのオブジェクトには、さまざまなデータが含まれます。たとえば、商品のデータモデルであるproductオブジェクトには、商品のタイトルを出力するためのtitleという属性が含まれています。
タグ
タグは、テンプレートのロジックと制御フローを作成するために使い、中括弧のパーセント区切り {% %}で囲みます。forやcycleなどの特定のタグは、パラメーターを取ることが可能です。
そして、各パラメータの詳細は、それぞれのセクションに記載されます。
フィルター
フィルターは、数値、文字列、変数、およびオブジェクトの出力を変更するもので、出力タグ{{ }}内に配置され、パイプ文字|で示されます。
各ディレクトリの役割
テーマにもよりますが、Shopifyの管理画面上で「コードを編集する」をクリックすると、ディレクトリが次のように分かれています。それぞれがどのような役割を果たすディレクトリなのかについて紹介しましょう。
- assets
- config
- layout
- locales
- templates
- sections
- snipets
assets
assetsは、JavaScriptやCSS、pngやsngの画像やフォントを格納するディレクトリです。例としては、「theme.js」「theme.scss.Liquid」となります。既存テーマの場合、scss.Liquidファイルが格納されているのもassetsディレクトリです。
通常のscssファイルでは、Liquidを利用できません。しかし、scss.Liquidファイルならassetsディレクトリ内の画像にLiquidオブジェクトでアクセスできます。
なお、「scss.Liquid」の中に日本語でコメントを記載すると、コンパイルした際にエラーが起きるので注意が必要しましょう。
config
configは、サイト全体に関するJavaScriptを入れるためのディレクトリです。デフォルトでテーマ設定に関するjsonファイルが2点（「settings_schema.json」「settings_data.json」）格納されており、どちらもShopify管理画面から行うテーマカスタマイズと関連しています。
「settings_schema.json」は、テーマエディタから変更可能な内容を定義され、「settings_data.json」にはテーマエディタで設定された値が保存され、「settings_data.json」の値を変更すると、テーマエディタ上の設定も変更されます。
CSSが上手く機能していない場合は、Configをチェックすると良いでしょう。
layout
layoutは、すべてのページに使用される「theme.liduid」があり、テーマレイアウトの大枠を構築するディレクトリです。headやbodyタグに加え、サイト共通要素であるヘッダー、フッター、ナビゲーション、グローバル変数がレンダリングされたり、各ページ個別のレイアウトもtheme.Liquidに基づいて構成されます。
サイト全体に関わる修正はtheme.Liquidで行い、細かい要素については、個別のLiquidファイルに編集内容を記載しましょう。
locales
localesは、言語ごとの翻訳jsonファイルが格納されるディレクトリです。翻訳の定義と内容に関するディレクトリで、jsonファイル上で翻訳箇所を定義すると、管理画面の言語編集から修正可能です。
日本語のjsonファイルは「ja.json」ですが、言語に関しては、Shopify管理画面の「設定→ストアの言語→テーマ言語を編集する」でも設定できます。このとき、管理画面の修正内容がjsonファイルに上書きされるため、管理画面経由で修正したものをローカルの値で上書きしないように、運用ルールを設けましょう。
デフォルトで作成されるのはen.default.jsonファイルだけです。そのため、翻訳の定義を追加した段階で複製し、ja.jsonとして日本語の内容を追加してください。
templates
templatesは、ページ属性によって読み込まれるLiquidファイルが入っているディレクトリです。たとえば、「article.Liquid」はページテンプレートで、「blog.Liquid」はブログ記事のテンプレートと分かれています。
ブログやページについて、ここで新しいテンプレートを追加することで、管理画面上でオリジナルのページテンプレートを選択できます。また、新規でテンプレート作成も可能です。
sections
sectionsは、各ページのセクション用Liquidファイルが入っているディレクトリです。templatesがページの設計とすると、sectionsは共通パーツの設計となります。
フッターやヘッダーなど各ページで共通の要素が格納されており、layoutやtemplatesにsectionsディレクトリ内のLiquidファイルを記載すると、その内容が読み込まれ、sectionsで構築した内容はテーマエディタから編集・移動・追加が可能です。
なお、sectionsでさらにsectionsのファイルを読み込むとコンパイルエラーとなってしまうため注意してください。
snipets
snipetsは、sectionsより細かいアイテム単位のLiquidがあるディレクトリです。sectionsとの違いは、snipetsで構築したパーツはテーマエディタから編集ができないことが挙げられます。
そのため、テーマエディタから編集したい内容はsectionsで、そうでなければsnipetsと判断すると良いでしょう。
まとめ
Shopify（ショッピファイ）の独自言語であるLiquidの基本について解説しました。プログラミングスキルがある方なら、抵抗なく使えるでしょう。Shopifyは、カスタマイズ性に優れていることで知られていますが、Liquidを使えば、さらに自由度が高まります。
そのため、プログラミングのスキルがある方はコードの部分からのカスタマイズにもチャレンジしてみると良いでしょう。
Shopify Guide編集部は、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションをお考えの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
