ShopifyのLiquidファイルの構造の話①

#はじめに
今回は、ShopifyのLiquidファイルの構造について解説していきます。

`コードを編集する`からコードを編集していきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e846af09-6339-3ce0-8592-766255ed82f5.png)

#Liquidファイルのテーマ構造
それでは、ShopifyのデフォルトテーマであるDebutのフォルダ構造を見ながら、各々の役割について解説していきます。

##クイックスタート
最初に、全体の構造をざっと確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b33f8349-1bec-f7c7-0577-a488e6705609.png)

Shopifyのフォルダは大きく分けて、以下の７つに分けられます。

+ Layout
+ Templates
+ Sections
+ Snippets
+ Assets
+ Config
+ Locales

一つ一つの役割をざっくりと解説してきます。
###Layout
`Layout`はShopify内の大きな塊のファイルが格納されています。具体的には、ギフトカードをレンダリングする`gift_card.liquid`や、パスワードページをレンダリングする`password.liquid`、また、Shopifyのホームである`theme.liquid`などが格納されています。

この中でも特に大事なのが`theme.liquid`で、決済以外のページで使用されるマスターテンプレートになっています。そして、このbodyタグの中にある{{content_for_layout}}に。各ページのテンプレートファイルが読み込まれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/9f7390c4-1624-2ab9-cfad-16c64854f740.png)

上記の構造から分かるように、`header`や`footer`は`content_for_layout`の外で呼び出されていることが分かります。そのため、どのテンプレートファイルを用いても、`header`や`footer`が共通で表示されます。

##Templates
Templatesはその名の通り、様々なファイルのテンプレートを作成するファイルです。構造は以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b82e4875-b53e-1594-73d3-20ea1596370f.png)

`article.liquid`や`blog.liquid`という名前から分かるように、Shopify内で作成するブログや記事のテンプレートが格納されることになります。つまり、このテンプレートファイルを弄ることで、ブログや記事の見ためを変更することが可能です。

また、`page.liquid`や`page.contact.liquid`ファイルは、Shopifyの管理画面の`ページ`から作成するテンプレートファイルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e5653987-4a9f-24f8-2c98-217cc9bf20ea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5f5288b6-6292-bf8e-dea8-eb51e2d37a0e.png)

試しに、`page.liquid`の中身を見てみましょう。

```page.liquid
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>
```

通常のHTMLと異なるのは、`{{ page.title }}`や`{{ page.content }}`の部分です。

ちなみに、liquidの中ではview(見た目の部分)に表示するコードは`{{}}`で囲い、論理の部分でviewに表示しない部分は`{%%}`で囲います。この部分はRuby on Railsの.html.erbファイルに近いですね。

今回は`{{}}`で囲っているため、これはviewに表示するコードであることが分かります。

そして、`page.title`は、ユーザーがページを作成するときに記入するタイトルが格納されます。以下の部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/1cd2a9ac-803f-947e-a530-2fa3460c3beb.png)

テンプレートの中では、`テンプレート名.～`で、プロパティを参照できます。この場合、テンプレート名が`page.liquid`や`page.example.liquid`なので、`page.title`や`page.content`でプロパティを参照できます。

このページテンプレートを作成する例では、Titleが`page.title`に、コンテンツが`page.content`に格納されます。そして、viewの中でそれらを使用することができます。

###Templateの中でSectionを呼び出す
Sectionは、Templateの中で呼び出します。

product.liquidの中身を見てみると分かりやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a6907feb-1de9-3cf9-9285-2875e0158474.png)

セクションは。Shopify内でカスタマイズできる一つ一つの部品です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6386c6d9-866d-7f26-eb60-94da369e26e1.png)

上の画像で赤色の線を引いたそれぞれが`Section`になっています。

つまり、ここまでの話をまとめると、Sectionという一つ一つの部品をTemplateで呼び出して使用して、決済以外の全てのTemplateがTheme.liquidで呼び出されている、ということになります。

#終わりに
今回の記事はここまでになります。

次回の記事でSnippetsやAssetsについて取り扱って行きたいと思います。

ここまで読んでくださりありがとうございました。

続きをご覧になりたい方は以下のリンクからお願い致します。

[ShopifyのLiquidファイルの構造の話②](https://qiita.com/eijiSaito/items/635897aecda877784113)
# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search