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

**URL:** <https://community.shopify.com/t/topic/328972>\
**Category:** 技術的なQ＆A\
**Created:** [June 5, 2024, 5:46am UTC](https://community.shopify.com/t/topic/328972 "2024-06-05T05:46:22Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated 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番目の画像も設定できる

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

<div class="post-metadata">

**Author:** ![shimomura](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@shimomura](https://community.shopify.com/u/shimomura)\
**Post date:** [June 5, 2024, 5:46am UTC](https://community.shopify.com/t/topic/328972/1 "2024-06-05T05:46:22Z")

</div>

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![shimomura](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@shimomura](https://community.shopify.com/u/shimomura)\
**Post date:** [June 5, 2024, 6:27am UTC](https://community.shopify.com/t/topic/328972/2 "2024-06-05T06:27:59Z")

</div>

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

参照元：[https://community.shopify.com/post/899531](https://community.shopify.com/post/899531)

---

<div class="post-metadata">

**Author:** ![shimomura](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@shimomura](https://community.shopify.com/u/shimomura)\
**Post date:** [June 5, 2024, 8:53am UTC](https://community.shopify.com/t/topic/328972/3 "2024-06-05T08:53:09Z")

</div>

解決しました。

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

```markup
{%- 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]に変更する事で商品一覧ページで表示させる画像を設定できるようです。

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