ShopifyのLiquidとは？カスタマイズの幅が広がるEC運用者向け基礎知識

ShopifyでECサイトを運営している担当者の中には、ほかのストアと差別化するためにデザインなどをカスタマイズしたいと考える方もいると思います。
Shopifyのテンプレート言語であるLiquid（リキッド）を使えば、ある程度のカスタマイズをすることができますが、実際に何ができるのか？自分たちだけで対応できるのか？よくわからない方も多いでしょう。

この記事では、ShopifyのLiquidとはどのような言語なのかなど、ShopifyのECサイト運用者として知っておくべき基本知識をご紹介します。外注する場合、エンジニアとのやりとりもスムーズに進みますので、ぜひ参考にしてください。

→Shopify PlusパートナーのBiNDecが、貴社の「やりたい」を叶えます。ご相談はこちらから。

Shopifyのカスタマイズに使えるLiquidとは？

Shopifyは通常のウェブサイト構築に必要なHTMLやCSの知識がなくてもECサイト始めること自体は可能です。ですが、より高度なカスタマイズをしたい場合には専門的な知識が必要です。
そこで、活用していただきたいのがShopify独自の言語であるLiquidです。

ここでは、Shopifyのカスタマイズに使用するLiquidについて、説明していきます。

Liquidとは、より柔軟なECサイトを作るためのプログラミング言語

LiquidはShopifyストアの見た目のデザインや商品情報、カートに至るまで様々なページをカスタマイズする際に使用するプログラミング言語です。出力する内容を動的に変化させられるため、テンプレート言語とも言われます。

基本的にWebサイトはHTMLでレイアウトや定義づけなどの仕様を決め、CSSで色などデザイン面を記述しています。更新性の低いページならばそれでも十分ですが、ECサイトには商品情報など同様の構成（テンプレート）で複数ページを展開する項目が多く存在します。
HTMLやCSSだけでは一度決めたデータを途中で変更するにはなかなかに時間がかかりますが、Liquidを活用してテンプレートを構築することで、変化に強いECサイトを作ることが可能になります。

LiquidでできるShopifyのカスタマイズ範囲は？

Liquidを使うことで、Shopifyで作成したECサイトのデザインや機能性を高めることができます。例えばカートの挙動、商品情報や商品ページやコレクションページの表示内容です。
これらを直接HTMLに記述するのではなく、後述するオブジェクトからデータを受け取ったり、データの内容から表示内容を変更したりできるのです。

HTMLやCSSを知らなくても使えるの？

HTMLやCSSを知らないECサイトの担当者が、Liquidを使えるかとどうかというと難しいのも事実です。

「こんにちは」が英語で「hallo」だとわかっていれば挨拶はできますが、それで英会話ができるわけではないでしょう。つまり、希望通りのカスタマイズをするためには、最低限の知識が必要になります。
ただし、実際はECサイトを運営していく中で身につく知識もあります。

あとは、Webで調べるとサンプルコードも出てきますので、それらを参考にすればLiquidを利用することは可能でしょう。しかし、それはあくまで限定的な範囲なので、思い通りのカスタマイズをスムーズに行いたいのであれば専門知識を持つ人にお願いするのがおすすめです。

→Shopify PlusパートナーのBiNDecが、貴社の「やりたい」を叶えます。ご相談はこちらから。

Liquidを利用してできること

Liquidを使ってサイトのカスタマイズができることを説明しましたが、カスタマイズ以外には何ができるのでしょうか。ここでは、Liquidを利用してできることをご紹介します。

商品名を直接記述しないことで更新性が上がる

Liquidを使えばHTMLとデータを別に管理できるので、これまでHTMLに直接記述していた内容を後述するオブジェクトなどで代用できます。

▼HTMLのみ

<h3>トイレットペーパー</h3>

▼HTMLとliquid

<h3>{{ product.title }}</h3>

