Make images fit in picture collection page

Solved

Make images fit in picture collection page

Luxurymrkt
Navigator
647 2 126

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
5409 1461 1749

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 Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
9539 1918 1955

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 solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Moeed
Shopify Partner
5409 1461 1749

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 Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Luxurymrkt
Navigator
647 2 126

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

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

Thank You | mike