Product pictures thumbnails not clikable, not changing and zoom

[ginetteshop]

Hi, 

On product pages, the thumbnail pictures are not clickable to change the main picture. 

Also, i would like to install the zoom within the picture, not in a new page. 

ginette.shop

Anyone can help? 

Thank you

Gilles

[ginetteshop]

@Lilith @Ava  Sorry to bother but can you help on this?

Thank you!!

[Lilith]

Hi, @ginetteshop!

My name is Lilith, I'm on the Social Care team at Shopify.

The clickable thumbnails on a product page will sometimes depend on the theme that is installed. Can you hop into the Theme Editor (Online Store > Themes > Customize) and click on the Theme Settings tab. The theme name and version will be right at the bottom of that tab.

This does also sound like there is a possibility that some code is interfering, however without the link to a page for an example I'll be unable to see what really is happening. Do you remember making any code changes?

I do recommend taking a look at your theme code by going to Online Store > Themes > Customize. Once your there, click on Actions > Edit Code. Open the Sections > product-template.liquid file.

When you're there, if there have been modifications to the file you'll see this link called Older versions:

Click on that link and revert the code back to a previous version or to the original in order for your product page to go back to normal.

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

[Magic_Toolbox]

Hi Gilles,

To gain full control over your image zoom effect, try our app Magic Zoom Plus. It can zoom internally or to the side or with a magnifying glass. It can also enlarge to fullscreen, for very deep zoom.

Install the free trial for 30 days:

https://apps.shopify.com/magic-zoom-plus

Email us if you need any help!

David

Magic Toolbox

[ginetteshop]

Hi @Lilith 

Thank you for your response. 

I tried to push an older version but it's not the original no more. 

I can only go 5 days back. 

Yes i did make some changes into several liquid or js files. 

It seems that it has screwed up the pictures functions. 

Any way you can take a look at the code and help me to fix it? 

- make the main image change when thumbnails clicked

- Add a (free) zoom feature, magnifying glass maybe

Thank you so much for your help!

Gilles

[Lilith]

Hey @ginetteshop!

Thanks for trying the revert function on there. Which theme are you using right now?

Since your theme is modified we're not able to change anything on there as it could cause other areas to break. We don't want that to happen.

What I would recommend though is if you're using a Shopify theme you can download a fresh copy here and add your setup there without modifying the code. Once you have it ready, you can let us know and we can check to see if your account is still eligible for some free design time where we can look at helping you add those modifications to the product page (i.e. image click and zoom)

That said, we do have some themes that have some of those great features built into the product page as well if you wanted to check them out.

Also as an alternative, we have some tutorials on some theme customizations that can help too.

This tutorial called Select variants by clicking their images is a possible option to getting the images to change when clicking on them.

In terms of the zoom function, we have an advanced blog post on Using JQuery Zoom and JavaScript Zoom for Product Images on Shopify  that can help as well.

The thing on the customizations is that we can't support the changes you make there, but the good news is that we have great Shopify Partners in the Experts Marketplace or request a quote by following this guide here.

As @Magic_Toolbox mentioned though there are some highly-rated apps that can help without the need to hard code these yourself. Magic Zoom Plus app is one of the apps mentioned in the blog post there.

Let me know any updates on this here.

[ginetteshop]

@Lilith 

HI!

I found why it was messed up. 

Because my dropdown menu was hidden, I added the following code in theme.js

var selectors = {
image: '[data-image]',
imagePlaceholder: '[data-image-placeholder]',
imageWithPlaceholderWrapper: '[data-image-with-placeholder-wrapper]',
lazyloaded: '.lazyloaded'
};

var classes = {
hidden: 'hide'
};

$(document).on('lazyloaded', function(e) {
var $target = $(e.target);

if ($target.data('bgset')) {
var $image = $target.find(selectors.lazyloaded);
if ($image.length) {
var alt = $target.data('alt');
var src=$image.data('src') ? $image.data('src') : $target.data('bg');

$image.attr('alt', alt ? alt : '');
$image.attr('src', src ? src : '');
}
}

if (!$target.is(selectors.image)) {
return;
}

$target
.closest(selectors.imageWithPlaceholderWrapper)
.find(selectors.imagePlaceholder)
.addClass(classes.hidden);
});

// When the theme loads, lazysizes might load images before the "lazyloaded"
// event listener has been attached. When this happens, the following function
// hides the loading placeholders.
function onLoadHideLazysizesAnimation() {
$(selectors.image + '.lazyloaded')
.closest(selectors.imageWithPlaceholderWrapper)
.find(selectors.imagePlaceholder)
.addClass(classes.hidden);
}

onLoadHideLazysizesAnimation();
$(document).one('touchstart', function() {
theme.Helpers.setTouch();
});
};

Now i can see dropdown but the product images not changing or clickable. 

When I remove the code, dropdown menu is hidden but image are clicable and open on a new URL where i can zoom the picture. 

What i would like to do is when i click on the different thumbnails, the main picture change reagarding the picture I clicked. 

And also have a zoom on hover on the main picture. 

And of course keep my dropdown menu available.

Does that help?

Thank you

Gilles

[ginetteshop]

Hi Community

Can anyone please help?

Thank you!

Gilles

[Lilith]

Hi @ginetteshop. This might be a bit out of the scope of what I can assist with right now due to the level of customization. However, I really do recommend touching base with our Partners in the Experts Marketplace, if you don't find the solution right away here. It's good to have someone customize it exactly the way you want with clean code to help your site stay speedy and light.

[JLizzyApparel]

THANK YOU, THANK YOU, THANK YOU! After 2 hours, 15 threads and 1 useless APP, I found this direction. In 2 minutes I had fixed the issue, that I caused following another App suggestions. Thank You so very much! JL