【Shopify】settingsのtype一覧と設定方法

はじめに

この記事の概要

こんにちは

株式会社TOKOSのエンジニアのタクヤです

今回はShopifyのテーマで動的なSectionを作成するために使われる、Schemaのsettingsの項目とその設定方法について紹介します！

Shopifyで独自のテーマやDawnなどの既存テーマをカスタマイズする際に独自のSectionファイルを作成してテーマを構築していく流れが一般的ですが、そのSectionファイルにSchemaを設定することでそのSectionを管理画面で動的に変更することができます。

動的なSectionを作成することで管理画面のテーマカスタマイズからテキストの変更や画像の差し替えができるようになるため、テーマのカスタマイズ性が向上します。

是非参考にしてください！

対象読者

Shopifyでテーマをカスタマイズしている方
Shopifyで動的なセクションを作成したい方

Schemeタグについて

Schemaタグはテーマディレクトリ内のSectionファイル内に記述します。Schemaタグを設置すると、そのSectionがShopifyの管理画面のテーマカスタマイズで編集が可能になります。 Schemaタグ内のsettingsをあれこれ設定することでSectionのテキストや画像を管理画面から動的に変更できるようになります。

├ asetts
├ config
├ layout
├ locales
├ sections
│   └ new-section.liquid (sections内のファイルにSchemaを記述する)
└ presets

{% schema %}
{
  "name": "新しいセクション", ( Sectionの名前 )
  "settings": [
		( ここにsettingsの項目が入ります )
  ],
  "presets": [
    {
      "name": "新しいセクション"　( 管理画面のカスタマイズに表示される名前 )
    }
  ]
}
{% endschema %}

参考

Section schema

Shopify

settingsの設定方法

settingsの設置はとても簡単です。一例としてcheckboxを用いてSP画面の際に文字の表示切り替えができるようにしてみたいと思います。ちなみにこのcheckboxがsettingsのtypeと言われるもので全部で30種類ほどあります。

"settings": [
  {
	  "type": "checkbox", ( 他にもtextやselectがある )
	  "id": "show_in_sp", ( このSectionファイル内で一意のもの )
	  "label": "SP時に表示する", ( テーマカスタマイズに表示される文言 )
	  "default": true ( デフォルト値 )
	}
],

Schemaタグ内にこの部分を追記しました。 checkboxを使うので “type”: “checkbox” にしています。

{%- style -%}
  .text-{{ section.id }} {
    padding: 40px 120px;
  }
@media screen and (max-width: 767px) {
	.invisible-text-{{ section.id }} {  /* cssのclass名は [任意の文字]-{{ sectino.id }}で設定 */
		display: none;
	} 
} 
{%- endstyle -%}
	
<div class="text-{{ section.id }}">
  <p>通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。</p>
  <p class="{% if section.settings.show_in_sp %} invisible-text-{{ section.id }}{% endif %}">SP画面の際に表示されないテキストです。SP画面の際に表示されないテキストです。SP画面の際に表示されないテキストです。SP画面の際に表示されないテキストです。SP画面の際に表示されないテキストです。SP画面の際に表示されないテキストです。</p>
</div>

{% schema %}
  {
    "name": "新しいセクション",
    "settings": [
        {
          "type": "checkbox",
          "id": "show_in_sp",
          "label": "SP時に表示しない",
          "default": true
        }
    ],
    "presets": [
      {
        "name": "新しいセクション"
      }
    ]
  }
{% endschema %}

今回の例では、SP画面の際のテキストの表示切り替えをしたいので、checkboxにチェックが入っている時(trueの時)に cssの display: none; が効くようにしています。Section内でcssのclass名を使用する際は、[任意の文字]-{{ section.id }}で設定してください。

settingsのtype一覧

Schemaタグ内のsettingsにはチェックボックスやテキストなど様々な項目を設定できます。中には使用頻度の低いものもあるので今回は激選したものを紹介します。
全種類知りたい方は公式ドキュメントを参照してください。

参考

Input settings

Shopify

checkbox

表示切り替えなどで使用します。

{
  "type": "checkbox",
  "id": "show_in_sp",
  "label": "SP時に表示する",
  "default": true
}

number

商品やブログ投稿の表示件数の設定などで使用します。

{
  "type": "number",
  "id": "products_per_page",
  "label": "商品表示件数,
  "default": 20
}

radio

テキストの文字揃えの設定などで使用します。

{
  "type": "radio",
  "id": "text_aligment",
  "label": "文字揃え",
  "options": [
    {
      "value": "left",
      "label": "左揃え"
    },
    {
      "value": "center",
      "label": "中央揃え"
    },
		{
      "value": "right",
      "label": "右揃え"
    }
  ],
  "default": "left"
}

range

フォントサイズやpaddingのサイズ設定などで使用します。

{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "フォントサイズ",
  "default": 16
}

select

テキストの文字揃えの設定などで使用します。

{
  "type": "select",
  "id": "vertical_alignment",
  "label": "文字揃え",
  "options": [
    {
      "value": "top",
      "label": "上揃え"
    },
    {
      "value": "middle",
      "label": "中央揃え"
    },
    {
      "value": "bottom",
      "label": "下揃え"
    }
  ],
  "default": "middle"
}

text

テキストを設定する際に使用します。

{
  "type": "text",
  "id": "main_text",
  "label": "メインテキスト",
  "default": "デフォルトテキスト"
}

textarea

長文のテキストを設定する際に使用します。

{
  "type": "textarea",
  "id": "long_sentence",
  "label": "長文テキスト",
  "default": "デフォルトテキスト"
}

blog

ブログの投稿を一覧で表示する際に使用します。

{
  "type": "blog",
  "id": "blog",
  "label": "一覧表示する投稿"
}

collection

商品のコレクションを表示する際に使用します。

{
  "type": "collection",
  "id": "collection",
  "label": "一覧表示するコレクション"
}

color

背景色や文字色を設定する際に使用します。

{
  "type": "color",
  "id": "body_text",
  "label": "背景色",
  "default": "#000000"
}

image_picker

画像を設定する際に使用します。

{
  "type": "image_picker",
  "id": "main_image",
  "label": "画像"
}

video

動画を設定する際に使用します。

{
  "type": "video",
  "id": "main_video",
  "label": "動画"
}

richtext

リッチテキストを設定する際に使用します。

{
  "type": "richtext",
  "id": "paragraph",
  "label": "テキスト"
}

product

1つの商品を選択する際に使用します。

{
  "type": "product",
  "id": "product",
  "label": "商品"
}

url

サイト内のページや外部サイトのリンクを設定する際に使用します。

{
  "type": "url",
  "id": "button_link",
  "label": "ボタンのリンク先"
}

まとめ

今回はShopifyのテーマで動的なSectionを作成するために使われる、Schemaのsettingsの項目とその設定方法について紹介しました。

おさらいをすると、テーマのSectionファイル内にSchemaタグを設定しその中にsettingsを設定することで動的なセクションを作成することができます。

そのsettingsのtypeには30種類ほど種類がありそれを使い分けることで自由度の高い動的なセクションを作成が可能です。

今回紹介しきれなかったsettingsのtypeもたくさんあるので、興味のある方は調べてみてください！