商品一覧で表示される商品画像の変更方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

商品一覧ページで表示される商品画像を、デフォルトの1番目の画像から2番目や3番目の画像に変更する方法についての質問。

解決方法:

  • Dawnテンプレート(バージョン10.0.0使用)のcard-product.liquidファイルを編集
  • 55行目〜106行目のコード内で、{{ product.media[1] }}のような形式でLiquidコードを使用
  • featured_mediaをmedia[1]に変更することで2番目の画像を表示可能
  • media[1]をmedia[2]に変更すれば3番目の画像も設定できる

ステータス: 質問者自身が解決済みと報告。商品一覧ページで表示する画像を柔軟に選択できるようになった。

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

商品一覧で表示される商品画像は１番目に設定した画像に自動でなりますが、

２番目や３番目に設定した画像にすることは可能でしょうか？

２番目や３番目の画像を取得するタグを探しましたが見つかりませんでした。

テンプレートはDawn14.0.0を使用しております。

ご存知の方がいらっしゃいましたら、お知恵を拝借下さいますと幸いです。

2

{{ product.media[1] }} のようなコードをDawnのliquidに反映する事は可能でしょうか？

参照元：https://community.shopify.com/post/899531

3

解決しました。

card-product.liquidの55行目〜106行目

{%- if card_product.featured_media -%}
          
            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                
              {%- endif -%}
              {% if section.settings.show_newitems %}
                NEW
              {% endif %}
            

          

        {%- endif -%}

のfeatured_mediaをmedia[1]に変更したり、media[1]をmedia[2]に変更する事で商品一覧ページで表示させる画像を設定できるようです。

他により良い対応方法があると思いますが、一旦この方法で対応してみようと思います。