Shopifyの独自開発言語Liquidとは？基本的な使い方と注意点

Shopifyは誰でも簡単にハイクオリティなECサイトを作成できる非常に便利なサービスです。Shopifyを使えば、HTMLやCSS、Java scriptといったWebサイト構成に必要なプログラミング言語がわからなくても、デフォルトでサイトは作成が出来ます。
しかし開発言語を理解していたほうが、自社ブランドのイメージにあったサイトを作成可能です。

皆さんはHTMLやCSSなどのプログラミング言語がある中で、Shopifyが独自に開発した言語Liquidについてご存じでしょうか？

そこで今回はShopifyの開発言語である、Liquidの基本的な使い方と注意点を紹介していきます。

Shopifyの独自開発言語Liquidとは？

Liquidとは、Rubyで開発したテンプレート言語です。
HTMLファイルとデータの橋渡しをしてくれるおかげで、より表現の豊かなwebページを作成できます。

Shopifyでプログラミング言語を理解していたほうが良い理由は、応用が利くECサイトを作成できることで、売り出したい商品に合わせてサイトのイメージを変更も出来ます。

Liquidの基本的な使い方

Liquidを使用して開発をする際に覚えておいた方がいい書き方は3つで、Objets・Tags・Filtersを覚えておけば問題はないでしょう。

HTMLは静的コンテンツLiquidは動的コンテンツで記載され、テーマの幅も広がるところが嬉しいメリットです。

Object

{{}}の中にオブジェクト・プロパティ・文字列を書くことで、中に出力したい文字を表示することができます。

例えば{{product.title}}と書けばwebサイトでは商品タイトルが表示されます。

Tags

{% %}の中にif文やfor文、変数の定義というロジックを記述します。書き方はif～endifです。

なお{% %}はサイト上には表示されないで、データ内で処理されます。

例1
{%if 5>3%}
//処理したいコードを記入する
{%endif%}

このように条件を記載することで、条件分岐を実施することが可能です。

例2
{%assign hoge=’aaa’%}

このように入力すれば変数hogeに対してaaaの文字が格納されています。

ここで書く時の注意ですが、Javaではvarやconstと書くところをLiquidではassignと記述するので間違えないように気をつけましょう。

Filters

JavaやPHPの変数と関数を、組み合わせたものと考えれば良いでしょう。

オブジェクトの出力結果を変更する機能で、書き方は {{|}} というように中に縦棒で区切って記述します。

例：{{‘sale’|append:’.jpg’}}と入力すればsaleにjpgのタグがつきます。

Liquidを使用する際の注意点

自社ブランドに合ったサイトを作るために重宝するShopifyが開発したLiquid言語ですが、使用する際の注意点もあります。

これらを処理するのを忘れていて、気が付いたらサイトが重かったり不具合が出てしまう恐れも出てくるので、定期的に確認しましょう。

外部アプリ利用によるLiquidファイルの増加

外部アプリによっては、アンインストール後もLiquidファイルだけ残ってしまい、不具合の原因になります。アプリをアンインストールした際に、Liquidファイルが残っていないか確認をしましょう。

それかアプリにLiquodを編集する際には、バックアップを取ってから作業したほうが良いです。

バックアップの方法はShopifyの管理画面上から行え「テーマをカスタマイズ」から「アクション」をクリックすればファイルの複製が出来ます。

ディレクトリ記載の間違い

Shopifyではディレクトリごとに役割が異なるので、Liquidファイルを作成してはいけないディレクトリに入れてしまうと、編集がうまくいかなくなる恐れも出てきます。

もし不具合が出たら、Liquidファイルが原因の可能性もあるので調べてみましょう。

チェックアウト画面のカスタマイズは、Shopify Plusプランで編集

チェックアウト画面のカスタマイズは、Shopify Plusプラン以外のプランだと編集が出来ないデメリットもあります。Shopifyは比較的安いプランでもECサイトは作成可能ですが、使用できるサービスも高いプランのほうが多いです。

本気で世界にリピーター増加と売り上げ拡大を目指しているのなら、Shopify Plusにプラン変更をしてみてはいかがでしょうか。

まとめ

Shopifyが独自に開発した言語Liquidは、自社ブランドのイメージに合うECサイトを作成しやすく、テーマの幅もぐっと広がります。

上記でお伝えした通り、Liquid言語を使用するなら月額料金は最も高いShopify Plusプランのほうが、使いやすくその他受けられるサービスも多いため、自社商品の売上拡大や知名度もアップしやすくなるでしょう。

ShopifyでECサイトを作成しているのならば、さらに使い勝手をよくするためにLiquid言語を利用してはいかがでしょうか。

さらに詳しい情報は、Shopify公式ブログの「Shopifyのテンプレート言語 Liquidの概要」を読んでみてください。