swap pictures for product selection

Ericab84
Excursionist
12 1 3

How do I get the second or third photos to swap into the main product spot when someone clicks on them?  I don't necessarily need to magnify the other pictures as that makes them too big to read properly, but they need to become big enough to read when clicked on.  See screenshot below, second picture is a sizing guide, customer will need to be able to read the contents.

www.ericascustomworkshop.ca

 

Ericab84_0-1631629050527.png

 

 

0 Likes
Marty
Shopify Staff
Shopify Staff
293 43 58

Hi, @Ericab84.

Thanks for your message, I would be happy to offer you some suggestions. Most themes in Shopify, whether a Shopify-based theme or a third-party theme will have this feature built-in by default. When you add multiple pictures, you should be able to swap between them, with the next pictures replacing the first image so your customers can view them properly. May I ask what theme you are using or if you have done any coding changes that could have caused this image issue? 

If you are using a third-party theme and this issue is simply occurring when you add your photos, I would suggest reaching out to your theme developers to take a closer look into this. If you have manipulated your themes code in any way, it may be best to reach out to a local developer or Shopify Expert to help out. 

Feel free to reach back out here with any further context or questions you may have, we are always happy to chat!

Marty | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Ericab84
Excursionist
12 1 3

I'm using the Dawn theme.  I have made some code changes but this was an issue prior to making those changes.  The changes I've made were to resize how large the images are displayed and to the cursor display.  Previously, as soon as the cursor hovered over any of the 3 pictures the cursor would change to a magnifying glass, that has now been changed to currsor.

0 Likes
Marty
Shopify Staff
Shopify Staff
293 43 58

Hi, @Ericab84.

Thanks for getting back to me with this further context. I recommend double-checking under online store > actions > edit code to ensure there is no code causing a break in your image click-to-expand feature. You should be able to quickly note any changes by searching for .section-main-product.css and it will have a little purple circle next to it if there have been customizations made:

Here is another example of the purple circle, indicating customizations from my test store, for example: 


If the click-to-expand area was broken, you would need to revert that change and you should be able to click your images as intended once more. If you run into any issues, I would recommend reaching out to a Shopify Expert who can help you dig into any third-party coding changes further. 

Please let me know if you have any additional questions, we are always happy to chat! 

Marty | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Ericab84
Excursionist
12 1 3

I don't know how to tell if something is broken or not.  As I mentioned, the original settings had the cursor change to a magnifying glass as soon as the cursor went over the additional pictures, it would magnify the section of the image where the cursor was, not expand or open the picture in a separate area.  this was changed by the use of the below code being added to the bottom of the page:

.product__media-toggle {display: none !important;}
.product__modal-opener .product__media-icon {display: none !important;}

0 Likes
Marty
Shopify Staff
Shopify Staff
293 43 58

Hi, @Ericab84.

It's tough to tell exactly what you may have done with your code without accessing your shop, It looks like we’ll need to access your account in order to resolve this issue. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit our Help Center here and log in to your account to create a support request.

Although our support team does not support third-party coding customizations of any kind, they should be able to access your account and point out any changes you made and where you can revert them to their original state. If our support team is not able to support the changes you made, your next steps would be to reach out to a Shopify Expert or receive help from one of our helpful community members. 

Thanks again for your message and I hope this points you in the right direction! 

Marty | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Ericab84
Excursionist
12 1 3

@dmwwebartisan can you help out with this issue?  I didn't see anything in the code for "click to expand" but I'm being advise that the code I put in might have broken that feature

0 Likes
Ericab84
Excursionist
12 1 3

Is anyone able to help?

0 Likes
PosanaShop
Tourist
8 0 2

Hi @Ericab84 , have you linked the specific image to the variant? This works for me. I have done the following (no code change):

- Created the product (e.g. t-shirt) on the product page

- Added all the images in the media (including all variants)

- Created variants

- Clicked on the image button next to the variant and linked the required image to the variant

However, I am no expert. Not sure if you have done the above. 

 

0 Likes
Ericab84
Excursionist
12 1 3

I wish that worked but I have to use an app for variants, too many options

0 Likes