上記ように、「トイレットペーパー」と直に記述していた箇所を、Liquidのオブジェクトである「product.title」に書き換えます。
そうすると、product.titleに格納している「トイレットペーパー」読み込んで、HTMLのみと同じ見た目で動的な要素を作れるのです。

テンプレートを別サイトに流用できる

Liquidはテンプレート言語と呼ばれるだけあり、作成したLiquidファイルを利用して別のサイトにも流用できます。前項では商品名のproduct.titleを例にしましたが、サイト名やカテゴリ名なども同じ扱いができます。つまり、異なるデータを格納したオブジェクトを用意していれば、複数ストアの運営時などで流用できるのです。

→Shopify PlusパートナーのBiNDecが、貴社の「やりたい」を叶えます。ご相談はこちらから。

Liquidの基本的な知識と使い方

ここでは、Liquidの基本的な知識と使い方をご紹介します。Liquidは、基本的に「区切り文字」の中にオブジェクトやプロパティ、タグ、フィルターなどを記載して出力内容をコントロールします。区切り文字には、出力をコントロールする二重中括弧{{ }}やロジックをコントロールする中括弧とパーセンテージ{% %}があります。

完成形は、文章を読んだだけでわからない部分もあるかと思いますので、後述する使用例を参考にしてみてください。

Object(オブジェクト)は変数のこと

Liquidでオブジェクトは「変数」のことです。「product.title」であれば、「product」がオブジェクトになります。使い方としては、区切り文字「{{}}」の中に出力したいオブジェクトを記述することで、画面に文字を表示できます。

▼例：商品タイトルを表示

<h2>{{ product.title }}</h2>

プロパティは属性のこと

Liquidでプロパティは、変数などに入れる「属性」のことです。使い方としては、区切り文字「{{}}」の中に出力したいプロパティを記述することで、画面に文字を表示できます。「shop.name」であれば「name」がプロパティになります。
なおプロパティは属性ですので、輸送方法など複数のデータを持つプロパティも存在します。このように動的に変化するプロパティで記述できるのも、Liquidの魅力です。

▼例：店の名前を表示

<h2>{{ shop.name }}</h2>

Tags(タグ)はロジックのこと

Liquidでタグは、ロジックのことを指します。使い方としては、区切り文字「{% %}」の中に処理したいタグを記述することで、そのロジックを実行させます。Liquidのタグには、表示する条件を設定するタグや繰り返し表示するタグ、変数に値を代入したりするタグなどがあります。

▼例：6より3が小さい場合、処理コードを実行する

{%if 6>3%}
//処理コード
{%endif%}

Filters(フィルター)は出力結果を決めるもの

Liquidのフィルターを使えば、出力結果を決めることができます。使い方としては、区切り文字「{{|}} 」の中に縦棒で区切り、変更したい内容を記述します。

▼例：nameに拡張子の「.jpg」をつける

{{‘name’|append:’.jpg’}}

→Shopify PlusパートナーのBiNDecが、貴社の「やりたい」を叶えます。ご相談はこちらから。

Liquidの注意点

Liquidを使う場合には、いくつかの注意点があります。これらを知っておかないと、カスタマイズを始めてから「うまくいかない」と感じることもあるので、事前に理解しておくといいでしょう。

オフラインで動作確認ができない

Liquidで行ったカスタマイズは、オフラインで動作確認することができません。
カスタマイズしたテーマは、ターミナルから「shopify theme serve」コマンドを使えばオンライン環境にアップロードが可能です。アップロードしたテーマは、GoogleChromeを使って「http://127.0.0.1:9292」にて確認できます。ほかのブラウザでは確認できませんので、ご注意ください。

Liquidファイルの増加による不具合が起きる

Liquidファイルの増加などが原因で、不具合が起きることがあります。これは、外部のアプリケーションなどを利用した場合、Liquidファイルがアンインストール後も残ってしまうケースがあるからです。

Shopifyのディレクトリ構造を正しく理解する

