# 商品一覧のサムネイル画像を変更したい

**URL:** <https://community.shopify.com/t/topic/137487>\
**Category:** Shopify テーマ\
**Created:** [July 24, 2022, 3:06am UTC](https://community.shopify.com/t/topic/137487 "2022-07-24T03:06:51Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品一覧のサムネイル画像を、商品画像1枚目（動画）ではなく別の静止画に変更したいというテーマ「Envy」での実装相談。商品ページでは1枚目の動画を自動再生、一覧では静止画を表示させることが目的。

提案：Liquid（Shopifyのテンプレート言語）で product.featured_media を product.media[1] に置き換えることで、2枚目の画像を一覧サムネに表示可能との説明。featured_media は代表メディア、media[1] は2番目のメディアを指す。

進捗：投稿者は Edit code で該当箇所が特定できず、Snippets/product-cross-sell.liquid の {{ product.featured_image | img_url: '200x200' }} を product.media[1] に変更したが、どのページに反映されるか不明。他のファイルを検索しても「product.featured●●」の記述は見つからず。

補足：テーマ作者へ問い合わせたが、コミュニティで質問するよう案内のみで具体的な修正箇所の提示はなし。

現状・結論：未解決。必要なアクションは、商品一覧（コレクションのグリッド）のカードテンプレートを特定し、その画像出力ロジックを product.media[1] に修正すること。

<div class="post-metadata">

**Author:** ![hazi922](https://avatars.discourse-cdn.com/v4/letter/h/c37758/32.png) [@hazi922](https://community.shopify.com/u/hazi922)\
**Post date:** [July 24, 2022, 3:06am UTC](https://community.shopify.com/t/topic/137487/1 "2022-07-24T03:06:51Z")

</div>

はじめまして。

タイトルの通り、商品一覧に表示される各商品のサムネイル画像の変更方法についてご教授いただけますでしょうか？

デフォルトの場合、商品画像１枚目がサムネイルとして一覧に表示されるのですが、こちらを商品画像１枚目ではない画像に変更したいです。

上記の理由といたしましては、商品ページを開いた際には商品画像１枚目に登録した動画が自動再生される様にしたいのですが、商品一覧にて表示されるサムネイルでは、動画ではなく別の静止画を表示させたいです。

※現在は「envy」というテーマを使用しております

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [July 25, 2022, 1:19am UTC](https://community.shopify.com/t/topic/137487/2 "2022-07-25T01:19:02Z")

</div>

Hazi922さま

一例ですが、商品画像の2枚目をデフォルトで表示するにはコード修正で対応が可能です。

おそらく現在の商品のサムネは下記のようなコードで表示されているかと思います。

(テーマにより多少コードが異なります。)

{{ product.featured\_media | img\_url: ‘165x’ }}

上記コードを下記のようにfeatured\_media→media[1]に変更することで

2番目の画像を表示することが可能になります。

{{product.media[1] | img\_url: ‘165x’ }}

コードを修正するファイルは一度検討いただけますと幸いです。

また、お困りのことがあれば是非ご質問ください。

フルバランス 園畑

---

<div class="post-metadata">

**Author:** ![hazi922](https://avatars.discourse-cdn.com/v4/letter/h/c37758/32.png) [@hazi922](https://community.shopify.com/u/hazi922)\
**Post date:** [July 25, 2022, 10:41am UTC](https://community.shopify.com/t/topic/137487/3 "2022-07-25T10:41:22Z")

</div>

フルバランス 園畑 様

はじめまして。

この度は、ご教授頂きまして、誠にありがとうございます。

ご教授いただきました件につきまして、初歩的な質問で誠に申し訳ございませんが、

テーマのEdit codeより、どのファイルを修正すればいいのかが分かりませんでした。

「Snippets」というフォルダの中に「product-cross-sell.liquid」というファイルがあり、

そちらの中の記述にて、{{ product.featured\_image | img\_url: ‘200x200’, scale: 2 }}と記載された部分がございまして、そちらの「product.featured\_image」の部分を、ご指示頂いた通り、「product.media[1]」に書き換え保存した上でプレビューを確認したのですが、

どちらのページに反映されているのかが分かりませんでした。

「product」という名称が頭についたliquidファイルがいくつかございまして、

そちらのファイルを全て「product.featured」にて文字検索を行ったのですが、

上記の様な「product.featured●●」の記述は「product-cross-sell.liquid」というファイルにしか見つけられませんでした。

上記の件につきまして、テーマの作者様に問い合わせしたところ、コミュニティにて質問をしてくださいとの旨の返事をいただき、修正方法についてはご教授いただけませんでした。

お手数をおかけいたしますが、もしご存知でしたら、ご教授頂けましたら幸いです。

何卒宜しくお願い致します。