How to show another picture when touch the photo?

106 1 2

Hi Guys,


Can you help me with that? 

Im using theme debut

Here is my url:



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' %}
  • 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 incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
Shopify Staff
Shopify Staff
461 55 77

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 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution