見出し画像

Shopifyテーマ Chapter9 セクションとブロック

Yuya M

Shopityテーマにおける｢セクション｣はページを構成するカスタマイズ可能な要素です。セクションはスニペットと似ていますが、セクションはShopifyのオンラインストアエディタでユーザーがコード編集を行うことなくカスタマイズを行うことができる仕組みになっています。

*オンラインストアエディタと英語では呼ばれていますが、日本語ではテーマエディタと呼ばれてるようです。

下記はセクションの特徴の概要です。

  • セクションはオンラインストアエディタでテンプレートに追加することができます。

  • セクションは{% section 'section_name' %}でテンプレートファイルに静的に追加することができます。

  • またpresetのスキーマを用意しておけばホームページ(index)にユーザーが自由に追加することができます。

  • OS2.0ではテンプレートファイルをJSON形式のテンプレートで作成することによりホームページ(index)以外にも自由にセクションを追加できるようになりました。

  • セクションでは{% schema %}・{% javascript %}・{% stylesheet %}のタグが使えます。

  • Liquidタグの使用によりセクションに付随したCSSを加えることができますが、デフォルトではtheme.liquidで読み込んだCSSファイルも反映されることになります。

  • セクションは特定のinputタイプを含めることができます。

Shopifyテーマの静的セクションの作り方

セクションを新規作成

新しいセクションをテーマファイルエディターで作ると自動的に

  • {% schema %}

  • {% css %}

  • {% javascript %}

のタグが下記の例のように挿入されます。

{% schema %}
{
  "name": "Section name",
  "settings" :[]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Schemaタグ内の情報によってShopifyストア管理画面でどのようにコンテンツを読み込ませるかを設定することができます。
Schemaタグ内はJSON形式で記述します。

CSSとJavascriptタグはセクション固有のスタイルや機能を加えるのに使うことができます。ただしデフォルトではセクションはテーマのメインCSSを読み込みます。

セクションにコンテンツを加える

セクションに実際のコンテンツを加えるにはHTMLとLiquidタグを組み合わせて記述します。
{{ section.settings.name}}のLiquidタグによりアウトプットを行います。Schema内で指定され、オンラインストアエディタ内でユーザーが設定したデータのコンテンツアウトプットされます。

下記はの例は、HTMLとLiquidタグを組み合わせ、見出し1とテキストボックスを加えたものです。

<div>
  <h1>{{ section.settings.text }}</h1>
  <p>{{ section.settings.text-box }}</p>
</div>

{% schema %}
{
  "name": "Text Box",
  "settings": [
    {
      "id": "text",
      "type": "text",
      "label": "見出し1",
      "default": "Title"
    },
    {
      "id": "text",
      "type": "richtext",
      "label": "文章を追加",
      "default": "サンプル文章"
    }
  ]
}
{% endschema %}

上記の例ではシンプルなテキストを見出し1のタグの中とパラグラフタグの中に入れてアウトプットさせただけのものですが下記のようなタイプも使いアウトプットさせることが可能です。

  • image_picker (画像を選ぶ)

  • radio (ラジオボタン形式の選択)

  • video_url (ビデオのリンク)

  • font (タイプフェイスの選択)

Schemaタグの中にあるidはLiquidタグを指定(オブジェクト名)するもので、typeはどのようなアウトプットのタイプなのかを指定するものです。
またlabelはオンラインストアエディタ画面で表示されるラベルを示すものです。

defaultは、ユーザーがオンラインストアエディタでユーザーがなにも設定を行わない場合デフォルトでアサインされる値です。

Liquidテンプレートファイル上で特定のセクションを加えるには{% section ''name_of_section' %} のようにセクションの名前をLiquidタグに挿入します。スニペットを加える時と同じような感じです。

OS2.0

OS2.0ではテンプレートJSONで構成されていることがあります。JSON内にセクションを指定することもできますが、presetsが予めSchemaタグ内に彫っていされているセクションはオンラインストアエディタ上で自由に追加できるようになりました。(ホームページに限らず)。
presetsを設定する動的なセクションは後述。

Shopifyテーマの動的なセクションの作り方

静的なセクションと違い動的なセクションはオンラインストアエディタ上でユーザーが自由にセクションを追加し順序をを変えることができるものです。
*静的なセクションはヘッダーやフッターなど自由に動かすことを想定していないコンポーネントに向いています。

またOS2.0ではテンプレートファイルをJSON形式にすれば、ホームページ(index.liquid)以外のテンプレートでも自由にセクションを追加できるようになり、より柔軟なレイアウトを作ることができるようになりました。

セクションファイルを動的なものにするにはschemaタグの中にpresetsを記述しなければなりません。presetsはnameとcategoryのプロパティが必須になります。

下記のようにschemaタグ内にpresetsを記述します。

{% schema %}
{
  "name": "Call to Action", //セクションの名前
  "settings": [],
  "presets": [
    {
      "name": "Call to Action", // プリセットのの名前
      "category": "CTA button" 
    }
  ]
}
{% endschema %}

このようなpresetsをschemaタグ内に記入するとテーマ内で自動的に動的なセクションとして認識されるようになります。そしてホームページのテンプレート(index page)内で自由に追加することができます。

上記のコードをセクションフォルダに新規ファイルで追加し、オンラインストアストアエディタでカスタマイズを行ってみてください。
先程名前をつけたCall to Actionが追加できるようになっていると思います。
またセクションは自由に順番を入れ替えることができます。

OS2.0

OS2.0でテンプレートファイルをJSONファイルにしておけばホームページ(index.liquid)以外のページにも自由にセクションを追加できるようになります。

セクションのブロック

セクション内におけるブロックはオンラインストアストアエディタ上のカスタマイズで自由に追加できるコンテンツや設定要素です。またブロックはセクション内で自由に配置を変えることもできます。
さながらブロックはセクションの中で追加できる"小さなセクション"みたいなものです。

このブロック要素には画像・動画・カスタムテキストやその他のインプット設定が使用できます。下記はその一覧です。

ブロック使えるインプットの種類

{% schema %}内でのブロック要素を追加するには下記のように記述します。
ブロック内は配列Arrayとして記述し、必ずnameとtypeを設定しなければなりません。ブロックのsettingsはsettings_schema.jsonと同じフォーマットを使用します。

{% schema %}
  {
    "name": "Section name",
    "settings": [],
    "blocks": [
      {
        "type": "text",
        "name": "テキスト",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "タイトル"
          }
        ]
      },
      {
        "type": "newsletter",
        "name": "ニュースレター",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "ニュースレタータイトル"
          },
          {
            "id": "news_letter_description",
            "type": "richtext",
            "label": "ニュースレターの説明"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "ブロックのサンプル",
        "category": "Text"
      }
    ]
  }
{% endschema %}

