ShopifyのLiquid

Shopify（ショッピファイ）は、ストア構築未経験の初心者の方でも簡単に商品を販売することができるプラットフォームです。簡単にストアを構築できるので、2017年に日本に進出して以来急速に国内に浸透してきています。

一方で、拡張機能が欲しい場合には外部アプリやHTMLやCSS、JavaScriptといった言語を用いてカスタマイズすることができます。この点は、他のSaaS型のプラットフォームと比較するとカスタマイズ性が高いと言えます。

そして、中でも特徴的なのがShopifyオリジナルの「Liquid（リキッド）」と呼ばれる言語がテンプレート内に存在します。今回はそのLiquidについて紹介していきます。主にフロントエンドエンジニアなど、言語に対する知見のある上級者の方向けです。

逆に、Shopify初心者の方で「Liquidのカスタマイズが必要かも……」と感じるかと思います。その場合はS、hopifyに特化した開発会社やクラウドソーシングなどでカスタマイズ依頼することをおすすめします。

Shopify（ショッピファイ）のカスタマイズに必要な「Liquid」とは

Liquidとは、Shopify（ショッピファイ）内で用いられるRubyベースのテンプレート言語です。2020年現在、オープンソースとしてGitHubで公開されており、さまざまなソフトウェアプロジェクトや企業で利用されています。

複数のページで同じ内容の「静的コンテンツ」と、あるページから次のページへと変化する「動的コンテンツ」を組み合わせたウェブページを構築することができます。そのため、Liquidを使用すれば、ウェブページのレイアウトを定義する静的要素を再利用しながら、Shopifyストアのデータを動的にページに埋め込むことができます。

静的コンテンツはHTMLで記載され、動的コンテンツはLiquidで記載されています。ファイル内のコードがコンパイル（ソースコードがコンピュータ上で実行可能な形式に変換）されてブラウザに送信されると、テーマがインストールされているShopifyストアからのデータでLiquidは置き換えられます。

構文（式や文の形式を指す）を持ち変数を扱うため、他のプログラム言語と似ているという特徴が挙げられます。とは言え、HTML上ではRubyの構文が使えないため注意が必要です。Shopifyの管理画面上からは、「テーマ」→「アクション」→「コードを編集する」から編集することができ、7つの各ディレクトリに格納されている「〇〇.liquid」というファイルが該当します。

なお、具体的に「ヘッダーを追従するようにしたい」「ボタンの位置を調整したい」「コレクションリストで商品表示件数を多くしたい」などの細かな調整はLiquidの他にもhtml,cssを編集することでも実現可能です。

Liquidに関する注意点

Liquidの編集前に覚えておきたい注意点は次のの3点です。

注意点
  • 外部アプリを利用することによるLiquidファイルの増加
  • ディレクトリの記載間違い
  • チェックアウト画面のカスタマイズ

注意点①：外部アプリを利用することによるLiquidファイルの増加

外部アプリを使って機能拡張する際には、Liquidファイルも自動生成されShopifyのディレクトリに直接保存されます。しかし、アプリによってはアンインストール後もLiquidファイルだけ残り続けてしまうこともあります。これが不具合の原因となってしまう可能性があるため、アプリの追加やアンインストールを行う際には注意が必要です。

アプリに関するLiquidを編集する際には、ローカル環境の作業ではあってもバックアップをとってから編集作業をすることをおすすめします。Shopify管理画面上で「テーマをカスタマイズ→アクション→複製する」をクリックすることによってバックアップを取ることができます。

注意点②：ディレクトリの記載間違い

Shopifyでは、ディレクトリ毎に役割が異なります。そのため、本来Liquidファイルを作成されるべきでないディレクトリにLiquidファイルを作成してしまうと編集内容がうまく機能しない場合があります。

注意点③：チェックアウト画面のカスタマイズ

チェックアウト画面のLiquidカスタマイズは、「Shopify Plus」プランでないと編集ができません。

Liquidの7つのディレクトリ

