【Shopify】settingsのtype一覧と設定方法
はじめに
この記事の概要
こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はShopifyのテーマで動的なSectionを作成するために使われる、Schemaのsettingsの項目とその設定方法について紹介します！
Shopifyで独自のテーマやDawnなどの既存テーマをカスタマイズする際に独自のSectionファイルを作成してテーマを構築していく流れが一般的ですが、そのSectionファイルにSchemaを設定することでそのSectionを管理画面で動的に変更できます。
動的なSectionを作成することで管理画面のテーマカスタマイズからテキストの変更や画像の差し替えができるようになるため、テーマのカスタマイズ性が向上します。
是非参考にしてください！
対象読者
- Shopifyでテーマをカスタマイズしている方
- Shopifyで動的なセクションを作成したい方
Schemaタグについて
Schemaタグはテーマディレクトリ内のSectionファイル内に記述します。Schemaタグを設置すると、そのSectionがShopifyの管理画面のテーマカスタマイズで編集が可能になります。 Schemaタグ内のsettingsをあれこれ設定することでSectionのテキストや画像を管理画面から動的に変更できるようになります。
├ assets
├ config
├ layout
├ locales
├ sections
│ └ new-section.liquid (sections内のファイルにSchemaを記述する)
└ presets{% schema %}
{
"name": "新しいセクション",
"settings": [],
"presets": [
{
"name": "新しいセクション"
}
]
}
{% endschema %}name: Sectionの名前settings: 設定項目を定義する配列presets.name: 管理画面のカスタマイズに表示される名前
Section schema
Detailed breakdown of section schema settings and attributes.
shopify.devsettingsの設定方法
settingsの設置はとても簡単です。一例としてcheckboxを用いてSP画面の際に文字の表示切り替えができるようにしてみたいと思います。ちなみにこのcheckboxがsettingsのtypeと言われるもので全部で30種類ほどあります。
"settings": [
{
"type": "checkbox",
"id": "hide_in_sp",
"label": "SP時に非表示にする",
"default": true
}
]type: 入力タイプ（checkbox、text、selectなど）id: このSectionファイル内で一意の識別子label: テーマカスタマイズに表示される文言default: デフォルト値
Schemaタグ内にこの部分を追記しました。
checkboxを使うので"type": "checkbox"にしています。
{%- style -%}
.text-{{ section.id }} {
padding: 40px 120px;
}
@media screen and (max-width: 767px) {
.invisible-text-{{ section.id }} {
display: none;
}
}
{%- endstyle -%}
<div class="text-{{ section.id }}">
<p>通常のテキストです。</p>
<p class="{% if section.settings.hide_in_sp %}invisible-text-{{ section.id }}{% endif %}">
SP画面の際に表示されないテキストです。
</p>
</div>
{% schema %}
{
"name": "新しいセクション",
"settings": [
{
"type": "checkbox",
"id": "hide_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
About input setting types.
shopify.devcheckbox
表示切り替えなどで使用します。
{
"type": "checkbox",
"id": "hide_in_sp",
"label": "SP時に非表示にする",
"default": true
}number
商品やブログ投稿の表示件数の設定などで使用します。
{
"type": "number",
"id": "products_per_page",
"label": "商品表示件数",
"default": 20
}radio
テキストの文字揃えの設定などで使用します。
{
"type": "radio",
"id": "text_alignment",
"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
複数の選択肢から1つを選ばせる場合に使用します。
{
"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": "background_color",
"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もたくさんあるので、興味のある方は調べてみてください！
この記事を書いた人
