[Shopify]自作テンプレート開発者向けの基礎知識

アルテガメンバーの尾崎です。

Shopifyのテーマは、LiquidというShopifyがオープンソースで開発しているテンプレート言語で構築されています。
そのため、独自のルールを持っており、色々な文法やオブジェクトが存在し、慣れるまでは少し把握しづらいかと思います。

今回は、Shopifyのテーマ開発上で必要な最低限の知識を理解できるようにまとめておきます。

テーマ構造理解のメリット
Liquidとは
ディレクトリ構造について
まとめ

テーマ構造理解のメリット

Shopifyのテーマ内部がどのような作りになっているか理解できていると、以下のメリットがあります。

メリット: オリジナルのテーマが開発できる; 公式テーマのカスタマイズができる; アプリのインストールなどができる

Liquidとは

Shopifyのテーマ開発にはLiquidが使用されます。HTMLと以下の要素を組み合わせて記述されます。拡張子は「.liquid」です。基本的な構成要素は以下のとおりです。

オブジェクト(Objects)

ストアの動的なデータを表しており、{{ }}で囲うことで反映されます。

{{ product.title }}
※「product.title」は商品名になります。

タグ(Tags)

条件分岐やループ処理を宣言するものです。{% %}で囲うことで反映されます。

{% if product.title == ‘Sample Text’ %} テキストが入ります。 {% endif %}

フィルター(Filters)

データに決まった処理を施すもの。

{{ ‘hello, world!` | capitalize }}
上記の結果は「Hello, world」となります。

ディレクトリ構造について

テーマはだいたい決まったディレクトリ構造になっています。
デフォルトで使用できるDebutテーマですと、以下のような構造になっており、layouts、sections、snippets、templatesの4つのディレクトリにファイルが格納されています。

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.liquid

Layoutについて

Layoutは、ページの全体的なレイアウトのことです。layoutディレクトリに含まれているのは、theme.liquidです。

head・bodyタグに加え、内部のヘッダーやフッター、ナビゲーション・グローバル変数など各ページ個別のレイアウトも基づいて構成されており、ページを表示する際は、Layoutの中にTemplateがレンダリングされます。

サイト全体に関わる修正はtheme.liquidの1ファイルに対し、共通パーツや個別ページの内容は個々のliquidファイルに分けて記述していきます。

Templateについて

Templateには、Shopifyサイトのページごとのデザインが記述されます。
以下、ファイルとページの対応関係になります。

index.liquid	ショップのトップページ
page.liquid	基本情報を表示するページ
product.liquid	商品ページ
collection.liquid	商品をまとめたコレクションページ
list-collections.liquid	コレクション一覧ページ
search.liquid	検索結果ページ
blog.liquid	ショップ内で公開されている記事一覧ページ
article.liquid	ショップ内で公開されている記事ページ
customers/cart.liquid	カート内の商品や個数が表示されるページ
customers/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	存在しないページにアクセスした時に表示されるページ