＊本サイトはアフィリエイトプログラムを利用しています。
Shopifyはプログラムの知識がない方や、オンラインストアの構築経験がない方でも手軽に商品を販売できるプラットフォームです。管理画面の操作もわかりやすく独自の決済システムもあるため、商品さえ用意できれば簡単にオンラインストアを運営できます。
ですが、オンラインストアを運営していると「商品の購入制限を設定したい」「商品をカートに入れた時点で、ほかのおすすめ商品を表示したい」というように、カスタマイズしたい内容が出てくることがあるでしょう。
そのような場合、Shopifyではテンプレート言語「Liquid」を使用しカスタマイズできます。この記事では、カスタマイズ性が強く、ストアのカスタマイズも可能なShopifyのLiquidの使用方法を解説します。使用するうえでの注意点も解説しますので、最後までご覧ください。
目次
Shopifyのテンプレート言語「Liquid」とは？
「Liquid」はShopifyが開発したテンプレート言語で、Rubyと呼ばれるプログラム言語をもとに開発されています。HTMLやCSSで記述されたオンラインストアのWebページとShopifyのデータを組み合わせることが可能です。
Liquidの特徴
LiquidはGithub上でソースコードを直接確認できます。動的なコンテンツを表示させるため、ほかのプログラム言語と同様に構文があり、変数の利用も可能です。Liquidで記述したファイルは「.liquid」の拡張子で保存されます。
LiquidはShopifyでの使用を前提につくられています。そのため、変数とフィルターやタグの組み合わせにより、商品情報やカート内の商品点数などの動的な情報をWebサイト上で表示できます。動きのあるWebサイトの制作を実現し、販促の効果を高めることが可能です。
Liquidの基本構文
LiquidはWebサイトのHTMLの構文内に埋め込んで使用します。主な仕組みは以下のとおりです。
- 二重中括弧 {{ }}：出力
- 中括弧とパーセンテージ {% %}：ロジック
それぞれの構文は出力とロジックのいずれか、もしくは組み合わせて使用します。
Liquidの（仕組み）と使い方
Liquidの仕組みと使い方を、以下の項目に分けて解説します。
- 基礎
- Tags
- Objects
- Filter
基礎
Liquidを使用するにあたって、はじめに覚えるべきものはオブジェクトハンドルです。
Shopifyで商品やコレクションなどの内容を識別するために設定されるものです。
商品名やコレクション名などから自動で名前を付与します。
例えば商品であればproduct、コレクションはcollectionsなど、英語の小文字で表示し、同名のものは末尾に数字の番号を付加し区別します。
条件分岐や繰り返しの記述では、以下の比較演算子を活用して記述することが可能です。
| 比較演算子 | 説明 |
|---|---|
| A == B | AとBが等しい |
| A != B | AとBが等しくない |
| A > B | AがBより大きい |
| A >= B | AがB以上 |
| A < B | AがBより小さい（未満） |
| A <= B | AがB以下 |
Tags（タグ）
Tags（タグ）は {% と %} で囲んだコードブロックを指します。条件分岐やループなど、変数の利用や条件分岐で使用することが可能です。変数を使用する場合は「assign」を使用します。実際の使用例を見てみましょう。
{% assign item_name = ‘商品その１’ %}
この商品は{{ item_name }}です。
ほかにも繰り返し「for文」、分岐「if文」、コメント「comment」などは、普段よく使用するタグなので覚えておきましょう。
Objects（オブジェクト）
Objects（オブジェクト）はShopify内に含まれたデータ要素のことです。Shopifyに限らずオンラインストアのWebサイトでは商品や顧客情報などを表示する必要があります。これらのデータはオブジェクトと呼ばれ、プロパティと呼ばれるデータの要素を含んでいます。
{{ }}の中に入力すると、出力したい文字を表示することが可能です。オブジェクトやプロパティ、および文字列を記載すると中に出力したい文字を表示できます。
例えば、カート内のアイテム数を表示したい場合のタグは以下のとおりです。
{% assign item_count = cart.items.size %}
カート内のアイテム数：{{ item_count }}
カート内のアイテム数を示す「cart.items.size」を、item_count変数として出力します。
Filters（フィルター）
Filters（フィルター）は、変数やオブジェクトの値を変換するために使用するものです。Shopifyのテンプレート内にあるデータの整形や加工することが可能です。(パイプ記号「|」を使用して、表示するデータにフィルター処理を実行します。記述方法は、{{ }}を使い、中の左側には変数を記述しパルプ記号で区切り右側にフィルターを記述します。
例えば、商品価格を通貨形式で表示するためのフィルターはcurrencyです。通貨形式に変換する記述方法は以下のとおりです。
{% assign price = 2000 %}
価格: {{ price | currency }}
価格を表すpriceの変数には2000という値を入力します。currencyのフィルターを使用し、変数の値を通貨に変換して表示しています。この場合、「価格 ￥2,000」で表示結果が反映されます。
ShopifyのカスタマイズをLiquidで実施するメリット
ShopifyのカスタマイズをLiquidでおこなうメリットは、Shopifyとのデータ連携がスムーズにおこなえる点です。Shopifyは機能性に優れたEC構築サービスですが、オンラインストアの機能性を高めるためにもLiquidを活用するのが望ましいといえます。
サイト構築者の負担を減らせる
ShopifyはほかのECサイトとは異なり、独自のデータや機能を備えています。LiquidはShopifyで使用することを前提にしたプログラム言語のため、データアクセスすることも簡単です。Shopifyに含まれている注文や顧客などの情報、商品購入カートの制御などもLiquidで実現できます。
また、Liquidでカスタマイズしたテーマは再利用も可能です。ShopifyではカスタマイズしたテーマをほかのECサイトにも適用できるので、複数のオンラインストアを運営する際の利便性も優れています。
構文がシンプルで使いやすい
HTMLやCSSについての基本的な知識があれば、Liquidは使いやすい言語といえるでしょう。Shopifyのテンプレートの中で、カスタマイズしたい部分に記述して使用できるため使いやすいのも特徴の一つです。
必要な情報を見つけやすい
Shopifyを使用してストア構築している企業や個人は多くいるため、Liquidに関する情報を記載しているサイトや、コミュニティが存在します。Shopify公式サイトでも情報交換が活発におこなわれており、情報を取得しやすいのもメリットといえるでしょう。
ShopifyをLiquidでカスタマイズする方法
ShpifyをLiquidでカスタマイズする方法は2つあります。
どちらか、カスタマイズしやすい方法を選びましょう。
Shopifyの管理画面から構築する
Shpoifyの管理画面から構築する手順は以下のとおりです。
- Shopify管理画面にログイン
- オンラインストア→テーマをクリック
- まず既存のテーマの複製をクリック
- カスタマイズの左の「･･･」をクリックしコード編集をクリック
画像出典：Shopify
Liquidでカスタマイズする場合、すでに公開済みのオンラインストアでコード編集すると、変更内容はリアルタイムに反映します。設定を失敗してしまうと全体的に影響を及ぼすため事前にテーマを複製しておきましょう。
コードを編集をクリックすると使用しているテーマのLiquidやJsonファイルが格納されているページが表示されます。カスタイマイズしたいページのLiquidファイルを開き、カスタマイズしていきましょう。Shopify2.0で無料で提供されているテーマ「Dawn」では下記のディレクトリごとにLiquidファイルが格納されています。
| ディレクトリ名 | 役割 |
|---|---|
| アセット | CSSやJavascriptおよび画像やフォントを格納 |
| 設定 | テーマエディタに関連するjsonファイルを格納 |
| レイアウト | テーマのレイアウトの元となるtheme.liquidを格納 |
| ロケール | 翻訳jsonファイルを格納 |
| テンプレート | 各ページのテンプレートLiquidファイルを格納 |
| セクション | 各セクションのLiquidファイルを格納 |
| スニペット | 各スニペットのLiquidファイルを格納 |
Shopifyの管理画面で直接コードを編集するため、バックアップをしっかりしておくことが重要です。
「Shopify CLI」を使用したローカル環境で構築する
Liquidをカスタマイズするには、「Shpoify CLI」を使用し構築することも可能です。
「Shopify CLI」のインストール要件は、使用しているOSによって異なります。まず「Shopicy CLI公式ページ」を開いてインストールに必要な条件を確認しましょう。
画像出典：Shopify CLI公式ページ
トップページのRequirementsに英語ですが、Mac・Windows・Linuxでインストールに必要な要件が記載されています。WindowsとMacのインストール方法は以下の記事にインストールの手順が記載されていますので、参考にしてください。
Rubyのインストール設定が必要で、WindowsとMacOSではインストールする内容が異なります。
ShopifyのカスタマイズをLiquidで実施する際の注意点
ShopifyのカスタマイズをLiquidでおこなう方法を紹介しましたが、以下のとおり注意すべき点もあります。
- ディレクトリ構造の記載ミス
- 外部アプリの使用による影響
- カスタマイズの範囲が限定
- 操作はオンラインのみ
これからLiquidでのカスタマイズを検討している方は注意しましょう。
Shopify独自使用のディレクトリ構造で記載ミスが起きやすい
Shopifyのディレクトリ構造は独特で、それぞれ明確な役割が与えられています。記載ミスが起きやすいのはデメリットといえます。
特定のディレクトリ内にあるLiquidファイルはそれぞれ、管理画面で階層分けされています。コード編集の際に、ディレクトリ内にあるファイルの変更および記述は正確に記載しましょう。
外部アプリを利用すると不要なLiquidファイルが増える
Shopifyでは外部アプリやプラグインを導入・連携する機会もあるでしょう。外部アプリやプラグインは、該当のLiquidファイルを変更・追加する場合があります。外部アプリが増えるとLiquidファイルにも変数やタグの記述が増えていきます。
アプリなどをインストールする前に、テーマファイルのソースコードをバックアップしておきましょう。
契約プランによってカスタマイズできる範囲が限られる
Shopifyでは契約プランが複数ありますが、チェックアウト画面をカスタマイズできるのは、Shopify Plusプランのみです。ほかのShopifyプランでは、カスタマイズできませんので注意してください。
オフラインでは動作確認できない
Liquidでカスタマイズした内容の動作確認は、オンラインのみの対応となります。オフラインの状態では動作確認ができないので注意してください。
ShopifyをLiquidでカスタマイズする際に役立つ情報
ShopifyではLiquidに関する役立つ情報が多数掲載されています。ここからはLiquidのカスタマイズに役立つ情報を3つ紹介します。
- 公式サイト
- チートシート
- 書籍
これからLiquidを勉強したい方もぜひ参考にしてください。
Shopify公式サイト
Shopifyの公式サイトには、ブログやYouTubeなどでShopifyの機能について数多く紹介されています。Liquidについては2020年3月10日に執筆されたブログに、説明が網羅されています。
参照：Shopify公式ブログ
Shopify公式サイトではリファレンスやサンプルコードも用意されています。ほかにもQiitaの記事は、演算子やデータ型、変数や属性などの情報が網羅されているのでLiquidの勉強を始める方には役立つ情報といえるでしょう。
Shpoify Liquidテンプレート言語の基本を理解する
Liquidの言語仕様をまとめてあるShopifyチートシート
ShopifyパートナーのサイトにはLiquidのチートシートが用意されています。Liquidの構成要素に併せて図にまとめられております。簡単に日本語に翻訳すると以下のとおりです。
各オブジェクトのプロパティも網羅しています。英語版のみですが、タグやロジックは英語表記なのでブックマークしておくと便利です。
Liquidについて学習できる書籍
ShopifyのLiquidに関する書籍を購入して学びたい方に、Shopifyで特にLiquidの学習に適した書籍を紹介します。
Liquidをはじめて学習する方は1冊目がおすすめです。ShopifyのテンプレートテーマDawnを活用してLiquidのカスタマイズをした方は3冊目が適しています。
Shopifyではじめるネットショップ
Shopifyでネットショップをつくるにあたって、必要な知識を習得できます。
アカウントの作成方法から商品登録・コレクションの作成まで基礎的なことも学習できる初心者でも理解しやすい書籍です。
Shopifyに必要なアプリやLiquidについても学習でき、Shopifyをカスタマイズする方法を紹介しています。
書籍を購入したい場合は、『Shopifyではじめるネットショップ』をご覧ください。
Shopify運用大全 最先端ECサイトを成功に導く81の活用法
Shopifyを活用し数々のECサイトの運営を成功させているトッププレイヤーを著者に迎え、勝法方法を記載した書籍です。
ECサイトの運営だけでなくマーケティング施策まで幅広く学習したい方に向けた書籍です。
書籍を購入したい場合は、『Shopify運用大全 最先端ECサイトを成功に導く81の活用法』をご覧ください。
Hello Shopify Themes Shopifyテーマ開発ガイド
Shopifyのテーマ開発をしたい方に向けてテーマの概要やShopify CLIやTheme Kitを活用した開発観光構築を説明しています。
基本テーマDawnを活用したカスタマイズ方法を紹介しており、具体的な開発方法を学習できます。
書籍を購入したい場合は、『Hello Shopify Themes Shopifyテーマ開発ガイド』をご覧ください。
Shopifyの細かなカスタマイズはLiquidで実現しよう
この記事では、Shopifyのテンプレート言語「Liquid」の使い方や注意点について解説しました。Liquidは公式サイトのブログやチートシートなど情報が網羅されているため、勉強しやすい言語といえるでしょう。
今回の内容を参考に、運営しているオンラインストアをカスタマイズし、ユーザーが利用しやすいECサイトの制作をめざしましょう。
株式会社プレイビット
Shopifyを活用したECサイトの構築・運用の支援サービスを提供しています。
Shopifyの制作・運用に特化したプロ集団が、トータルサポートさせていただきます。ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。
