# 商品画像のマウスオーバー時に表示される画像の変更

**URL:** <https://community.shopify.com/t/topic/129835>\
**Category:** 技術的なQ＆A\
**Created:** [June 22, 2022, 6:42am UTC](https://community.shopify.com/t/topic/129835 "2022-06-22T06:42:17Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Shopify「Dawn」テーマの商品一覧で、マウスオーバー時に2枚目ではなく最後の画像を表示したいという要望。対象は「特集コレクション」セクション。

最新の進展: 対処方法が提示され、実装済みで解決。

技術的ポイント:
- 編集ファイル: Snippets/card-product.liquid。
- 変更内容: 既存の media[1] を media.last に置き換える。
- 条件式例: `{% if card_product.media.last != nil and show_secondary_image %}` を用いて最後の画像が存在する場合のみ表示。
- imgタグの srcset/src/sizes/alt/width/height すべてで `card_product.media.last` を参照する。

補足:
- 掲載コードスニペットが理解に重要。サンプル内にスペース混入などの記述ミス（例: `media.la st`）があるため、実装時は正しく `media.last` を記述する必要がある。

結論・状態: 解決済み。追加の未解決事項や対立はなし。

<div class="post-metadata">

**Author:** ![trr\_store](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@trr\_store](https://community.shopify.com/u/trr_store)\
**Post date:** [June 22, 2022, 6:42am UTC](https://community.shopify.com/t/topic/129835/1 "2022-06-22T06:42:17Z")

</div>

こんにちは。

TOPページの商品一覧画像にカーソルを載せた際、

「マウスオーバー時に2番目の画像を表示する」ではなく、

「最後の画像を表示」したいのですが、どこを書き換えれば良いのか分からず、お手上げ状態です…。

どなたかご教示頂けませんでしょうか。

何卒よろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Hori\_Koh](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/hori_koh/32/342475_2.png) [@Hori\_Koh](https://community.shopify.com/u/Hori_Koh)\
**Post date:** [June 22, 2022, 11:37am UTC](https://community.shopify.com/t/topic/129835/2 "2022-06-22T11:37:08Z")

</div>

テーマが「Dawn」で、セクションが「特集コレクション」でのことでしょうか。

それであれば、コード編集の「Snippets」の「card-product.liquid」が該当するファイルです。

---

<div class="post-metadata">

**Author:** ![trr\_store](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@trr\_store](https://community.shopify.com/u/trr_store)\
**Post date:** [June 23, 2022, 1:02am UTC](https://community.shopify.com/t/topic/129835/3 "2022-06-23T01:02:56Z")

</div>

ありがとうございます！  
解決できました！

他の方のご参考に…

【カーソルを載せた際、最後の画像を表示したい】

media[1] を media.last にすることで解決しました。

{%- if card\_product.media.last != nil and show\_secondary\_image -%}  
\<img  
srcset=“{%- if card\_product.media.last .width \>= 165 -%}{{ card\_product.media.last | image\_url: width: 165 }} 165w,{%- endif -%}  
{%- if card\_product.media.last .width \>= 360 -%}{{ card\_product.media.last | image\_url: width: 360 }} 360w,{%- endif -%}  
{%- if card\_product.media.last .width \>= 533 -%}{{ card\_product.media.last | image\_url: width: 533 }} 533w,{%- endif -%}  
{%- if card\_product.media.last .width \>= 720 -%}{{ card\_product.media.last | image\_url: width: 720 }} 720w,{%- endif -%}  
{%- if card\_product.media.last .width \>= 940 -%}{{ card\_product.media.last | image\_url: width: 940 }} 940w,{%- endif -%}  
{%- if card\_product.media.last .width \>= 1066 -%}{{ card\_product.media.last | image\_url: width: 1066 }} 1066w,{%- endif -%}  
{{ card\_product.media.last | image\_url }} {{ card\_product.media.last .width }}w”  
src=“{{ card\_product.media.last | image\_url: width: 533 }}”  
sizes=“(min-width: {{ settings.page\_width }}px) {{ settings.page\_width | minus: 130 | divided\_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”  
alt=“{{ card\_product.media.last .alt | escape }}”  
class=“motion-reduce”  
loading=“lazy”  
width=“{{ card\_product.media.last .width }}”  
height=“{{ card\_product.media.last .height }}”

> 

{%- endif -%}