Make images fit in picture collection page

Solved
Luxurymrkt
Navigator
565 2 96

Hi I need  help to make the images fit inside the product pics so you can see the whole pic.

https://luxurymrkt.com/pages/perfectshoeparker

840FBD4E-997F-4207-B691-B3F31C7E76E2.png

Thank You | mike
Accepted Solution (1)
Moeed
Shopify Partner
3046 760 924

This is an accepted solution.

Hey @Luxurymrkt 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-image-template--15870642847925__7929d10c-950a-4c94-aaa4-6c7b4925a7a7, .product-hover-image-template--15870642847925__7929d10c-950a-4c94-aaa4-6c7b4925a7a7 {
    object-fit: contain !important;
}
</style>

RESULT:

Moeed_0-1697779390301.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 3 (3)
Dan-From-Ryviu
Shopify Partner
5593 1026 1056

Hi @Luxurymrkt 

You can do that by adding this CSS code in Custome CSS of that section 

.swiper-slide img { object-fit: contain !important; }

2.jpg 

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Moeed
Shopify Partner
3046 760 924

This is an accepted solution.

Hey @Luxurymrkt 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-image-template--15870642847925__7929d10c-950a-4c94-aaa4-6c7b4925a7a7, .product-hover-image-template--15870642847925__7929d10c-950a-4c94-aaa4-6c7b4925a7a7 {
    object-fit: contain !important;
}
</style>

RESULT:

Moeed_0-1697779390301.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Luxurymrkt
Navigator
565 2 96

Worked but is it possible to add that to all sections on this page?

2A5AA3E9-87C4-47AE-80BD-572B68A1B6FA.png

Thank You | mike