ShopifyのLiquid言語の概要と始め方！注意点も解説

Shopifyの高度なカスタマイズに必要となるテンプレート言語「Liquid」について、自社で対応可能かどうか分からずお困りではないでしょうか。

本記事では、Liquidの概要と使いこなすために求められる知識を整理し、どの程度の技術レベルが必要かを解説します。また、開発の始め方と注意点もまとめました。自社でLiquidを使ったカスタマイズが困難な場合に、対応を依頼できるおすすめのフリーランスも紹介していますので、ぜひ参考にしてください。

Shopifyのテンプレート言語Liquidとは

Liquid（リキッド）とは、ShopifyのCEOであるTobias Lütke氏が開発したテンプレート言語です。プログラミング言語と同じく構文やロジックを記述でき、Shopifyはもちろん、他のソフトウェアなどにも導入されています。

Liquidは、HTMLで記述する静的なレイアウトに動的なデータを流し込む、いわばHTMLとデータの「橋渡し役」の役割を担います。Liquidを利用するメリットは、主に以下の通りです。

• レイアウトの仕様（HTMLファイル）とデータの別管理が可能
• Shopifyの高度なカスタマイズにより独自性の高いサイトデザインが可能

言語仕様などから考えて、Liquidをすぐに使いこなすには、以下のITスキルを身に付けていることが望ましいと言えます。

• HTML/CSSなどのマークアップ言語
• JavaScriptなど基本的なプログラミングの知識

HTMLやプログラミングの知識の知識がない人は、上記の勉強をひと通り済ませてからLiquidを学習すると理解しやすくなります。Liquidの基本的な言語仕様については、以降で分かりやすく解説します。

ファイルの拡張子とLiquidの特有の基本的な区切り文字2種

Liquidを記述したファイルの拡張子は「.liquid」です。例えば、商品詳細画面なら「item.liquid」などとなります。ファイルの中身は、HTMLのレイアウト情報にLiquidの構文で書かれた動的な部分を追記した状態です。

Liquidの構文は、2種類の区切り文字で記載します。以下の表に区切り文字の概要とコード例を示します。

{{ }}で囲まれた部分には、出力したいデータを指定します。{% %}で囲まれた部分には、ループ処理などのロジックを記載します。上記のコード例で、Liquid独特の構文についてご確認ください。

オブジェクトとプロパティの基本

Liquidでいうオブジェクトとは、データの入れ物である「変数」です。shopというオブジェクトには、nameなどさまざまなプロパティがあります。プロパティとは「属性」のことで、shopオブジェクトには、Shopifyの管理画面で設定したショップの情報がすべて格納されている状態です。shopオブジェクトに設定されているプロパティは「shop.name」のように、ドットの右側に記載します。

shop.nameは、ショップ名でプロパティのデータは1つですが、shop.enabled_payment_types（利用できる支払方法）のように、複数のデータを保持するプロパティもあります。

タグを使用してロジックを記載

タグとは、{% %}内に記載するifやforなどのことを指します。以下は、forおよびendforタグを使用したコード例（再掲）です。

1行目と3行目は、ループ処理のロジックです。product.imagesの要素数分ループ処理を行います。2行目は、srcの属性は、データ出力の区切り文字{{ }}で記載しています。

フィルターを使用して出力を制御

フィルターとは、データ出力の区切り文字{{ }}内で利用し、出力内容を制御できる構文です。「 | 」の左辺には操作対象のデータを配置し、右辺にはフィルターを記載します。例えば「{{ ‘now’t | date: ‘%d %B %Y’ }}}」と記載すると、記事の公開日を「%d %B %Y」というフォーマットに成形して出力します。

フィルターは複数個繋げて記載することも可能です。複数個記載したフィルターは、左側から右側へ順番に処理されます。フィルターを使いこなすことで、ロジックを記載する量が少なくなるためShopifyのテーマをカスタマイズする担当者の負荷が軽減できます。

またランサーズには、Shopify構築について知見の深いShopifyエキスパート多数在籍。
ECサイト構築や運用サポートを1.1万円（税込）から依頼できます。
Shopifyの実装方法やエラーなどでお困りの際は、ぜひご活用ください！

Liquidを使ってShopifyをカスタマイズする方法

実際にLiquidを使ってShopifyをカスタマイズする方法は、オンラインとローカル環境の2パターンあります。それぞれの始め方について、順番に解説します。

Shopifyの管理画面上からの開発開始方法

Shopifyの管理画面を開き、「テーマをカスタマイズする」ボタンをクリックしてください。

すると「現在のテーマ」画面が表示されます。テーマの右上に表示される「アクション」プルダウンから「コードを編集」を選択してください。

コード編集画面が開き、自由にファイルを編集できます。

左側のツリー表示から、ディレクトリの下にあるファイルをダブルクリックすると、ストアのLiquidファイルを編集できるようになります。

ローカル環境での開発環境構築方法

ローカル環境でShopifyをカスタマイズするには、Shopifyの提供ツール「Shopify CLI」をインストールして利用します。CLIとはコマンドラインインターフェースの略で、ターミナル画面からコマンドを入力して操作するツールです。Shopify CLIインストール前の準備は以下の通りです。

1. RubyInstallersを利用して、ローカルマシン用のRubyおよびRuby開発キット2.7以上のバージョンをインストールします。
2. Gitをインストールします。
3. 開発したいストアを作成します。ストアの所有者となり、テーマの管理権限がある状態です。
4. 作成したストアのURLを書き留めておきます。

前準備が完了したら、公式サイトに従いShopify CLI をインストールします。インストール終了したら、ターミナルを立ち上げて開発ストアにログインしてください。

新しいテーマを作成するコマンドおよび既存のテーマを利用するコマンドは以下の通りです。

ここまでで、ローカル環境にテーマの開発環境を作成できます。テーマのテストデータ入力や作成・修正したテーマをリモートに反映する方法などは、公式サイトのマニュアルをご参照ください。

またランサーズには、Shopify構築について知見の深いShopifyエキスパート多数在籍。
ECサイト構築や運用サポートを1.1万円（税込）から依頼できます。
Shopifyの実装方法やエラーなどでお困りの際は、ぜひご活用ください！

Liquidを使ってShopifyのカスタマイズ開発を進める際の注意点3つ

Liquidを使ってShopifyのカスタマイズ開発を進める際には、いくつか注意したいポイントがあります。どのような点に注意すべきか、順番に解説します。

1. オフラインでの動作確認は不能
2. ディレクトリ構造が特殊なためミスに要注意
3. 契約プランによってカスタマイズできないケースがある

1. オフラインでの動作確認は不能

Liquidを使ってShopifyのテーマをカスタマイズした後、動作確認するにはオンラインへのアクセスが不可欠です。オフラインのままでは動作確認ができない点にご注意ください。

ローカル環境のテーマファイルは、ターミナルより「shopify theme serve」コマンドを使うとオンラインの環境にアップロードできます。アップロードファイルは「http://127.0.0.1:9292」に反映され、動作か確認が可能となります。なお、プレビューに対応しているWebブラウザはGoogleChromeのみです。

2. ディレクトリ構造が特殊なためミスに要注意

Shopifyのコード編集画面で表示されるディレクトリ構造は、Shopify独自仕様で、各ディレクトリにどのようなファイルが格納されているかを把握する必要があります。各ディレクトリの内容は以下の通りです。

ディレクトリによってはLiquidファイルを格納しないものもありますが、ミスで格納するべきディレクトリを間違えると動作に問題が出る可能性があります。Shopify CLIや管理画面上から編集していれば格納ディレクトリを間違えることはそうありませんが、念のためご注意ください。

3. 契約プランによってカスタマイズできないケースがある

Shopifyの最上位料金プラン「Shopify Plusプラン」を選ばなければ、チェックアウト画面のカスタマイズはできません。チェックアウト用のファイルはcheckout.liquidですが、Shopify Plusプラン以外では参照できなくなっています。Shopify Plusプランは月額2,000米ドルと高額のため、費用対効果を検討してプランを選択するようご検討ください。

LiquidでのShopifyカスタマイズ開発に役立つ情報集

Liquidを独学で学びたいという方におすすめの情報を、以下の3項目にまとめました。

1. 公式サイトのリファレンス・ガイド・サンプルコード
2. 言語仕様を分かりやすくまとめたチートシート
3. Liquid学習に役立つ書籍

公式サイトのリファレンスやチートシートは、コーディングを進める上で必須の情報なので、ぜひご活用ください。

1. 公式サイトのリファレンス・ガイド・サンプルコード

Shopify公式サイトのリファレンスやガイドなど、初心者から上級者まで活用できるサイトは以下の通りです。

1. Liquidのリファレンス（英語）
2. Shopify｜Liquidリファレンス和訳大全（日本語）
3. Shopifyブログ（日本語）
4. Liquidのサンプルコード（英語）

これらのサイトは、開発中に何度も確認することになるため、ブックマーク推奨です。

2. 言語仕様を分かりやすくまとめたチートシート

チートシートとは、Liquidの言語仕様を分かりやすく図にまとめたWebページです。構成要素は以下の通りです。

直感的に調べたい単語を探しやすいですが、2022年1月現在日本語訳はありません。それでも便利な資料なので、チートシートへのブックマークをおすすめします。

3. Liquid学習に役立つ書籍

書籍を手元に置いて学びたいという方のために、Shopifyの運用やLiquid学習などに適した書籍をご紹介いたします。

初心者がまず読むなら、1冊目がおすすめです。Shopifyによるネットショップ制作・運営の基礎が理解できます。特にLiquidの学習に役立てたい場合は『Shopifyではじめるネットショップ』が適しています。

またランサーズには、Shopify構築について知見の深いShopifyエキスパート多数在籍。
ECサイト構築や運用サポートを1.1万円（税込）から依頼できます。
Shopifyの実装方法やエラーなどでお困りの際は、ぜひご活用ください！

Shopifyのカスタマイズならおまかせ！Liquidを使えるフリーランスを紹介

Liquidを使ったShopifyのカスタマイズ対応が自社では難しい場合は、LiquidやShopifyに詳しいフリーランスにカスタマイズを依頼するのもひとつの解決方法です。ランサーズに在籍しているフリーランスのエンジニアから、実績があり評価も高い3名をご紹介します。

村田 響介さん｜Liquidを駆使した複雑なカスタマイズにも対応

村田さんは、Shopify専門でECサイト開発やカスタマイズを請け負うフリーランスのエンジニアです。Liquidを使いこなし、複雑なカスタマイズにも対応できる技術力があり、多くの実績を挙げています。他ECサイトからShopifyへの引越しも対応可能です。

村田 響介さんのプロフィールページを確認

藤本 英樹さん｜Shopifyでの自社ECサイト構築・機能追加が得意

藤本さんは、Shopifyを使った自社ECサイトの構築や、機能の追加カスタマイズに対応するエンジニアです。対面やオンラインでの打ち合わせも可能なので、直に相談したいという方にもおすすめです。構築だけでなく、1ヶ月間の運用サポートメニューもあるので、運用開始に不安のある方は相談してみてください。

藤本 英樹さんのプロフィールページを確認

岸本 健治さん｜カスタマイズからフルパッケージまで柔軟に対応

岸本さんは、Shopify専門のフリーランスエンジニアです。Liquidのコーディングやアプリ連携なども得意としています。料金プランは、お手軽な改修プランから、オリジナルのカスタマイズプラン、ECサイトの構築・改修のフル対応まで段階別なので、自社の状況にあわせて選びやすい点がおすすめポイントです。

岸本 健治さんのプロフィールページを確認

ShopifyのLiquidを自社で扱えない場合はフリーランスの活用もご検討を

Shopifyで採用されているテンプレート言語「Liquid」について、基本的な言語仕様や開発の始め方などを解説しました。ロジックを書く点やオブジェクトなどの概念があるため、やはり基本的なプログラミング言語やHTMLなどのマークアップ言語の知識があると学習しやすいと言えます。

自社の担当者ではLiquidを使うのは困難だと判断される場合は、フリーランスのエンジニアにカスタマイズを依頼するのもひとつの方法です。フリーランスに仕事を依頼することで、スピーディな対応や明確な価格設定、過去の実績など、フリーランスならではのメリットを活かした対応が期待できます。

本記事の内容を足がかりに、Shopifyのカスタマイズを成功させて、売上アップに繋げてくださいね。