Image on hover on product card not be second image

Store Design
, , , ,
22

Hi @SundayMorning,

I can’t see the email. Can you send it to me? email found in personal info

24

I’ve just seen that you’ve made that work for me! Thank you so much!

Would you be able to explain how incase I run into this issue again? Or am creating another site with this theme and want the same effect.

25

Hi @SundayMorning,

Please go to product-grid-item.liquid file, go to line 634 and change all code here:

Screenshot
Screenshot2264×1034 312 KB

Code:

{%- for media in product.media limit: settings.image_hover_limit -%}
                  <div
                    class="product-item__bg__slide{% if media.media_type == 'video' or media.media_type == 'external_video' %} deferred-media{% endif %}"
                    {% unless forloop.first %}
                      data-hover-slide
                    {% endunless %}
                    data-hover-slide-touch
                  >
                    {%- if settings.image_hover_limit == 2 and forloop.first == false -%}
                      {%- render 'image',
                        image: product.media[3],
                        aspect_ratio: aspect_ratio,
                        sizes: sizes,
                        widths: widths,
                        cover: true,
                        loading: 'lazy',
                        fetchpriority: 'high'
                      -%}
                    {%- else -%}
                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                        {%- liquid
                          case media.media_type
                            when 'video'
                              echo media | media_tag: image_size: '1024x1024', class: 'media-video', autoplay: true, loop: true, controls: false, preload: 'none', muted: true
                            when 'external_video'
                              if media.host == 'youtube'
                                echo media | external_video_url: autoplay: true, playsinline: true, loop: true, playlist: media.external_id, controls: false, mute: true, showinfo: false | external_video_tag: loading: 'lazy', data-host: media.host
                              else
                                echo media | external_video_url: autoplay: true, playsinline: true, loop: true, controls: false, muted: true | external_video_tag: data-host: media.host
                              endif
                          endcase
                        -%}
                      {%- else -%}
                        {%- render 'image',
                          image: media.preview_image,
                          aspect_ratio: aspect_ratio,
                          sizes: sizes,
                          widths: widths,
                          cover: true,
                          loading: 'lazy',
                          fetchpriority: 'high'
                        -%}
                      {%- endif -%}
                    {%- endif -%}
                  </div>
{%- endfor -%}