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

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

Topic 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 を記述する必要がある。

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

Summarized with AI on February 14. AI used: gpt-5.
1

こんにちは。

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

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

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

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

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

2

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

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

3

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

他の方のご参考に…

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

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 -%}