また追加できるブロックの最大数を指定したり、presets内にてセクションを追加したときデフォルトで追加されているブロックを設定することもできます。
詳しくはこちら。

2種類のブロックの追加
ニュースレターのブロックの入力

ブロックのschemaを作ったら、Liquidループコード {% for block in section.blocks %}を使ってレンダリングさせます。 id はschema内で設定されたJSONに基づいたものです。例えばbg_imageというidをアウトプットさせるには {{ block.settings.bg_image }} という形で記述します。
詳しくは次のcase/whenをつかった例を見てください。

case/whenをつかったブロックのコントロール

Liquidファイル内で case/when のコントロールフロータグを使うことによりどのタイプのブロックを出力させるかを選択できます。
下記の例ではニュースレターのブロックかテキストのブロックかを選んで配置することができるようになります。

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'text' %}
      <div class=“grid__item”>
        <h3>{{ block.settings.title }}</h3>
      </div>
    {% when 'newsletter' %}
      <h2>ニュースレター</h2>
      <div class=“grid__item”>
        <h3>{{ block.settings.title }}</h3>
        <p>{{ block.settings.news_letter_description }}</p>
          {% render ‘newsletter-form’ %}
     </div>
    {% endcase %}
{% endfor %}
ブロックを追加に応じてHTML要素がレンダリング

ブロックやセクションを使うにあたって

このチャプターではセクションの作り方・ブロック要素の追加の仕方を紹介しました。これらを駆使すればよりストアのデザインが柔軟なものになります。
ただし、複数のブロックやとくに画像や動画などの要素を多く含むとページの動作や読み込み速度に影響がでて、逆に快適な購入体験・ユーザー体験を阻害することもあるので注意が必要です。


この記事が気に入ったらサポートをしてみませんか？