← inaro.devShopify学習ツール
09-03

設定タイプ②:メディア・リソース・色・リンク

リソースピッカー系の設定が返すオブジェクトを理解し、画像・商品・コレクション・色・フォントを設定から取り出せる

最終確認: 2026-09

解説

受託の現場でなぜ必要か: この回では、画像・商品・コレクション・色・フォントなどの設定が返す値の形を知り、設定から安全に取り出せるようになります。
受託では「画像を選んだのに表示されない」「商品を選ばないとページが壊れる」という事故を、この回の2つの決まりで防げます。

リソース系の設定は、文字列ではなくオブジェクトが返る

image_pickerはimage、productはproduct、collectionはcollectionのオブジェクト(値のまとまり)が返ります。
product_list / collection_listは配列で、limitは最大50です。
blog / article / page / link_list / metaobject / metaobject_listも同じくオブジェクトです。
ハンドルの文字列ではありません。
未設定のときはnilになるので、必ず空チェックをしてから使います。

リンク・動画・フォントの受け取り方

urlは内部・外部のリンクで、文字列が返ります。
videoはストアにアップロードした動画で、video_tagで出します。
video_urlはYouTubeやVimeoのURLで、acceptで許可する配信元を指定します。
font_pickerはfontオブジェクトを返し、defaultが必須です。
font_face@font-faceを出力し、font_modifyで太さや斜体の派生を作ります。

色の設定は4系統ある

colorは単色で、colorオブジェクトが返ります。
color_backgroundはグラデーションなどのCSS背景値で、文字列です。
color_schemesettings_schemacolor_scheme_groupと対になる配色セットです。
color_paletteは2026-06に追加された方式です(Horizon 4.0が採用)。
テーマ全体で1つの色グリッドを編集し、各colordefaultがパレットを参照します。

発展:運用者がストアを壊せる設定

htmlは生のHTMLをそのまま出す設定です。
liquidはLiquidをその場で実行する設定で、50KBまで、sectionsettingsは参照できません。
どちらも運用者がストアを壊せるので、受託では原則使いません。
必要ならinfoに警告を書きます。

ステップ1 / 2

ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。