📁

【Shopify.dev和訳】Themes/Architecture/Settings/Input settings

2021/09/18に公開約27,600字

この記事について

この記事は、Themes/Architecture/Settings/Input settingsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

入力設定

入力設定は値を保持することができ、マーチャントが設定することができます。

入力設定は通常、標準的な属性で構成されており、2 つのカテゴリがあります。

標準属性

以下は、入力設定の標準的な属性です。ただし、入力タイプによっては、追加の属性があったり、適用されない属性があったりします。

属性 説明 必須
type 設定タイプ。基本的な入力設定タイプまたは特殊な入力設定タイプのいずれかです。 はい
id 設定値へのアクセスに使用される設定 ID。 はい
label テーマエディターに表示される設定ラベル。 はい
default 設定のデフォルト値。 いいえ
info 設定に関する情報テキストのオプションです。 いいえ

基本的な入力設定

基本的な入力設定の種類を以下に示します。

checkbox

checkbox タイプの設定では、チェックボックスフィールドが出力されます。これらのフィールドは、アナウンスバーを表示するかどうかなど、機能のオン/オフを切り替えるために使用できます。

例えば、以下の設定では、次のような出力が得られます。

設定

Setting
{
  "type": "checkbox",
  "id": "show_announcement",
  "label": "Show announcement",
  "default": true
}

出力

checkbox タイプの設定値にアクセスすると、データはBooleanとして返されます。

number

number 型の設定は、1 つの数値フィールドを出力します。入力設定の標準的な属性に加えて、 number タイプの設定には以下の属性があります。

属性 説明 必須
placeholder 入力のプレースホルダー値 いいえ

これらのフィールドを使用して、コレクションページで 1 ページあたりに表示する商品の数など、変化する数値を把握することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "number",
  "id": "products_per_page",
  "label": "Products per page"
  "default": 20
}

出力

number 型の設定値にアクセスした場合、データは以下のいずれかで返されます。

  • 数字
  • 何も入力されていない場合はnilが返されます。

radio

radio タイプの設定は、ラジオオプションフィールドを出力します。 radio タイプの設定には、入力設定の標準的な属性に加えて、 valuelabel の定義の配列を受け入れる必須の options 属性があります。

これらのフィールドを使用して、ヘッダーロゴの配置など、複数のオプションの選択を把握することができます。

例えば、以下の設定では、次のような出力が得られます。

Setting
{
  "type": "radio",
  "id": "logo_aligment",
  "label": "Logo alignment",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "centered",
      "label": "Centered"
    }
  ],
  "default": "left"
}

出力

radio タイプの設定値にアクセスすると、データはStringとして返されます。

range

range 型の設定は、レンジスライダフィールドを出力します。入力設定の標準的な属性に加えて、 range タイプの設定には以下の属性があります。

属性 説明 必須
min 入力の最小値 はい
max 入力値の最大値 はい
step スライダのステップ間の増分サイズ はい
unit 入力の単位。例えば、フォントサイズのスライダーに px を設定することができます。 いいえ

これらのフィールドを使って、フォントサイズなどの変化する数値を入力することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "Font size",
  "default": 16
}

出力

range タイプの設定値にアクセスすると、データはNumberとして返されます。

select

select タイプの設定は、ドロップダウンのセレクタフィールドを出力します。 select タイプの設定には、入力設定の標準的な属性に加えて、以下の属性があります。

属性 説明 必須
options ドロップダウンの各オプションの value / label の定義の配列を取ります。 はい
group 各オプションに追加できるオプション属性で、ドロップダウンにオプション グループを作成できます。 いいえ

これらのフィールドを使用して、スライドショーのテキストの垂直方向の配置など、複数のオプションの選択を取り込むことができます。

たとえば、以下の設定では、次のような出力が得られます。

Setting
{
  "type": "select",
  "id": "vertical_alignment",
  "label": "Vertical alignment",
  "options": [
    {
      "value": "top",
      "label": "Top"
    },
    {
      "value": "middle",
      "label": "Middle"
    },
    {
      "value": "bottom",
      "label": "Bottom"
    }
  ],
  "default": "middle"
}

出力

select タイプの設定値にアクセスすると、データはStringとして返されます。

text

text 型の設定は、1 行のテキスト・フィールドを出力します。入力設定の標準的な属性に加えて、 text タイプの設定には以下の属性があります。

属性 説明 必須
placeholder 入力のためのプレースホルダー値 いいえ

これらのフィールドを使って、タイトルなどの短い文字列を取り込むことができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "text",
  "id": "footer_linklist_title",
  "label": "Heading",
  "default": "Quick links"
}

出力

text タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

textarea

textarea タイプの設定は、複数行のテキストフィールドを出力します。入力設定の標準的な属性に加えて、textarea タイプの設定には以下の属性があります。

属性 説明 必須
placeholder 入力のプレースホルダー値。 いいえ

これらのフィールドを使用して、メッセージなどの大きなテキストブロックを取り込むことができます。

例えば、以下の設定では、次のような出力が生成されます。

Setting
{
  "type": "textarea",
  "id": "home_welcome_message",
  "label": "Welcome message",
  "default": "Welcome to my shop!"
}

