Shopifyのコード編集を始める前に抑えるべき6つのこと
この記事の所要時間：9分
ShopifyのテーマはLiquidというテンプレート言語で開発され、独自のルールを持っています。Liquidには様々な文法やオブジェクトがあり、最初はなかなか把握しづらいことでしょう。
本記事では、Shopifyのテーマ開発に必要となる最低限の知識を簡潔に解説します。
Liquidについて
Shopifyのテーマ開発には「Liquid」が使用されます。
Liquidは、RubyのerbやPythonのjinja2などのテンプレートエンジンと似ています。
Shopifyの公式ドキュメントでは、テンプレートエンジンに必要な機能をすべて持っているわけではないことから、テンプレート言語(Template language)とされています。
Liquidは、HTMLドキュメントの中に{{ data }}という記述で動的なデータを埋め込みます。
{% %}という記述で、条件分岐やループ処理を施すことも可能です。
Liquidの構成要素は以下のとおりです。
オブジェクト(Objects)・・・ストアの動的なデータを表すものです。{{}}で囲うことで評価されます。
<p>{{ product.title }}</p>タグ(Tags)・・・条件分岐やループ処理を宣言するものです。{% %}で囲うことで評価されます。
{% if product.title == ‘Awesome Shoes’ %}
<p>あなたが買おうとしているのは素晴らしい靴です！</p>
{% endif %}フィルター(Filters)・・・データに決まった処理を施すもの。
<p>{{ ‘hello, world!` | capitalize }}</p>上記の結果は「Hello, world」となります。
Liquidは、HTMLと上記の要素を組み合わせて記述されます。ちなみにLiquidファイルの拡張子は「.liquid」です。
Shopifyテーマのディレクトリ構造について
Shopifyテーマはある程度決まったディレクトリ構造をとります。
デフォルトのテーマであるDebutは、以下のような構造になっています。
debut
├── assets
│ ├── ajax-loader.gif
│ ├── gift-card.css
│ ├── gift-card.js
│ ├── ico-select.svg.liquid
│ ├── ie11CustomProperties.min.js
│ ├── lazysizes.js
│ ├── password.js
│ ├── theme.css
│ ├── theme.js
│ └── variables.css
├── config
│ ├── settings_data.json
│ └── settings_schema.json
├── config.yml
├── layout
│ ├── gift_card.liquid
│ ├── password.liquid
│ └── theme.liquid
├── locales
│ ├── en.default.json
│ ├── ja.json
│ ├ # 省略
│ └── zh-TW.json
├── sections
│ ├── article-template.liquid
│ ├── blog-template.liquid
│ ├── cart-template.liquid
│ ├ # 省略
│ └── video.liquid
├── snippets
│ ├── adaptive-color.liquid
│ ├── bgset.liquid
│ ├── cart-popup.liquid
│ ├── collection-grid-item.liquid
│ ├── comment.liquid
│ ├ # 省略
│ └── social-sharing.liquid
└── templates
├── 404.liquid
├── article.liquid
├── blog.liquid
├── cart.liquid
├── collection.liquid
├── customers
│ ├── account.liquid
│ ├── activate_account.liquid
│ ├── addresses.liquid
│ ├── login.liquid
│ ├── order.liquid
│ ├── register.liquid
│ └── reset_password.liquid
├── gift_card.liquid
├── index.liquid
├── list-collections.liquid
├── page.contact.liquid
├── page.liquid
├── password.liquid
├── product.liquid
└── search.liquidLiquidファイルが格納されているのは、layouts、sections、snippets、templatesの4つのディレクトリです。
それぞれ、Liquidにおける概念である、Layout、Section、Snippet、Templateに対応しています。1つずつ説明します。
Layoutについて
Layoutは、ページの全体的なレイアウトのことです。
後に紹介するTemplateが1ページごとに1ファイルを記述するのに対して、Layoutはすべてのページで同じファイルが使用されます。
ページを表示する際は、Layoutの中に、Templateが1つレンダリングされます。
Layoutには、<head></head>や、<body></body>内のヘッダーやフッターなど、ページに依存しないコードが記述されます。
Layoutには、<head></head>内に{{ content_for_header }}を、<body></body>内に{{ content_for_layout }}を、記述しなければなりません。
content_for_headerが宣言された位置には、Shopifyによっていくつかのスクリプトが差し込まれます。
content_for_layoutが宣言された位置には、(Templateで定義される)ページごとのコンテンツが差し込まれます。
Templateについて
Templateには、Shopifyサイトのページごとのデザインが記述されます。
Templateのファイルとページの対応関係を表にしました。
| index.liquid | ショップのホームページ |
| page.liquid | ショップの基本情報を表示するページ |
| product.liquid | 商品のページ |
| collection.liquid | 商品をまとめたコレクションのページ |
| list-collections.liquid | コレクションの一覧ページ |
| search.liquid | 検索結果のページ |
| blog.liquid | ショップ内で公開されている記事の一覧ページ |
| article.liquid | ショップ内で公開されている記事のページ |
| cart.liquid | カート内の商品や個数が表示されるページ |
| checkout.liquid | 決済ページ。Shopify Plusを契約しているマーチャントのみが使える。 |
| customers/account.liquid | 顧客がアカウントの基本情報を確認するページ |
| customers/activate_account.liquid | 顧客アカウントを有効化するために、顧客にパスワードを入力してもらうページ |
| customers/addresses.liquid | 顧客がアカウントにひも付いた住所を確認するページ |
| customers/login.liquid | 顧客がアカウントにログインするページ |
| customers/order.liquid | 顧客が過去の注文を確認するページ |
| customers/register.liquid | 顧客がアカウントを作成するページ |
| customers/reset_password.liquid | 顧客がアカウントのパスワードを変更するページ |
| 404.liquid | 有効ではないURLにアクセスした時に表示されるページ |
上記の表にはのっていない「password.liquid」と「gift_card.liquid」というTemplateがあります。
password.liquidは、会員限定のショップなどで利用される会員パスワードを入力するページです。
gift_card.liquidは、顧客に対して発行されるギフトカードのデザインが記述されます。
この2つのTemplateはデザインの観点で特殊です。
それぞれが独自のレイアウトを持つため、それぞれにgift_card.liquidとpassword.liquidというLayoutが用意されています。
Snippetについて
Snippetは、デザインのコンポーネントです。
Templateで繰り返し記述される部分をSnippetでまとめておくと、コードの変更が1か所で済みます。
SnippetをTemplateで差し込む場合は、以下のように記述します。
<div>
{% render “snippet-name” %}
</div>Snippetを差し込むときに、Snippet内のコードで参照できる変数を設定することができます。
以下のようにすれば、Snippet内でmy_variable変数が参照できます。
<div>
{% assign my_variable = ‘apple’ %}
{% render ‘name’, my_variable: my_variable %}
</div>Snippetを使いこなせば、テーマ開発の効率が上がります。
Sectionについて
Sectionは、Snippetと同じくデザインのコンポーネントです。
ロゴやフッター、ヘッダーなどをSectionとして記述します。
SnippetとSectionの違い
Snippetは(呼び出し時に指定すれば)外の変数にアクセスできますが、Sectionはそれができません。また、Section内で宣言された変数に外部からアクセスすることもできません。
つまりSectionは、外部の情報に依存しない閉じたコンポーネントです。
もう一つの違いは、SectionはGUIでの操作が可能だということです。
Shopifyにはテーマエディタという機能があり、ストアの管理画面でGUIのデザイン編集が行えます。
そのテーマエディタを使って自由に差し込んだり、配置を変えることができるコンポーネントがSectionです。
頻繁に変えたい部分はSnippetではなく、Sectionとして定義しておくことで、コーディングの知識がないマーチャントでも自由に変更することができます。
動的セクション(dynamic sections)
Sectionには、動的セクション(dynamic sections)と静的セクション(static sections)という2つの使い方があります。
動的セクションでは、Sectionに対してpresetsと呼ばれる動的なプロパティを定義します。テーマエディタで動的セクションのプロパティを変更することができます。
静的セクション(static sections)
静的セクションは動的なプロパティを持ちません。
sections/header.liquidをTemplateで宣言するときは以下のようにします。引数はありません。
<div>
{% section ‘header’ %}
</div>静的セクションは動的セクションと違い、単一の定義しか存在しません。
Sectionのコードを変更すれば、そのSectionが埋め込まれた全ページが更新されるため便利です。
【最後に】
Shopifyテーマに含まれるディレクトリの中には、本記事で説明していないものもあります。
assetsはCSSやJS、画像などの静的リソースが格納されます。Shopifyテーマに特有の概念は登場しないので説明を省きました。
localesやconfigは、それぞれ、多言語化とテーマエディタの設定に関わります。テーマ開発を進めていくうちに、これらのカスタマイズも必要になるでしょう。
ここまで読むと、既にテーマデザインのカスタマイズに手をつけられると思います。
あとは実践を通して学でいくこともできますし、公式ドキュメントを読んで理解を深めるのも良いでしょう。
