Craft Theme: Product Page Magnified Image not stacked (Zoom)

Store Design
,
1

Hi,

i hope somebody can help. I’m planning to use the Craft Theme.

On the product page the magnified images are displayed as a stack. Is there a way to:

Option 1: display the magniefied image individually as in the mobile version

or

Option 2: to scroll through the magnified images with arrows?

(i would prefer option 1)

The Theme is in draft. So i can’t provide an url.

Thank you.

2

Hello @nar_52
Please share your website URL.

3

@Drekliyer @MandasaTech My current Theme is Minimal and not Craft. So there is no way to share a url and password to the draft.

4

@Drekliyer @MandasaTech i’m sorry. There isn’t a way, that i know off, to give access to a draft theme. Here is a screenshot of the magnified product images, which are stacked.

Screenshot.png
Screenshot.png1600×900 53.4 KB

5

Hi @nar_52 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
  .product-media-modal__content>* {
    max-width: 30rem !important;
    display: block !important;
  }
}

Hope it helps!

6

Hi @LitExtension ,

thanks for your response. Unfortunatly this didn’t do anything regarding the display of product images in the magniefied version (see attached screenshot). It is already blocked/stacked.

screenshot1.png
screenshot1.png1577×564 101 KB

I would prefer them to be displayed

Option 1: individually as in the mobile version.

(In the mobile version: If you want to see image 2 magnified. You click first on the image 2 and afterswards you can magnify it)

Option 2: to scroll through the magnified images with arrows?

Any idea?

Thanks again.

7

Hi @nar_52 ,

If you want to display by option 1, please change code:

@media screen and (min-width: 750px) {
  .product-media-modal__content .global-media-settings.active {
    max-width: 90%;
  }
}

you can manually change the width to your liking, it will display fine

8

Hi @LitExtension ,

thanks for your response. Unfortunatly this didn’t help either. My problem isn’t the width of the images. I didn’t want the product images to be displayed alltogether in the magniefied mode. In the magnified mode all product images are shown one below the other.

9

Hi @nar_52 ,

Please send me the preview link, I will check it for you

10

Hi @nar_52 ,

Go to Assets > base.css and paste this at the bottom of the file:

.product-media-modal__dialog .global-media-settings--no-shadow {
    display: none !important;
}
.product-media-modal__dialog .global-media-settings--no-shadow.active {
    display: block !important;
}
1 Like
11

Hi @LitExtension ,

it worked. Thanks so much.

1 Like