出力

textarea タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

特殊な入力設定

特殊な入力設定の種類は以下のとおりです。

article

article タイプの設定は、ストアで利用可能な記事が自動的に入力される記事ピッカー・フィールドを出力します。これらのフィールドを使用して、ホームページに掲載する記事などの記事選択をキャプチャすることができます。

例えば、次の設定は次のような出力を生成します。

Setting
{
  "type": "article",
  "id": "featured_article",
  "label": "Featured article"
}

出力

article タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

  • 記事オブジェクト
  • 選択されていない場合、選択項目が表示されていない場合、または選択項目が存在しない場合は blank になります。

blog

blog タイプの設定では、ストアで利用可能なブログが自動的に入力されたブログピッカーフィールドが出力されます。これらのフィールドを使って、サイドバーに表示するブログなどを選択することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "blog",
  "id": "featured_blog",
  "label": "Featured blog"
}

出力

blog タイプの設定値にアクセスすると、以下のいずれかのデータが返されます。

collection

collection タイプの設定では、ストアで利用可能なコレクションが自動的に入力されるコレクションピッカーフィールドが出力されます。これらのフィールドを使用して、ホームページで商品を紹介するためのコレクションなど、コレクションの選択をキャプチャすることができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "collection",
  "id": "featured_collection",
  "label": "Featured collection"
}

出力

collection タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

color

color タイプの設定は、カラーピッカーフィールドを出力します。これらのフィールドを使用して、ボディのテキストカラーなど、さまざまなテーマ要素のカラー選択を取り込むことができます。

たとえば、以下の設定では、次のような出力が得られます。

Setting
{
  "type": "color",
  "id": "body_text",
  "label": "Body text",
  "default": "#000000"
}

出力

color タイプの設定値にアクセスすると、以下のいずれかのデータが返されます。

color_background

color_background タイプの設定は、CSS backgroundプロパティを入力するためのテキストフィールドを出力します。これらのフィールドを使用して、ストアの背景など、さまざまなテーマ要素の背景設定を取り込むことができます。

例えば、以下の設定では、以下のような出力になります。

Setting
{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "linear-gradient(#ffffff, #000000)"
}

出力

color_background 型の設定値にアクセスすると、データは以下のいずれかで返されます。

  • 文字列
  • 何も入力されていない場合は nil

font_picker

font_picker タイプの設定は、Shopify フォントライブラリからフォントが自動的に入力されたフォントピッカーフィールドを出力します。このライブラリには、ウェブセーフフォント、Google Fonts、Monotype 社のフォントが含まれています。

これらのフィールドを使って、基本的な見出しフォントなど、さまざまなテーマ要素のフォント選択を取り込むことができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading font",
  "default": "helvetica_n4"
}

出力

font_picker のタイプ設定の値にアクセスすると、データはフォントオブジェクトとして返されます。

html

html タイプの設定は、HTML マークアップを受け付ける複数行のテキストフィールドを出力します。入力設定の標準的な属性に加えて、html タイプの設定には以下の属性があります。

属性 説明 必須
placeholder 入力のプレースホルダー値 いいえ

これらのフィールドを使用して、動画の埋め込みなど、HTML コンテンツのカスタムブロックを取り込むことができます。

例えば、以下の設定では、次のような出力が生成されます。

Setting
{
  "type": "html",
  "id": "video_embed",
  "label": "Video embed"
}

出力

以下の HTML タグが自動的に削除されます。

  • <html>
  • <head>
  • <body>

html タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

  • 入力された内容を含むString
  • 何も入力されていない場合は、EmptyDropが返されます。

image_picker

image_picker タイプの設定は、Shopify admin のFilesセクションから利用可能な画像が自動的に入力され、新しい画像をアップロードするオプションを持つイメージピッカーフィールドを出力します。これらのフィールドを使って、ロゴ、ファビコン、スライドショーの画像などの画像を選択することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "image_picker",
  "id": "logo",
  "label": "Logo"
}

出力

image_picker タイプの設定値にアクセスすると、以下のいずれかのデータが返されます。

link_list タイプの設定は、ストアで利用可能なメニューが自動的に入力されたメニューピッカーフィールドを出力します。これらのフィールドを使用して、フッター・リンクに使用するメニューなど、メニューの選択を把握することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "link_list",
  "id": "footer_menu",
  "label": "Footer menu"
}

出力

link_list 型の設定値にアクセスすると、以下のいずれかの形式でデータが返されます。

liquid

liquid タイプの設定は、HTML や限られたLiquid マークアップを受け付ける複数行のテキストフィールドを出力します。これらのフィールドは、商品固有のメッセージなど、HTML と Liquid コンテンツのカスタムブロックをキャプチャするために使用できます。マーチャントは、liquid タイプの設定を使って、特定のタイプのアプリをテーマに統合するために必要なコードを追加することもできます。

例えば、以下の設定では、次のような出力が生成されます。

Setting
{
  "type": "liquid",
  "id": "battery_message",
  "label": "Battery message",
  "default": "This product can be shipped by ground or air."
}

出力

