[Shopify] liquidを記述して、ページテンプレートでセクションを表示させる方法

# はじめに
今回は、liquidを記述して、ページテンプレートでセクションを表示させる方法を解説していきます。

頑張っていきましょう。

#クイックスタート
今回の記事では以下のようにページテンプレートでセクションを選択できるようになる方法を実装します。

ページテンプレートでpage.exampleを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/149481e2-3448-0e1e-09cf-a2664c5d758a.png)

Titleは適当で大丈夫です。

今回は`ぽこまる`でいきましょう。

テーマのカスタマイズの左上から、ぽこまるを選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/618528fe-fc66-db21-6e6b-23dcbbdaff7a.png)

次のように、Feature-rowセクションが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f3b1f755-51ce-cad6-1cd0-18c7396b41c7.png)

通常、テンプレートページではセクションを表示することはできません。しかし、liquidを編集することでテンプレートページにセクションを表示させることが可能です。

それでは、具体的な方法を解説していきます。

#templatesの中にpage.example.liquidを作成
pege.example.liquidをtempletesの中に作成しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f28f8ab9-ea09-822d-b44f-c1299587e610.png)


pageというファイル名がShopifyの予約後です。この名前で命名することで、管理画面の`ページ`からページを生成することができます。

#page.example.liquidにコードを記述
以下のコードを記述することで、sectionを呼び出すことができます。

```page.example.liquid
{% section 'feature-row' %}
```

`page.example.liquid`はtemplatesフォルダの配下のファイルです。

基本的に、sectionはtenmpatesから呼び出します。

`section`とはShopifyにおいてユーザーがカスタマイズできる部品のことで、sectionフォルダの配下のファイルになります。

つまり、今回のコードではsectionの中の`feature-row.liquid`ファイルを呼び出したことになります。

ついでに、`feature-row.liquid`ファイルの中身を見てみましょう。

本当はviewの下にschemaが記述されていますが、長すぎるため割愛しました。

```.liquid
<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
      {% if section.settings.image != blank %}
        {% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
        {% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
        {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
        <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
          <div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
            <img id="{{ img_id }}"
                 class="feature-row__image lazyload"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ section.settings.image.alt | escape }}">
          </div>
        </div>

        <noscript>
          {{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
        </noscript>
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte rte-setting featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        {%- capture ariaLabel -%}
          {{- section.settings.button_label -}}
          {%- if section.settings.button_link.type == 'frontpage_link' -%}
            : {{ 'homepage.general.title' | t -}}
          {%- elsif section.settings.button_link.type == 'catalog_link' -%}
            : {{ 'collections.catalog.title' | t -}}
          {%- elsif section.settings.button_link.object.title -%}
            : {{ section.settings.button_link.object.title -}}
          {%- endif -%}
        {%- endcapture -%}

        <a href="{{ section.settings.button_link }}"
          class="btn"
          aria-label="{{ ariaLabel }}">
          {{- section.settings.button_label | escape -}}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>
```

つまり、`{% section 'feature-row' %}`のコードを記述することでsectionフォルダ配下のfeature-row.liquidを呼び出したことになります。

この記述をして保存すると、Shopifyの管理画面のページからpege.exampleが呼び出せるようになります。

#管理画面からpage.exampleを呼び出し
それでは実際に管理画面からpage.exampleを呼び出してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/eba10f4f-f5c3-db62-8341-ab1e917a2e9c.png)

ちなみに、この管理画面で設定するTitleとコンテンツは。page.example.liquidのファイル上でそれぞれ`page.title`や`page.content`で呼び出すことができます。

ページを作成すると、以下のように`feature-row`セクションが呼ばれていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c88f6f5c-509e-3653-6501-d0ab81dd3606.png)


#補足・同一テンプレートで複数のページを作成した場合のセクションの挙動
補足ですが、同一テンプレートで複数のページを作成した場合の挙動をまとめていきます。

結論から書くと、たとえ複数のテンプレートを作成したとしても、セクションは共通になります。

具体的には、例えば`ぽこまる`ページと`たいち`ページを作成したとします。

ぽろまるページに画像を設定しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4f700645-6806-6aa7-ca90-4cd01d5d95c3.png)

この状態で、page.example.liquidから`たいち`ページを作ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/da91b616-357f-a8dc-36da-a9993bad8e85.png)

この状態で、たいちページをページカスタマイズから参照してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/19f7bd17-3509-d118-4061-c92c3435d2d5.png)

既に、画像が差し込まれています。

つまり、page.example.liquidから作成した全てのページで、同一のセクションを保有していることが分かります。

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

お付き合い頂きありがとうございました。

# 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