Shopifyで画像が表示されない原因｜image_pickerと設定IDの確認方法

読者

テーマエディターで画像を選択しました。でもページには何も出ません。画像をアップロードし直すべきですか？

木村

まず設定IDを確認しましょう。画像を選ぶ入力欄があっても、Liquidが別の名前を読んでいると画像は表示されません。

読者

image_pickerとimageは、同じ画像設定の名前ではないのですか？

木村

image_pickerは入力欄の種類、imageは今回の設定IDです。実際の修正例を見ながら、どこをそろえるか確認しましょう。

テーマエディターで画像を選択しました。でもページには何も出ません。画像をアップロードし直すべきですか？

まず設定IDを確認しましょう。画像を選ぶ入力欄があっても、Liquidが別の名前を読んでいると画像は表示されません。

image_pickerとimageは、同じ画像設定の名前ではないのですか？

image_pickerは入力欄の種類、imageは今回の設定IDです。実際の修正例を見ながら、どこをそろえるか確認しましょう。

画像が出ない原因を絞る

最初に「選択した画像が読み取れているか」と「画像を表示する処理が動いているか」を分けて確認します。今回のサンクスページでは、画像は選択済みでしたが、背景画像用のCSSが作られていませんでした。

今回の症状は背景画像が空白

対象はカスタムのサンクスページセクションです。テーマエディターの「画像」欄には画像が設定されていました。それでも公開画面で背景が空白だったため、画像ファイルより先に、セクション内のLiquidとスキーマを確認しました。

設定欄と表示処理を対で見る

Shopifyのセクション設定は、ファイル末尾の{% schema %}で定義し、本文側でsection.settings.設定IDとして読みます。設定IDが違えば、別の値を見に行くことになります。ブロック内の設定ならblock.settings.設定IDを使うため、参照元も区別します。

設定をどのオブジェクトから読むかは、Shopify公式のSettingsドキュメントにも整理されています。

画像の未選択も別に確認する

設定IDが合っていても、対象セクションの画像が未選択なら値は空です。公式ドキュメントでは、image_pickerの値は選択時に画像オブジェクト、未選択などの場合はnilになります。まず対象テンプレートの対象セクションで画像が選ばれているか確認してください。

詳細はShopify公式のimage_pickerの説明で確認できます。

image_pickerとIDを区別する

今回の原因は、この2つを同じものとして扱ったことでした。スキーマのtypeは入力欄の種類を、idはLiquidから取り出すときの名前を表します。

typeは入力欄の種類

次のimage_pickerは「テーマエディターで画像を選べる欄を作る」という指定です。ここをimageへ変えて直す問題ではありません。

{% schema %}
{
  "name": "カスタム Thanks",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "画像"
    }
  ],
  "presets": [{ "name": "カスタム Thanks" }]
}
{% endschema %}

idが参照時の名前になる

この例の設定IDはimageです。したがって、同じセクション内ではsection.settings.imageを参照します。typeの文字列をそのまま設定IDとして使わないことが、今回の修正点です。

誤った参照は空になる

修正前は背景画像の条件とURL生成がsection.settings.image_pickerを読んでいました。スキーマにはそのIDがないため条件が成立せず、background-image自体が出力されません。画像を再登録しても解決しなかった理由はここにあります。

{% if section.settings.image_picker != blank %}
  background-image: url('{{ section.settings.image_picker | image_url: width: 1920 }}');
{% endif %}

背景画像の参照を修正する

スキーマのIDに合わせ、条件とURL生成の両方をsection.settings.imageへ直します。設定済みの画像を保持したまま参照名だけをそろえる方法です。

条件とURLを同時に直す

片方だけ修正すると、条件は通ってもURLが空になるなど、別の不具合が残ります。画像が選ばれている場合だけ背景の指定を出す例は次のとおりです。

