How to show another picture when touch the photo?

Excursionist
106 1 1

Hi Guys,

 

Can you help me with that? 

Im using theme debut

Here is my url: cocopiece.myshopify.com

8dfd10fdf5f13e927152a44760d9a5f.png

0 Likes
Shopify Partner
908 128 122

Hello ,

Just follow the steps for Debut theme to show another picture on hover.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Open Snippets -> product-card-grid.liquid File and replace the code with below code.
    {% unless grid_image_width %}
      {%- assign grid_image_width = '600x600' -%}
    {% endunless %}
    <div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
      <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
        <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
        {% if product.images.size > 1 %}
         <img class="secondary" src="{{ product.images[1] | img_url: grid_image_width }}" alt="{{ product.images[1].alt | escape }}">
        {% endif %}
        <div class="h4 grid-view-item__title">{{ product.title }}</div>
        {% if section.settings.show_vendor %}
          <div class="grid-view-item__vendor">{{ product.vendor }}</div>
        {% endif %}
        <div class="grid-view-item__meta">
          {% include 'product-price' %}
        </div>
      </a>
    </div>
  • Add these CSS to the very bottom of theme.scss.liquid

    .has-secondary.grid-view-item__link img.secondary{ display:none;
    }
    
    .has-secondary.grid-view-item__link:hover img.secondary{ display:block;
    }
    
    .has-secondary.grid-view-item__link:hover img.grid-view-item__image{ display:none;
    }
Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
0 Likes
Highlighted
Shopify Staff
Shopify Staff
236 27 40

Hey, @Alvin--R!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out also.

 

That is a great idea as it allows customers to see the other product images quickly. There are a few ways you can achieve this. We have a great guide on in our help centre here that you can take a look at. This is an advanced tutorial, which means it would be unsupported by our Theme Support team. They would not be able to assist here as it is outside the scope of the support they can offer. However, you should be able to do by following the guide but if not, you can consider hiring a Shopify Expert! You can actually post a job on the Shopify Experts Page, and see what feedback and quotes you get. You can find where and how to do this here.

 

I have also found this app for you which will add this feature to your store also. This app displays the second product thumbnail image on mouse hover or touch event in mobiles or tablets. It has a 7-day free trial so you can try it out before purchasing it to see if it is exactly what you are looking for. 

 

I hope that helps but please let me know if you need any more assistance. You can ask us all sorts of things - If you want our opinion about your business plan or site layout, even with marketing and growth aspects you're curious about, then be sure to reach out. 

 

All the best,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes