こんにちは。中川瞬(@buppan_system)です。 ShopifyのLiquidについて知りたいという方のために、ShopifyのLiquid機能と使い方、注意点について解説をします。 この記事を読むことで、

この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

それでは、ShopifyのLiquidについて解説していきます。

Shopifyのメリットの一つは、ストアの機能やデザインをカスタマイズできることです。 とくにプログラミング言語を理解できれば、高い機能を備えることもできます。 カスタマイズをする際のShopifyで特徴的なものが、Liquidです。

Shopifyで使われているLiquidとは？

Shopifyの使い方を見ていると、Liquidという言葉をよく見かけるでしょう。 とくにカスタマイズに関する記事を読んでいると、必ずといっていいほど登場する言葉です。 クエリの結果に伴いURLを構築したり、ユーザーの選択によってクエリ対象のデータベーステーブルを修正・変更したりできます。 LiquidはShopifyの特徴的なものです。 ShopifyのLiquidとはどういったものか、どのような働きをするのか、Liquidの概要について解説します。

Shopifyで用いられるテンプレート

LiquidはShopifyで用いられるテンプレートです。 Shopifyの中ではプログラミング言語のようにテンプレート言語と呼ばれたり、テンプレートエンジンなどと言われることもあり、HTMLファイルとデータをつなぐ働きをしています。 もともとはShopifyのCEOによって開発された仕組みで、現在ではGitHubのオープンソースプロジェクトとして公開され、Shopifyだけでなく多くの企業でも使われています。 プログラミング言語やコード編集などの知識がないと難しい作業も、Shopifyではこのテンプレートを利用することで便利で美しいサイトを作成することが可能です。 つまり、ShopifyでLiquidを利用すればより便利で高い機能を得られるというわけです。

静的コンテンツと動的コンテンツの組み合わせが可能

Liquidは静的コンテンツと動的コンテンツの組み合わせが可能です。 通常、指示された数値などに応じた内容やその後の処理は変化せずサーバを通して送信されるのが静的コンテンツ、指示された内容に応じてその後処理が変化するものが動的コンテンツとして分けられています。 Liquidは複数のページで同様の静的コンテンツと、変化をしていく動的コンテンツを組み合わせたページを構築することができます。 Liquidは静的コンテンツのページに、動的コンテンツであるデータを埋め込むことができるということです。 仕組みとしては、静的コンテンツがHTMLで記載され、動的コンテンツはLiquidで記載されることで、コードがコンパイルされ送信されると、テーマのデータによってLiquidが置き換えられます。

Liquidは他のプログラミング言語と似ている

Liquidはほかのプログラミング言語と似ていると言われています。 理由としては、一般的なプログラミング言語のように構文を持ち、変数を扱うためです。 Liquidはアウトプット、ロジック、ループといったコンセプトもあります。 Webのプログラミング言語として知られるPHPとも似ています。

ShopifyのLiquidは変数や構文を扱う

Liquidはプログラミング言語のように変数や構文を扱います。 しかし、すべてがプログラミング言語と同じではありません。 HTML上ではRubyの構文が使えないなど、設計上Liquidではできないこともあります。 たとえば、ステートの概念がなくプラットフォームの奥まで入れないなど、ストレスを感じることもあるでしょう。 とくに、HTMLなどの知識がある人にとっては不都合を感じる部分もあるかもしれません。 ただしLiquidは、HTMLの文中にコードを直接書くことで処理が可能です。 そのため、コードさえ書ければエンジニアのヘルプがなくてもページを構築することができます。

Shopifyで用いられるLiquidの基本的な使い方

LiquidはShopifyの特徴的なテンプレート言語であり、馴染みのない人も多いでしょう。 一般的なプログラミング言語のJavaScriptやPHPなどは理解していて使い方もわかるという人でも、Liquidに関しては知らない・わからない、ということもあると思います。 しかし、Shopifyでサイト構築をするならLiquidを理解しておいた方が便利です。 ここでは、Shopifyの中でLiquidをどう用いるのか、基本的な使い方を解説します。

主にHTMLファイルで使う

