Shopify themes, liquid, logos, and UX
This is an accepted solution.
Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom :
.product__media.media--transparent .image-magnify-lightbox {
object-fit: contain;
}
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
Could you please share the URL of this page so that I can check what is possible to do ?
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
The back view photo is not in the same format as the front view photo. The simplest solution is to crop your photo in the same way as the second image with the front view of the t-shirt
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
what I mean is that I would like the image to end lower, because when I put the image even shorter or longer it resizes itself and does not change anything.
Attached is an example of the cropping to perform, and your problem will be solved.
Both photos must be framed in the same square format. The photo you're having trouble with is rectangular
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
Here is. the example of the cropping in a square format
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
I don't want the square format of the image, I want the image to be a little bit longer at the bottom of the screen, as shown in the image.
Ok I understand, which theme do you use?
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
Dawn
This is an accepted solution.
Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom :
.product__media.media--transparent .image-magnify-lightbox {
object-fit: contain;
}
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
the height is correct but the width is not
i want something like this
The code I've given you displays a "full" view of the photo as you've designed it (and it's a rectangle)... If you want to display a square photo, you'll need to create a square image of the T-shirt 🙂
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
thank you!! it works
hey bro one last thing how can I make the next image the same size and aligned just below the first image?
To to this, add this code at the bottom of base.ccs file :
(and you have to use the same format for the two images)
@media screen and (min-width: 990px) {
.product--stacked .product__media-item {
max-width: 100%;
}
}
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
it still looks like this
Try this, this will force the template to respect the proposed code:
@media screen and (min-width: 990px) {
.product--stacked .product__media-item {
max-width: 100%!important;
}
}
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025