How to set fixed image ratio product thumbnail pictures

[atervinnadesign]

Hello lovely people,

After trying many different ways, I still couldnt find a solution to make product photographs cover the frame of my thumbnails. Both on the product media gallery and product suggestion thumbnails.

To explain: the images on my product page template do not fill the entire image area. I’d want to use a 1:1 aspect ratio and make the image fill or cover the entire area dedicated to the product image (object-fit: cover).

After days of attempting to solve the problem, I was unable to discover a solution.

Note: I have used PageFly to create the pages.

Is there any way someone can help me?

Site is: https://atervinnadesign.com/products/montera-sideboard

Password: Iggyrocks

Thankyou so so much! Any help is appreciated

Iggy

[StartStorez]

@atervinnadesign hi, Yes, I can solve your problem right now. You have to upload pictures again according to your ratio or I can do it for you. You can use a product camera to take photos or if you are taking pictures from a supplier so you need to edit its size yourself.

Using a consistent aspect ratio for all the images of a particular type makes them display better side by side, because they all display as the same size. For example, if you want your product images to display as the same size within a collection, then they need to have the same aspect ratio. You can use the image editor to crop your images to have the same aspect ratio

[atervinnadesign]

Thanks for replying but this is not the solution I am after.

I am aware I could upload the photos in the same aspect ratio and I know I could change the uploaded dimensions there however I want to keep them in their original orientation once the image is clicked on.

Like so:

Above they are all being pulled from the same uploaded file but are being displayed in different cropped style.

[StartStorez]

Hi,
It’s a simple solution you just have to write a small line of code in your theme.scss file, and it will be done.
Edit code > theme.scss >

.pf-media-fixed-height .splide__slide img, [data-pf-type=“MediaItem”] img {
object-fit: cover !important;
}

[PageFly-Victor]

Hi @atervinnadesign ,

This is PageFly - Free Landing Page Builder. Thank you for choosing us to build and improve your business.

I found that Touqir from our team helped you to fix the problem.

The code is

.hjgPiu.pf-media-fixed-height .splide__slide img, [data-pf-type="MediaItem"] img {
object-fit: cover !important;
}

Yeah, you can use the feature fixed height, then create your own images following the size + ratio.

I would love to provide my recommendations for your store based on 6 years of providing solution for about 100.000 active Shopify merchants. I have just had a look at your store. Your store is pretty. I have just some small things I’d suggest for your Homepage for a better chance of gaining sales. May it help!

1. Add favicon to your store: Having a favicon for your store will make your store unique and help customers easily recognize it. You can check this article to know how to add it.

2. Make a sticky header: Sticky header helps customers easily access menu navigation although they scroll down or up on your page. Customers can also quickly reach the Search field to find products with a sticky header.

If your page is long, when you scroll down, there is no quick way to come back to your menu, especially on mobile. You do not have an anchor button to “Back to the top”, so it makes it very inconvenient for customers to go back to your menu and see other pages, products, etc.

3. Have a CTA button on the banner/ slideshow: A primary call to action button is one of the important things for a home page of an online store.With this button, you will redirect customers to the page you want them to take action mostly. It can redirect to a collection page, or a product page, etc.

4. Add testimonial - customer reviews: Customer reviews are proof of your product quality. This section will help you build customers’ trust. You can show rating stars for each product or you can add customer reviews as text and photos. I found an article for you about third-party apps that are 07 Tools to Boost Your Conversion Rates and the best reviews app for your store.

To build a better Homepage, you also can take a look at our blog here: Personalize Your Homepage

And, please feel free to chat with us via Live chat support if you have any questions. We are here 24/7 to help.

If you find my comments helpful to you, like it or mark it as a solution.

Good luck and have a nice day! Cheers!