LiquidはRubyを元に構築された言語ですが、前述したようにRubyの構文は使えません。 ShopifyはHTML、CSS、JavaScript、Liquidで作成されていますが、Liquidは主にHTMLファイルで使用します。 Liquidの具体的な使い方について解説します。

Liquidの区切り文字

Liquidのファイル拡張子は、「.liquid」です。 ファイルは標準HTMLとliquid構文が組み合わさってできています。 そのため、テンプレートファイルを使用する際にHTMLと間違うことはないでしょう。 また、Liquidは{{〇〇}}（アウトプットを示す）と{％〇〇％}（ロジックを示す）といった区切り文字で示されます。 Liquidはこの2つのどちらかによって始まるので、わかりやすいと思います。 また、この区切り文字をプレースホルダーとして考えることも可能です。 プレースホルダーはコードとして読むことは可能ですが、ブラウザに送信されるときはデータに変換されます。 Liquidテンプレートは、PHPとHTMLを結ぶテンプレートの役割を果たしています。

{{〇〇}}（アウトプット）

Liquidの使い方の一つが、{{〇〇}}です。 〇〇の中に、Shopifyで決められている「オブジェクト」、「オブジェクトのプロパティ」、「文字列」を記載できます。 主に使われるのは、商品名や金額、カテゴリーなどです。 〇〇の中に記載された部分は、サイト上では変換されたものが表示されます。 たとえば、「{{product.title}}」がレンダリングされると、「商品名」となります。 また、{{‘〇〇‘}}とクォーテーションを使うことで、文字列として扱うことも可能です。

{％○○％}（ロジック・ループ）

ロジックを使いたいときは、{％〇〇％}を使います。 ここで言うロジックとは、if文・for文・変数 の定義を指します。 これはサイト上で出力されることはありません。

I（フィルター）

数値や文字列・変数・オブジェクトアウトプットを変更できるフィルターは、ひとつのアウトプットに対して複数のフィルターを使用できます。 フィルターを使うと、フィルターの右に書いたLiquidオブジェクトの修正や追加ができます。 フィルターは{{〇〇}}の中で「{{〇〇｜フィルター}}」のように『｜』で区切り、記載してください。 フィルターを複数使用した場合は、右から読み込まれます。

Liquidの変数の定義

Liquidステートメントは、変数・フィルタ・タグ を使用して作成しますが、変数には使用する情報を入れます。 Liquid変数は使用するフィールドに基づいていて、値はほかのフィールドにも対応していますが、値を変更する際にはフィルタやタグを使います。 その際の変数の定義は「assign」を使って記載してください。

Shopifyで用いられるLiquidのフィルター機能

ShopifyのLiquidのフィルター機能は８種類あり、さまざまな処理を行うことができます。 ここではLiquidのフィルター機能と、８種類それぞれの特徴を紹介します。

フィルター機能とは？

まず、フィルターとはオブジェクトの出力結果を修正する機能です。 前述したように、「{{〇〇｜フィルター}}」のように『｜』で区切って使用します。 フィルターはURLに対してHTMLタグとして出力させることができたり、スクリプトタグのようにスタイルシートの読み込みタグを出力することも可能です。 さらに、moneyでフィルターすると管理画面において設定した通貨をフィルタリングすることもできます。 実際に表示すると、『{{1000｜money}}→￥100（日本円の場合）』です。 また、HTMLタグの文字をエスケープしたり、日付のフォーマットの変更ができたり、リンクの指定ができたりもします。

フィルターの種類

上記の通り、フィルターはさまざまな処理を行うことができる機能です。 ここからはLiquidの8種類のフィルターについて、それぞれの特徴を解説していきます。

Array filters

配列を操作するフィルターで、任意の要素を出力することも可能です。 配列の結合をしたり並べ替えたりすることができる種類で、Array filtersでJavaScriptやPHPの配列操作をするのと似ています。 Array filtersには種類があります。 一部を紹介しましょう。 • join：パラメータとして区切り文字を渡し、配列の要素を結合して単一の文字列にします。 • first：最初の配列の要素を出力するものです。 • last：最後の配列の要素を出力するものです。 • index：任意の要素を番号で指定します。 • sort：配列の要素を任意の条件で並び変えるものです。

Color filters

カラーコードに関連する操作に使用するフィルターです。 RGBをHSLに変換したりできます。