テーマにもよりますが、Shopify（ショッピファイ）の管理画面上で「コードを編集する」とクリックすると、ディレクトリが下記のように分かれていることが確認できます。

Liquidのディレクトリ
  • Layout
  • Templates
  • Sections
  • Snippets
  • Assets
  • Config
  • Locales

    ディレクトリは独立しているわけではなく階層となっており、表示の読み込みは「Layout→Templates→Sections→Snippets」の順となります。新しいファイルを作成するには「新しい〇〇を（各ディレクトリ名）作成する」で可能です。

    では、各ディレクトリの役割などを紹介していきましょう。

    Layout

    Layoutとは、すべてのページに使用される「theme.liduid」があるディレクトリです。ヘッダーやフッター、ナビゲーションなどサイト全体に関してHTMLが適用されるとイメージするとわかりやすいかもしれません。細かい要素については、個別のLiquidファイルに編集内容を記載します。

    Templates

    Templatesとは、ページ属性によって読み込まれる Liquidがあるディレクトリです（例： article.liquid、cart.liquid）。

    • article.liquid：ページテンプレート
    • blog.liquid：ブログ記事のテンプレート

    といったように分かれています。ブログやページに関して、ここで新しいテンプレートを追加することによって管理画面上でオリジナルのページテンプレートを選択することができます。

    Sections

    Sectionsとは、各ページのセクション毎に用いられるLiquidがあるディレクトリです（例： header.liquid、footer.liquid）。

    フッターやヘッダーなど各ページで共通の要素が格納されているため、上記のLayoutやTemplatesにSectionsディレクトリ内のLiquidファイルを記載するとその内容が読み込まれるようになっています。SectionsでさらにSectionsのファイルを読み込むとコンパイルエラーとなってしまうため注意が必要です。

    Snippets

    Snippetsとは、Sectionsより細かいアイテム単位のLiquidがあるディレクトリです（例： icon-box.liquid、 newsletter-form.liquid）

    上記ご紹介のディレクトリ内に「{% include ‘〇〇’ %}」と記載するとSnippets内部のLiquidファイルが読み込まれるようになっています。

    Assets

    Assetsとは、JavaScriptやcssがあるディレクトリで、pngやsngの画像ファイルなどもファイルが格納可能です（例： theme.js、 theme.scss.liquid）。「scss.liquid」の中に日本語でコメントを記載するとコンパイルした際にエラーが起きてしまうため注意してください。

    Config

    Configとは、サイト全体に関するJavaScriptを入れるためのディレクトリです（例： settings_data.json、settings_schema.json）。CSSが上手く機能していないなどにConfigをチェックすることをおすすめします。

    Locales

    Localesとはテーマ言語についてのJavaScriptを入れるディレクトリです（例： ja.json、en.json）。日本語のjsonファイルは「ja.json」ですが、言語に関してはShopify管理画面の「設定→ストアの言語→テーマ言語を編集する」でも設定ができます。

    Liquidの3種類の構文

    Liquidの使い方としては大きく分けて次の3種類があります。すでに何らかの言語の知見がある方は、Liquidの概要について理解することは難しくはありません。

    Liquidの構文
    • {{ }}：アウトプット（出力）
    • {% %}：ロジック、ループ（処理内容・手順）
    • |：フィルター（条件追加）

     

    アウトプット「{{ }}」

    アウトプットについて、オブジェクト、オブジェクトのプロパティ、文字列のいずれかを記述することで出力できます。（Shopify公式ホームページでは「Objectsと」呼ばれます）。

    例えば、Liquid上では

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

    のように記述した場合の出力は、

    <h2>任意のテキスト</h2>

    となります。この場合、Liquidは page.title というオブジェクトの内容をレンダリングしており、そのオブジェクトには任意で決めたテキストが含まれています。

    ちなみに、下記の例のように「”」（クォーテーションマーク）で囲むことで文字列として扱うことができます。

    <div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">

    オブジェクトはページ上のコンテンツをどこに表示するかを指定します。他にも出力の例としてhtmlリンクやショッピングカートへのリンク、TOPページへのリンクも生成できます。画像の出力の例として、

    {{ 画像名.jpg | asset_url | img_tag }}

    と入力した場合には、出力として画像タグが出力されます （|の記号は後にご紹介するフィルターという機能です）。ちなみに、JavaScriptも読み込むことができます。リンクを読み込む場合は、

    {{ 'Shopify' | link_to : 'https://www.shopify.com', 'A link to Shopify' }}

    と入力すると、該当のURLが出力されます。

    ロジック「{% %}」

    ロジックについて、サイト上では出力されないif文やfor文などのロジックを使いたい場合に記載します。そして、テンプレートに何をすべきかを指示することができます（Shopify公式ホームページでは「Tag」と言われます）。

    ここで使用されるマークアップは、目視できるテキストは生成しません。これは、ページ上にLiquidロジックを表示することなく変数を割り当てたり、条件やループを作成したりすることができます。

    他にもLiquidタグを使用して、商品ページに商品があるかどうかによって異なるコンテンツを表示することができます。例えばインプットで、

    {% if user %}
  Hello {{ user.name }}!
{% endif %}

    のように記載した場合、

    Hello 任意の名前!

    と表示されます。他にもPHPなどの言語で記述するようなif文やfor文を使うことも良くあります。

    if文の例
    {% if available == false %} price--sold-out {% endif %}

    for文の例
    <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
    {% for user in site.users %}
    {{ user }}
    {% endfor %}

    さらに、条件分岐が必要な場合はcase文や、出力マークアップや他のタグで使用するための変数を作るためのassignタグなどを使うことができます。

    フィルター

    フィルターは、数値、文字列、変数、オブジェクトの出力を修正する方法の一つです。フィルター（|）を使うことによってフィルターの右側に記載したLiquidオブジェクトの変更や条件追加ができます。また、一つの出力に対して複数のフィルターを使うことが可能です。

    フィルターの中には、パラメータを渡す必要があるものもあります。フィルターを複数利用した場合は左から右に順番に読み込まれ、すべてのフィルターを介して結果が返されます。例えば、

    {{ 'hello, world!' | capitalize | remove: "world" }}

    このように記載すると1番目のフィルターでcapitalizeで文字列「hello」が「Hello」に、2番目のremove: “world”で文字列「world」が削除されます。したがって、出力は次のとおりです。

    Hello, !

    また、フィルターには8つの種類があります。

    フィルターの種類
    • Array filters：配列を操作するフィルターです。任意の要素を出力することもできます。Array filtersで配列の操作ができます。
    • Color filters：RGBなどのカラーコードを操作できるフィルターです。
    • HTML filters：imgタグやaタグ、Shopify独自のテンプレートタグを生成できるフィルターです。
    • Math filters：加減乗除の計算や比較などができるフィルターです。
    • Money filters：Shopify上で金額の出力をするのに必要なフィルターです。
    • String filters：文字列の結合や検索ができるフィルターです。
    • URL filters：サイト上のURLを生成できるフィルターです。
    • Additional filters：日付や特定のフォーマットの設定、変換などができるフィルターです。

    まとめ

    Shopify（ショッピファイ）のLiquidについて、ディレクトリ構造や実際にLiquidを使った構文などを交えながら紹介しました。まとめると次のとおりです。

    • Shopifyのカスタマイズ方法には外部アプリとLiquidの編集の2種類がある
    • Shopifyには7つのディレクトリがある
    • 商品名などの動的な情報を出力するアウトプット：{{ ○○ }}
    • if文やfor文などを使う際に記述するロジック：{% ○○ %}
    • オブジェクトの出力結果を制御するフィルター：{{ ○○ | △△ }}
    • フィルターの中には8つの種類がある

    Liquidで書かれている内容をより深く知るには、公式サイトをチェックするようにしてください。

    Shopify Guide編集部は、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションをお考えの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。