「Shopifyのカスタマイズ」オリジナルのセクションを追加する

CSSの追加だけではちょっと足りない

CSSを追加することによって、既存のセクションに装飾はできますが、「ここだけ！」とか「ここにオリジナルのコンテンツを入れたい！」となるとCSSだけでは足りません。。。

オリジナルのセクションの追加が必要になります。

セクションの種類は2種類

静的セクションと動的セクションの2種類があります。

静的セクションとは、テンプレートにあるヘッダーやフッターなどが該当します。

位置をストアのカスタマイズの中で入れ替えることはできません。

また、静的セクションは複数のテンプレートに含めることができますが、そのセクションの内容は1つしかありません。 静的セクションの内容を1つの場所で変更すると、その変更は、そのセクションが含まれている他のすべての場所に適用されます。

ページ下にコンバージョンボタンを入れたい、またお問い合わせの情報など、共通の情報をサイト内に複数設置したい場合に便利です。

動的セクションとは、テーマのテンプレート、ホームページに追加できるセクションです。

位置をストアのカスタマイズの中で入れ替えることができますし、追加、削除も可能です。

同じタイプのセクジョンを複数入れることができ、内容もそれぞれ変えることができます。

最大25の動的セクションをホームページに追加できます。

静的なセクションを追加する

セクションを追加するには、Liquidを使ってschemeを定義していきます。

schemeの書き方：公式サイト Using theme sections

ストアの管理画面「オンラインストア」から該当のテーマのアクションより「コードを編集する」を選択します。
左側に表示されるファイルのツリーの中から「新しいsectionを追加する」をクリックして名前をつけてセクションを作成します。

自動的にスキーマのタグが作成されます。この中にschemeを記載していきます。

表示したい完成イメージはこんな感じ。

ファイルの一番上に、表示のためのhtmlを記載します。

<div id="add-bnr-area" class="ImgTextBlock">
  <div class="ImgTextBlock__text">
    <p>タイトル</p>
    <!-- /.ImgTextBlock__text -->
  </div>
  <div class="ImgTextBlock__img">
    <a href="#" target="_blank"><img src="https://placehold.jp/500x150.png" alt=""></a>
    <!-- /.ImgTextBlock__img -->
  </div>
  <!-- /.ImgTextBlock -->
</div>

{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

次にschemeを記載します。
name = セクションの名前
settingsの中に、必要な項目を記載してきます。

今回必要なのは、タイトルと画像とリンクです。

settingsの書き方：公式サイト Configuring theme settings

※settingsのIDは、設定の中でユニークである必要がありますが、 すべてのセクションでユニークである必要はありません。

{% schema %}
{
"name": "ページ下のバナー",
  "settings": [
  {
  "id": "text",
  "type": "textarea",
  "label": "Text",
  "placeholder": "タイトル"
  },
  {
  "id": "img",
  "type": "image_picker",
  "label": "Image"
  },
  {
  "id": "url",
  "type": "text",
  "label": "Url"
  }
  ]
}
{% endschema %}

sectionオブジェクトを介して設定値にアクセスできます。
これを使って最初に記載したhtmlの中身をliquidを使って部分的に変更します。
sectionオブジェクト：公式サイト The section object

<div id="add-bnr-area" class="ImgTextBlock">
  <div class="ImgTextBlock__text">
    {% if section.settings.text != blank %}
    <p>{{ section.settings.text }}</p>
    {% else %}

    {% endif %}
    <!-- /.ImgTextBlock__text -->
  </div>
  <div class="ImgTextBlock__img">
  {% if section.settings.img != blank %}
    <a href="{{ section.settings.url}}" target="_blank"><img src="{{ section.settings.img | img_url: 'master'}}" alt=""></a>
    {% else %}
    <a href="#" target="_blank"><img src="https://placehold.jp/500x150.png" alt=""></a>
    {% endif %}
    <!-- /.ImgTextBlock__img -->
  </div>
  <!-- /.ImgTextBlock -->
</div>

{% if section.settings.text != blank %} liquidのif文を使ってやっていることは、テキストの項目が空白じゃなければパラグラフタグとテキストを表示。
空白ならなにも表示しないとしています。

画像の箇所も同じで、画像の指定がなければダミー画像を表示するとしています。

最後に静的セクションを入れたいテンプレートにセクションを追加します。

今回は、Templates/page.liquid のコンテンツの下に追加しました。
{{ page.content }}の下に{% section "add-sec01" %}を入れています。

[略…]
    {{ page.content }}
    {% section "add-sec01" %}

ページのカスタマイズ画面にセクションが追加されました。

静的なセクションの追加

動的セクションの作り方は、静的セクションとほぼ同じです。
新しくファイルを作り、Liquidを使ってschemeを定義していきます。

動的セクションの場合、shemeにpresetsを追加する必要があります。
これにより、Shopifyは自動で動的セクションであることを認識できます。
presetsにはnameとcategoryが必要になります。
（その代わりにテンプレートにセクションを追加する作業は不要です）

<div id="add-sec02" class="Staff">
  {%- if section.settings.title != blank -%}
  <p>{{ section.settings.title }}</p>
  {%- else -%}
  <p>スタッフ紹介</p>
  {%- endif -%}
  <ul>
    {% if section.blocks.size > 0 %}
    {% for block in section.blocks %}
    <li><span><img src="{{ block.settings.img | img_url: '150x150'}}" alt=""></span><span>{{ block.settings.name }}</span></li>
    {% endfor %}
    {%- else -%}
    <li><span><img src="https://placehold.jp/150x150.png" alt=""></span><span>山田</span></li>
    <li><span><img src="https://placehold.jp/150x150.png" alt=""></span><span>山田</span></li>
    <li><span><img src="https://placehold.jp/150x150.png" alt=""></span><span>山田</span></li>
    {%- endif -%}
  </ul>
  <!-- /.Staff -->
</div>

{% schema %}
{
"name": "スタッフ紹介",
"presets": [
{
"category": "Custom Content",
"name": "スタッフ紹介"
}
],
"settings": [
{
"id": "title",
"type": "textarea",
"label": "タイトル",
"placeholder": "タイトル"
}
],
"blocks": [
{
"type": "select",
"name": "スタッフを追加する",
"settings": [
{
"id": "img",
"type": "image_picker",
"label": "スタッフ画像（正方形）"
},
{
"id": "name",
"type": "textarea",
"label": "スタッフ名"
}
]
}
]
}
{% endschema %}

今回は、schemeにblocksを使って何名でもスタッフを追加できるようにしています。
ファイルの上部にはliquidとhtmlで表示部分を記述。

{% if section.blocks.size > 0 %} でblocksにデータがあるのかを判定して、なければ3カラムの仮画像を表示。
データがあれば、{% for block in section.blocks %} でblocksに入ったデータを表示しています。

ファイルを保存して、ストアのカスタマイズからテンプレートホームページ。
セクションを追加するをクリックします。

スタッフ紹介のタイトルと仮画像が表示されます。

タイトルの変更、スタッフデータを追加できます。

はい、出来上がり～o(・∇・o)(o・∇・)o ヤッタ！
これでコンテンツの自由度がかなりあがりますね♪

あ！！言い忘れてましたが、CSSの追加も必要です！！！