Shopifyのコード編集を始める前に抑えるべき6つのこと

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
edit-theme-code-thumnail

この記事の所要時間: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.liquid

Liquidファイルが格納されているのは、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のデザイン編集が行えます。

Shopifyにはテーマエディタという機能があり、ストアの管理画面でGUIのデザイン編集が行えます。
テーマエディタの画面

そのテーマエディタを使って自由に差し込んだり、配置を変えることができるコンポーネントがSectionです。

頻繁に変えたい部分はSnippetではなく、Sectionとして定義しておくことで、コーディングの知識がないマーチャントでも自由に変更することができます。

動的セクション(dynamic sections)

Sectionには、動的セクション(dynamic sections)と静的セクション(static sections)という2つの使い方があります。

動的セクションでは、Sectionに対してpresetsと呼ばれる動的なプロパティを定義します。テーマエディタで動的セクションのプロパティを変更することができます。

動的セクションでは、Sectionに対してpresetsと呼ばれる動的なプロパティを定義します。テーマエディタで動的セクションのプロパティを変更することができます。
青枠の部分でブログセクションのプロパティを更新できます。

静的セクション(static sections)

静的セクションは動的なプロパティを持ちません。

sections/header.liquidをTemplateで宣言するときは以下のようにします。引数はありません。

<div>
  {% section ‘header’ %}
</div>

静的セクションは動的セクションと違い、単一の定義しか存在しません。

Sectionのコードを変更すれば、そのSectionが埋め込まれた全ページが更新されるため便利です。

【最後に】

Shopifyテーマに含まれるディレクトリの中には、本記事で説明していないものもあります。

assetsはCSSやJS、画像などの静的リソースが格納されます。Shopifyテーマに特有の概念は登場しないので説明を省きました。

localesやconfigは、それぞれ、多言語化とテーマエディタの設定に関わります。テーマ開発を進めていくうちに、これらのカスタマイズも必要になるでしょう。

ここまで読むと、既にテーマデザインのカスタマイズに手をつけられると思います。

あとは実践を通して学でいくこともできますし、公式ドキュメントを読んで理解を深めるのも良いでしょう。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。