liquid タイプの設定値にアクセスすると、以下のいずれかのデータが返されます。

  • 入力された内容を含むString
  • 何も入力されていない場合は、EmptyDropが返されます。

制限事項

liquid 型の設定は、以下の liquid オブジェクト/タグにアクセスできません。

ただし、liquid 設定は以下にアクセスできます。

コンテンツに存在しない、または空の Liquid タグが含まれている場合、それらは空の文字列として表示されます。例えば、以下の設定では以下のような出力になります。

Setting
{
  "type": "liquid",
  "id": "message",
  "label": "Message",
  "default": "Hello , welcome to our shop."
}

出力

Setting
Hello , welcome to our shop.

page

page タイプの設定では、ストアで利用可能なページが自動的に入力されるページピッカーフィールドが出力されます。これらのフィールドを使用して、サイズチャート表示でコンテンツをフィーチャーするページなど、ページの選択をキャプチャすることができます。

たとえば、以下の設定では、次のような出力が生成されます。

Setting
{
  "type": "page",
  "id": "size_chart_content",
  "label": "Size chart content"
}

出力

page タイプの設定値にアクセスすると、データは以下のいずれかで返されます。

  • ページオブジェクト
  • blank は、選択が行われていないか、選択が表示されていないか、選択が存在しなくなった場合です。

product

product タイプの設定では、ストアで利用可能な商品が自動的に入力される商品ピッカーフィールドが出力されます。これらのフィールドを使用して、ホームページに掲載する商品など、商品の選択を把握することができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "product",
  "id": "featured_product",
  "label": "Featured product"
}

出力

product タイプ設定の値にアクセスすると、以下のいずれかのデータが返されます。

  • 商品オブジェクト
  • 選択されていない場合、選択項目が表示されていない場合、または選択項目が存在しない場合は blank となります。

richtext

richtext タイプの設定は、以下の基本的なフォーマットオプションを持つ複数行のテキストフィールドを出力します。

  • Bold
  • Italic
  • Underline
  • Link
  • Paragraph

これらのフィールドを使用して、ホームページ上のブランド紹介コンテンツなど、フォーマットされたテキストコンテンツを取り込むことができます。

例えば、以下の設定では以下のような出力が得られます。

Setting
{
  "type": "richtext",
  "id": "paragrah",
  "label": "Paragraph"
}

出力

richtext 型の設定値にアクセスすると、以下のいずれかのデータが返されます。

  • 入力された内容を含むString
  • 何も入力されていない場合は、EmptyDrop

default

default 属性は必須ではありません。ただし、使用する場合には、コンテンツを <p> タグで囲む必要があります。

また、親となる <p> タグの中には、以下の HTML タグがサポートされています。

  • <p>
  • <br>
  • <strong>
  • <b>
  • <em>
  • <i>
  • <u>
  • <span>
  • <a>

url

url タイプの設定は、外部 URL や相対パスを手動で入力できる URL 入力フィールドを出力します。また、ショップで利用可能な以下のリソースが自動的に入力されるピッカーも備えています。

  • 記事
  • ブログ
  • コレクション
  • ページ
  • 製品

これらのフィールドを使用して、スライドショーボタンのリンクに使用する URL など、選択した URL をキャプチャすることができます。

例えば、以下の設定では、以下のような出力が得られます。

Setting
{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}

出力

url タイプの設定値にアクセスすると、以下のいずれかのデータが返されます。

  • 選択された URL を含む文字列
  • 何も入力されていない場合は、nilが返されます。

video_url

video_url タイプの設定は、URL 入力フィールドを出力します。video_url タイプの設定には、入力設定の標準的な属性に加えて、次の属性があります。

属性 説明 必須
accept 受け入れ可能なビデオプロバイダーの配列を受け取ります。有効な値は、 youtubevimeo 、またはその両方です。 はい
placeholder 入力のプレースホルダー値です。 いいえ

これらのフィールドは、YouTube や Vimeo から動画の URL を取得するために使用します。例えば、商品説明に表示する静的な動画の URL などです。

例えば、以下の設定では、次のような出力が得られます。

Setting
{
  "type": "video_url",
  "id": "product_description_video",
  "label": "Product description video",
  "accept": [
    "youtube",
    "vimeo"
  ]
}

出力

video_url 型の設定値にアクセスすると、以下のいずれかのデータが返されます。

  • 入力された URL を含むString
  • 何も入力されていない場合は nil が返されます。

さらに、ビデオの idtype (YouTube または Vimeo)へのアクセスもあります。

例えば、このビデオを上記の設定で使用する場合、以下の liquid では以下のような出力が得られます。

Setting
ID: {{ settings.product_description_video.id }}
Type: {{ settings.product_description_video.type }}

出力

ID: _9VUPq3SxOc
Type: youtube

リンクの作成

info 設定属性には、以下のパターンでリンクを追加することができます。

[リンクテキスト](リンクURL)

例えば、以下の設定では、以下のような出力が得られます。

Setting
{
  "type": "checkbox",
  "id": "enable_payment_button",
  "label": "Show dynamic checkout button",
  "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/online-store/themes/dynamic-checkout)",
  "default": true
},

出力

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます