Web活用術やIT業界で稼ぐノウハウを発信

テーマ作成に必須の入力タイプリスト

テーマやセクションなどで使用可能なタイプの種類を紹介します。これらをうまく使うことで、テーマを使用するショップオーナーに対して、テーマのカスタマイズを楽にすることができます。

基本的な入力タイプ

checkbox

表示やレイアウトのオン/オフを切り替えるためなどにチェックボックスを表示します。

number

1つの数値入力欄を表示します。

radio

ラジオボタンによって、optionによって、複数から1つを選択する欄を表示します。

range

スライダーによって数値の範囲を指定する欄を表示します。最小値(min)最大値(max)ステップ(step)単位(unit)が指定できます。

select

ドロップダウンでoptionによって、複数から1つを選択する欄を表示します。

text

1行のテキスト入力欄を表示します。

textarea

複数行のテキスト入力欄を表示します。

特殊な入力タイプ

article

記事選択のための入力欄が出力されます。

blog

ブログ記事を選択する入力欄が出力されます。

collection

コレクション(商品カテゴリ)を選択するフィールドが出力されます。

color

カラー選択フィールドが出力されます。ボディ・テキストの色など、さまざまなテーマ要素の色の選択を取り込むことができます。

color_background

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

font_picker

Shopifyフォントライブラリからフォントが自動的に入力されたフォント選択欄を出力します。このライブラリには、ウェブセーフフォント、Google Fontsのセレクション、Monotype社のライセンスを受けたフォントが含まれています。

html

HTMLを記述可能な複数行のテキスト入力欄を表示します。

image_picker

画像選択ボタンを出力します。ロゴ、ファビコン、スライドショー画像などの画像を選択するために使用できます。また、新しい画像をアップロードするオプションがあります。

link_list

リンクのための、メニューを選択する欄を出力します。フッター・リンクに使用するメニューなど、メニューの選択をすることができます。

liquid

HTMLや一部のLiquidマークアップを受け付ける複数行のテキスト入力欄を出力します。リキッド設定を使って、特定のタイプのアプリをテーマに統合するために必要なコードを追加することなどができます。

page

ページ選択欄が表示されます。

product

商品選択欄が出力されます。これらのフィールドを使用して、トップページに掲載する製品などの選択をさせることができます。

richtext

以下の基本的なフォーマットオプションを持つ複数行のテキスト入力欄が出力されます。

・太字
・斜体文字
・下線
・リンク
・段落

url

外部URLや相対パスを手動で入力できるURL入力欄が出力されます。

video_url

YouTubeやVimeoから動画を表示するためのURL入力欄を使用します。