HTML filters

HTMLタグを操作できます。 imgタグやaタグ、Shopifyのテンプレートタグ等を生成できます。 HTML filtersには次のような種類があります。 一部を紹介しましょう。 • img_tag：パスやファイル名→imgタグとして出力できます。 • script_tag：パスやファイル名→scriptタグとして出力できます。 • stylesheet_tag：パスやファイル名→linkタグをして出力できます。 • time_tag：日時とフォーマット形式→timeタグとして出力できます。

Math filters

四則演算や比較、四捨五入など数値の計算を操作できるフィルターです。

Money filters

金額の出力を操作するためのフィルターです。 Shopify上の言語に合わせた単位で金額が出力できます。 金額を正しく表示するため、Shopify上では必ず必要になるフィルターです。 このフィルターを使用しないと、正常に表示できない場合があるので注意しましょう。

String filters

文字列の結合や削除・検索など、文字列を操作するフィルターです。 String filtersには次のような種類があります。 一部を紹介しましょう。 • append：結合されたい文字列→オブジェクトと結合できます。 • escape：オブジェクトエスケープできます。 • remove：削除したい文字列→オブジェクトから指示された文字列を削除できます。

URL filters

サイトのURLを生成するフィルターです。 URL filtersには次のような種類があります。 一部を紹介しましょう。 • asset_url：テーマの「assets」フォルダーのURLを返すことができます。 • link_to：aタグを生成しhreなどの設定ができます。

Additional filters

日付や特定のフォーマットの設定、変換などができます。

ShopifyのLiquidは7つのディレクトリに分かれている

Shopifyのテーマによっては、管理画面から「コードを編集する」を選択すると７つのディレクトリがフォルダ分けされて表示されます。 それぞれのフォルダの中にはさまざまなファイル.liquidがありますので、ここからはそれぞれのディレクトリの役割について解説します。

Layout

Layoutのフォルダに入っているのが、thema.liquidです。 サイトのベースとなるディレクトリで、thema.liquidはすべてのページに使用されるファイルです。 テーマによって異なりますが、主に、や、サイトの共通ヘッダー、サイトの共通フッターなどのコードが記載されています。 index.htmlやindex.phoのように、サイト全体にHTMLが適用されるととらえるとわかりやすいでしょう。

Templates

article.liquid、cart.liquidのようにページ属性によって読み込まれるディレクトリで、実際に表示されるページがまとまったフォルダです。 各ページのテンプレートが入っていて、例えば『article.liquid』はページのテンプレート、『blog.liquid』はブログ記事のテンプレートを表します。 ほかにも、 • index.liquid→トップページ • product.liquid→商品の詳細 • collection.liquid→コレクションのページ • search.liquid→検索結果のページ • cart.liquid→カート内の一覧ページ • page.liquid→固定ページ といった感じです。 ページやブログページにおいて、新しくテンプレートを追加すれば、管理画面上でオリジナルのページテンプレートを選択できるようになります。

Sections

『header.liquid』や『footer.liquid』のように、それぞれのページのセクションごとに使用されるLiquidがあるディレクトリです。 sectionsには各テンプレートで使用する共通パーツが格納されています。 このセクションは自分で作成でき、さらにブロックを入れ替えることも可能です。

Snippets

snippetsはsectionsと同じような働きをするものですが、sectionsよりもさらに小さいパーパーツです。 sectionsとは違い、Shopifyの管理画面からカスタマイズができません。 『{% include ‘〇〇’ %}』と記載すれば、Snippets内のLiquidファイルが読み込まれます。

Assets

JavaScriptやCSSが入っているディレクトリです。 さらに、pngやsngの画像ファイルも格納することができます。

Config

Shopify全体に関する設定ファイルのディレクトリです。 『settings_data.json』と『settimgs_schema.json』の2つがあります。 新規で追加したページやセクションは『settings_data.json』に記述され、管理画面で編集する構造にするには、このファイルを編集します。 settimgs_schema.jsonは、テーマの言語や文言を設定するものです。 オリジナルテーマを開発し、公開する場合にこのファイルを編集します。

Locales