Shopifyのディレクトリは、Shopify専用の構造になっています。そのため、ディレクトリに格納されているファイルを理解していないと、正しく使うことはできません。
特に、一部のディレクトリはLiquidファイルを格納できませんので注意が必要です。

チェックアウト画面のカスタマイズはShopify Plusプランでしかできない

チェックアウトの画面をカスタマイズしたい場合、「checkout.liquid」というチェックアウト用のファイルを使用します。ですが、この「checkout.liquid」は、Shopify Plus専用のファイルのため、通常のプランでは利用はもちろん、参照すらできません。

Shopify Plusと通常プランとの違いやPlus限定機能の活用事例を解説した記事もあります。ぜひ合わせてご覧ください。

Shopify Plusとは？通常プランとの違いやPlus限定機能の活用事例

Shopify Plusとは、取引量や外部データベースとの連携が多いECなどに特化した機能を備えたShopifyのプランです。通常のプランとの違いや活用事例を解説します。

→Shopify PlusパートナーのBiNDecが、貴社の「やりたい」を叶えます。ご相談はこちらから。

Liquidを使いこなすには？

Liquidを使用してECサイトをカスタマイズするのはとても魅力的ですよね。では、どうすればLiquidを使いこなせるのでしょうか。ここでは、Liquidを使いこなすために何が必要かをご紹介します。

HTMLやCSSを学習する

第一ステップとしては、コードの記述を意味を理解するための基礎知識として、HTMLやCSSを学習することをおすすめします。

以前と異なり、HTMLやCSSを直接記述することはほとんどなくなりましたが、やはり理解しているのに超したことはありません。例えLiquidを使用しなくても、ECサイトを運営していれば役に立つシーンがあるかも知れません。

ただし、自分で全てを理解する必要はありませんので、基本的な知識だけ知っておくだけでも、楽にことを進められる場面があると思います。

公式サイトや書籍で知識を得る

HTMLやCSSの基礎知識を学んだら、いよいよLiquidを学習していきましょう。学習方法は公式サイトや書籍などがあります。
公式サイトの中にはLiquidの仕様を分かりやすくまとめたチートシートもありますので、ぜひ参考にしてください。

また、書籍にはLiquidだけでなく、Shopifyを使ったECサイト運営について学習できる内容も多いのでおすすめです。
Shopifyの基礎的なカスタマイズの知識を学べる書籍もこちらでご紹介しています。ぜひ合わせてご覧ください。

[5分でわかる]D2Cを成功へ導くおすすめ書籍6冊、読むべきポイント　

メーカーやブランドが卸業者や販売店を介さず直接顧客へ販売するD2C（Direct to Consumer）と、それを実現する定番のECプラットフォームShopifyをより深く理解するためにおすすめの本を紹介します。

知見のある企業にアウトソースする

Liquidを簡単に使いこなすには、知見のある企業にアウトソースすることが最適です。HTMLやCSS、Liquidを学んで自分自身でECサイトをカスタマイズするのは、とても有意義なことです。ですが、それはECサイトの運営にとって絶対に必要なことではありません。

ストアの運営や販促施策を考えることがECサイトのコア業務ですから、HTMLやCSS、Liquidなどの学習は外注先エンジニアとの会話が成り立つ程度に留め、知見のある企業にアウトソーシングする方が担当者のリソースを有意義に使えます。何よりカスタマイズを素早く確実に実行することができます。

Liquidでのカスタマイズにお悩みなら、BiNDecにご相談ください

今回ご紹介したように、ShopifyのECサイトをカスタマイズする場合には、Liquidを使う方法があります。Liquidで作成したテンプレートは、複数ストアの運営に活用できるので、大変便利です。ですが、言語や仕組みなどを学習するには膨大なリソースが必要です。
もし、自社サイトのカスタマイズにお悩みでしたら、Shopify　PlusパートナーであるWEBLIFEのBiNDecにご相談ください。豊富な知見と実績で、御社に最適な提案をさせていただきます。
BiNDecのオンライン相談に申込む