Product image not changing to chosen variant

nelsonathan
Tourist
3 0 1

I am having an issue with a product that uses multiple variants. I have chosen an image for each variant option, but when I select the option on the product page the image does not change. The slider remains on the first image. The store is using the Responsive theme. It may be an old version of the theme, but I have just been brought on board by the client to make some design changes so not sure what has been done previously.

 

Any help would be much appreciated. Thank you.


Store URL: https://www.alistairr.co.uk

Sample product:https://www.alistairr.co.uk/products/irish-necklace-donegal-granite-barrow

KetanKumar
Shopify Partner
14570 1676 5229

@nelsonathan 

Thanks for post

do you have upload variant images on the product admin side?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
nelsonathan
Tourist
3 0 1
I do, yes. Each of the variants have been assigned an image.
0 Likes
KetanKumar
Shopify Partner
14570 1676 5229

@nelsonathan 

Thanks for update 

can you please check console it's many errors can you please fix this check attachment 

https://pasteboard.co/J7CdQvj.png

 

if you have any issue let me know i can help you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
nelsonathan
Tourist
3 0 1

@KetanKumar 

 

I've fixed those console errors. It was an issue with jQuery not loading correctly. This unfortunately has not fixed the issue with the variant images though.

0 Likes
KetanKumar
Shopify Partner
14570 1676 5229

@nelsonathan 

Thanks for update

can you please compare original theme nad customisation theme code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
AllieB
Tourist
5 0 0

Did you ever get this figured out? I am having the same issue in the Debut theme.

 

 

I used the code below to implement the image change, but it is not working for products that have a variant.

 

"Copy and paste this at the end of your theme.scss.liquid file:

(I recommend putting a note like <!-- code for image hovering --> before the code below -- just so it's easier for you or someone in your store next time that will modify the theme again what the codes are for.

 

 

/* ===============================================
// Reveal module
// =============================================== */
.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;
}

@media screen and (min-width:767px){
.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;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{ display:none;
}
}

 

 

Next step, open your product-card-grid.liquid file and replace the whole code with this:

(I suggest you copy the old code to a notepad or something so you'll have a copy.)

 

 

{% 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.last | img_url: grid_image_width }}" alt="{{ product.images.last.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', variant: product %}
    </div>
  </a>
</div>

0 Likes
madushka
New Member
1 0 0

Hi

0 Likes