テーマにおける言語ごとのjavaScriptが入っているディレクトリです。 サイトで共通して使う「購入」や「ありがとうございます」などを編集できます。 文言については管理画面（設定→ストアの言語→テーマ言語を編集する）からも編集できますが、内容の上書きには注意しましょう。

ShopifyでLiquidを使用する際の注意点

ShopifyのLiquidは、専門知識がないと思うようにカスタマイズすることはできませんが、知識がある人でもLiquidの特性については学ぶ必要があります。 ほかのプログラミング言語とは異なる点があるからです。 たとえばLiquidとは何か？という解説を読むと、Rybyがベースとなっていると記載されています。 ただし、HTML内でRubyの構文を使うことはできません。 Liquidnには特徴的な構文があるため、特徴を把握して使う必要があります。 とはいえ、方法は決して難しくないのでコツをつかめば簡単に利用できるでしょう。 それでも注意しないとエラーが出てしまうこともありますので、Liquidを使用する際には次のような点に注意してください。

外部アプリを利用するとLiquidファイルが増加する

カスタマイズをする際、外部アプリをインストールすると、それにともないLiquidファイルも自動的につくられるため、ShopifyのディレクトリフォルダにLiquidファイルが保存されます。 そのままであれば問題ないのですが、例えば必要がなくなったり、間違ってしまった際にはアンインストールすることになると思います。 しかし、アンインストールを行っても増えたLiquidファイルは消えることなく残ってしまいます。 それが原因でエラーになることがありますので、アプリのアンインストールや追加をする際には十分配慮しましょう。 対策としては、元のテーマのバックアップ（コピー）を取ることをおすすめします。 バックアップの方法は、Shopifyの管理画面から『オンラインストア→テーマ→現在のテーマ→アクション→複製する』でコピーすることができます。

フォルダへの記載ミス

Liquidを扱う際に注意したいのが記載ミスです。 Shopifyではディレクトリごとに役割が異なるため、記載場所を間違うとエラーが出たり、うまく作動しなかったりします。 間違ったフォルダ内に異なるLiquidファイルを作成しても編集がうまくいきません。 ミスのないよう、正確に記載するようにしましょう。

プランによってカスタマイズできないこともある

Shopifyにはプランがあり、プランによってはできないことがあります。 その一つがチェックアウト画面のカスタマイズです。 チェックアウト画面のカスタマイズは、「Shopify Plus」プランに切り替えないとできません。 Shopify Plusなら、チェックアウト画面（カートの次ページから注文完了ページまで）をカスタマイズが可能です。 Shopifyテーマ内のレイアウトファイル「checkout.liquid」を追加すれば、ファイル内にJavaScriptを加えることでカスタマイズできます。 レイアウトファイルにコードを記載すれば、ヘッダー・フッターに関係なくカスタマイズが可能になります。 ただし、カスタマイズをする前に、checkout.liquidを有効にしなければなりません。 checkout.liquidを有効にするには、Shopify Plusのアカウントマネージャーに有効化を依頼します。 追加費用はかかりません。 このように、プランによってできることとできないことがあるので注意しましょう。

Liquidは初心者でも扱える？

Shopifyのメリットはカスタマイズ性が高く、Liquidを使用することでより高い性能で便利なサイトが構築できることです。 しかし、専門知識がないと難しいでしょう。 Shopify初心者の場合は、プログラミング言語を扱えるなど、専門知識のある知り合いに相談しながら作成するか、クラウドソーシングなどで請け負ってくれる人を探すことをおすすめします。

Liquidを活用してこだわりのデザイン画面を作成しよう

Shopifyは専門知識があれば、カスタマイズによってより高性能でデザイン性の高いサイトが構築できます。 カスタマイズ方法には、外部アプリを使用する方法とLiquidを利用する方法があります。 Liquidは特徴的なテンプレート言語ですが、基本的な使い方は知識のある人にとってはそれほど難しいものではありません。 公式サイトなどを確認すれば、より詳しい内容を知ることもできます。 ぜひLiquidを活用して、よりオリジナル性の高いデザイン画面を作成してみましょう。   下記のLINEで ①パソコンの選び方 ②国内転売マニュアル ③メルカリマニュアル が記載されている「ネット物販スタートマニュアル」をプレゼントしているのでぜひ受け取ってくださいませ！