Solved

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

nar_52
Excursionist
16 0 3

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. 

 

 

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

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;
}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 10 (10)
nar_52
Excursionist
16 0 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.

nar_52
Excursionist
16 0 3

@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

MandasaTech
Shopify Expert
723 146 153

Hello @nar_52 
Please share your website URL.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

LitExtension
Shopify Partner
4860 1001 1132

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
nar_52
Excursionist
16 0 3

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

 

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.

 

LitExtension
Shopify Partner
4860 1001 1132

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

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
nar_52
Excursionist
16 0 3

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.

LitExtension
Shopify Partner
4860 1001 1132

Hi @nar_52,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

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;
}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
nar_52
Excursionist
16 0 3

Hi @LitExtension,

it worked. Thanks so much.