{% if section.settings.image != blank %}
  <style>
    .thanks-section {
      background-image: url('{{ section.settings.image | image_url: width: 1920 }}');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  </style>
{% endif %}

ここではimage_urlが選択済み画像のURLを作ります。width: 1920は出力画像の幅の指定です。表示に必要な大きさは、実際のセクション幅と画像の用途に合わせて調整します。

表示先のクラスも確認する

生成されたCSSのセレクター.thanks-sectionが、ページ内の表示先要素と一致している必要があります。実例ではセクションの外側に同じクラスがありました。設定IDが正しくても、クラス名が違えばCSSは適用されません。

別のIDへ変更するときは慎重に

すでに画像を選択して保存している場合、スキーマのIDだけをimage_pickerへ変更すると既存の設定値を参照できなくなる可能性があります。今回のように設定側がimageなら、まず表示側を合わせる方が変更範囲を小さくできます。

画像タグと背景画像を使い分ける

設定IDの確認方法は共通ですが、画像をHTMLの内容として置く場合とCSSの背景にする場合では、表示方法が異なります。

内容のある画像はimage_tag

商品や説明図など、文章の理解に必要な画像は<img>として出力します。Shopifyのimage_tagは画像タグを生成し、画像に設定した代替テキストや焦点位置も扱えます。

画像タグの属性についてはShopify公式のimage_tagリファレンスを参照してください。

{% if section.settings.image != blank %}
  {{ section.settings.image
    | image_url: width: 1200
    | image_tag: widths: '400, 800, 1200', sizes: '(min-width: 750px) 50vw, 100vw' }}
{% endif %}

装飾なら背景画像を検討する

文字の背後に敷く装飾画像なら、今回のようにbackground-imageで表示できます。ただしCSS背景は通常の画像タグの代替テキストを持ちません。画像内に読むべき情報があるなら、背景だけで伝えず本文にも内容を記載します。

背景の見え方はCSSで決まる

background-size: coverは領域を覆うように画像を拡大・切り抜きます。画像が出ても主役が切れる場合は、background-positionとセクションの高さを確認します。画像が透明なら、背景色によって見え方が変わる点も確認しましょう。

PCとスマホで画像を分ける

画像を表示できた後、画面幅ごとに別画像を使いたい場合は、設定IDを増やして用途を明確にします。今回の不具合を直すために、最初から複数画像へ分ける必要はありません。

設定IDを別々に用意する

PC用とスマートフォン用を分けるなら、たとえばdesktop_imageとmobile_imageを設定します。参照時も、それぞれのIDを正確に使用します。

{% schema %}
{
  "name": "画像切り替え例",
  "settings": [
    { "type": "image_picker", "id": "desktop_image", "label": "PC画像" },
    { "type": "image_picker", "id": "mobile_image", "label": "スマホ画像" }
  ],
  "presets": [{ "name": "画像切り替え例" }]
}
{% endschema %}

単なる縮小なら1枚でもよい

PCとスマートフォンで構図が同じなら、1枚の画像をレスポンシブ表示する方が管理しやすい場合もあります。異なる切り抜きが必要なときに別画像を検討し、画像タグで表示するなら<picture>による出し分けも選択肢です。

透過画像は重なり順を見る

背景画像の上へ透過PNGやWebPを重ねる構成では、表示されない原因が設定IDとは限りません。画像のURLが出力されているのに見えない場合は、親要素の高さ、position、z-index、opacity、overflowを順に確認します。

修正後に確認すること

最後は「画像が選ばれている」「HTMLまたはCSSにURLが出ている」「画面に表示される」の順で確かめます。原因ごとに確認箇所を分ければ、画像を何度も登録し直す手間を避けられます。

対象ページで設定を保存する

「オンラインストア → テーマ → カスタマイズ」で対象ページのテンプレートを開き、対象セクションを選択します。画像欄に選択内容があることを確認して保存します。別テンプレートの同名セクションを見ていないかも確認してください。

出力されたURLを確認する

背景画像ならブラウザーの開発者ツールで.thanks-sectionの適用CSSにbackground-imageがあるか確認します。画像タグならimgのsrcを確認します。URLが出ていなければ設定IDや条件分岐、URLが出ているのに見えなければCSSや画像自体へ調査を進めます。

PCとスマホの実画面を見る

テーマエディターのプレビューに加えて、実際のプレビューURLをPCとスマートフォン幅で確認します。背景の切れ方、文字の読みやすさ、透過画像の重なり方まで見れば、設定の保存と見た目を一度で確かめられます。

まとめ

画像が表示されないときは、画像ファイルを疑う前に設定のつながりを確認しましょう。

• image_pickerは入力欄の種類、idはLiquidから参照する名前
• 今回の例ではid: imageなのでsection.settings.imageを使う
• 条件分岐とimage_urlの両方で同じ設定IDを使う
• URLが出力されているのに見えない場合は表示先のクラスとCSSを調べる
• 内容のある画像は画像タグ、装飾画像は背景画像を用途に応じて選ぶ

今回の修正は、サンクスページの背景画像処理が参照するIDをスキーマにそろえたものです。テーマにより設定IDや表示方法は異なりますが、スキーマのIDから表示コードまで同じ名前でたどると原因を見つけやすくなります。