Hi! I want the product cards to show their second image on hover, I have checked the option and it works on desktop, but it doesn’t work on mobile… I need it to work on mobile too. Any help please? Here’s the store https://agori-jewellery.com/ I’m using Dawn 7.0.1

Hi @agori May I suggest to update code these steps: Go to Store Online-> theme → edit code Assets/component-card.css Add code below to bottom of file .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) { opacity: 0; } .card-wrapper:hover .media.media--hover-effect>…

Hi @Ted69 , You try to go to Go to Store Online-> theme → Customize → collection → check whether this option has been turn on. [EBOOST_0-1713838691922.png]

Hi @tamziswimwear , May I suggest to update code these steps: Go to Store Online-> theme → edit code [EBOOST_1-1672356985580.png] Assets/base.css Add code below to end of file body .card-wrapper:hover .media.media--hover-effect>img+img { opacity: 1; transition: transform var(--durati…

As I mentioned, this function is already turned on.

Hi, Could you please share your code? We need to check your code to find a solution for it. Maybe your code has been customized.

{{ 'template-collection.css' | asset_url | stylesheet_tag }} {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {% if section.settings.image_shape == 'blob' %} {{ 'mask-blobs.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if s…

Could you please replace your code with code below after that send a preview link? {{ 'template-collection.css' | asset_url | stylesheet_tag }} {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {% if section.settings.image_shape == 'bl…

Code changed. Preview link: https://milastudio.co/collections/kaklo-papuosalai

Hi, the Show second image option hasn’t been turned on yet. [EBOOST_0-1713865690323.png] [EBOOST_1-1713865732087.png] You need go to customize to turn on it. [EBOOST_2-1713865885629.png]

How can I enable second image hover on mobile product cards?

Store Design

EBOOST April 23, 2024, 9:20am 104

Could you please share code of sections/main-collection-product-grid.liquid?

Topic		Replies	Views
Show second image on hover ( DAWN Theme ) Store Design	16	223	June 23, 2023
Reveal second image on hover - Debut theme Store Design	134	1652	November 9, 2023
Product card second image on hover/touch for mobile Store Design design	2	59	January 18, 2025
Collection - Add a hover effect to product images on your collection pages Store Design	87	1879	February 27, 2024
Image on hover on product card not be second image Store Design design , customizations , css , shopify-themes , troubleshooting	22	246	July 29, 2025

How can I enable second image hover on mobile product cards?

Related topics