Solved

Product Image Aspect Ratio for 'Related Products'

ARnkn
New Member
12 0 0

Hi! I have managed to edit the code in order to get my images to show as a 1:1 ratio on the product page, however, this does not extend to the 'Related Products' section, which still has different sized images. 

 

Is there a specific part of the code for related products?

 

Photo below for reference. If I change the Product Card Image Ratio to square it just crops the images and I don't want it to do that. 

 

Capture.JPG

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2130 609 474

This is an accepted solution.

Replace the code with this.

 

<style>

product-recommendations .media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

product-recommendations .card__media {
    height: fit-content !important;
    width: fit-content !important;
    position: relative !important;
}

product-recommendations img.motion-reduce {
    width: fit-content !important;
    position: relative !important;
}


product-recommendations .card--media .card__inner .card__content {
    display: none !important;
}

product-recommendations .card__inner.gradient.ratio {
    width: fit-content !important;
    height: fit-content !important;
}

product-recommendations .card__inner.ratio:before {
    display: none !important;
}

product-recommendations .media.media--transparent.media--hover-effect:has(img:first-child:not(:only-child)) {
    justify-content: flex-start !important;
}

product-recommendations .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    display: none !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 22 (22)

ThePrimeWeb
Shopify Partner
2130 609 474

Hey @ARnkn,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

It's not live yet, so here is the preview link

ThePrimeWeb
Shopify Partner
2130 609 474

Hey @ARnkn,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

.card__media {
    height: fit-content !important;
    width: fit-content !important;
    position: relative !important;
}

img.motion-reduce {
    width: fit-content !important;
    position: relative !important;
}


.card--media .card__inner .card__content {
    display: none !important;
}

.card__inner.gradient.ratio {
    width: fit-content !important;
    height: fit-content !important;
}

.card__inner.ratio:before {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714059206136.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

Amazing!! Thank you so much! You are an absolute life saver!

 

One problem, it has worked for the related products section....but weirdly enough its changed the images on the homepage on the carousel. See attachedCapture.JPG

ThePrimeWeb
Shopify Partner
2130 609 474

Hey @ARnkn,

 

You can replace the code with this and see if it works

 

<style>

product-recommendations .media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

product-recommendations .card__media {
    height: fit-content !important;
    width: fit-content !important;
    position: relative !important;
}

product-recommendations img.motion-reduce {
    width: fit-content !important;
    position: relative !important;
}


product-recommendations .card--media .card__inner .card__content {
    display: none !important;
}

product-recommendations .card__inner.gradient.ratio {
    width: fit-content !important;
    height: fit-content !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

So that's worked for those images. But now having an issue with the product details being really far away from the photo and any images that are wider are being cropped. 

 

See screen grabs (sorry to be such a pain)2.JPG1.JPG

ThePrimeWeb
Shopify Partner
2130 609 474

Oh, I missed one part of the code. 

 

Replace it with this and it should be fine.

 

<style>

product-recommendations .media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

product-recommendations .card__media {
    height: fit-content !important;
    width: fit-content !important;
    position: relative !important;
}

product-recommendations img.motion-reduce {
    width: fit-content !important;
    position: relative !important;
}


product-recommendations .card--media .card__inner .card__content {
    display: none !important;
}

product-recommendations .card__inner.gradient.ratio {
    width: fit-content !important;
    height: fit-content !important;
}

product-recommendations .card__inner.ratio:before {
    display: none !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

That's solved the text. But the split images is still happening, I think its only on products that have more than one image though, as single image products are fine. 

ThePrimeWeb
Shopify Partner
2130 609 474

Can you try incognito or something?

 

Looks fine to me

ThePrimeWeb_0-1714065415557.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

I've tried incognito, but its still showing, its not the items on the home page. If you go onto say the giraffe mini head and scroll down to the related items at the bottom. 

 

ThePrimeWeb
Shopify Partner
2130 609 474

This is an accepted solution.

Replace the code with this.

 

<style>

product-recommendations .media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

product-recommendations .card__media {
    height: fit-content !important;
    width: fit-content !important;
    position: relative !important;
}

product-recommendations img.motion-reduce {
    width: fit-content !important;
    position: relative !important;
}


product-recommendations .card--media .card__inner .card__content {
    display: none !important;
}

product-recommendations .card__inner.gradient.ratio {
    width: fit-content !important;
    height: fit-content !important;
}

product-recommendations .card__inner.ratio:before {
    display: none !important;
}

product-recommendations .media.media--transparent.media--hover-effect:has(img:first-child:not(:only-child)) {
    justify-content: flex-start !important;
}

product-recommendations .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    display: none !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

That's fixed it 🙂 

 

One last one (i promise) and then I'll buy you a coffee. 

 

The images that are landscape are still getting cropped. The first two in the picture below are an example 1.JPG

ThePrimeWeb
Shopify Partner
2130 609 474

Well, code can’t fix that. Landscape is not square, so you can’t just force it to be square. You have to upload square images.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

Wishful thinking on my part. Thank you so much for all your help!! Will go and fix those images now

ARnkn
New Member
12 0 0

Thank you again for all your help with the above last week, unfortunately since going live the related product images don't show up on an iphone (but they do on android and in the mobile view in 'Customise').

Could this be part of the code? or completely unrelated? Shopify Support are unable to help

ThePrimeWeb
Shopify Partner
2130 609 474

Hey @ARnkn,

 

Can you share the new link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0
ThePrimeWeb
Shopify Partner
2130 609 474

Hey @ARnkn,

 

There's some extra code iPhones need. Just add this as well. Don't need to replace anything, just add this below the <head>. Same instructions as above.

 

<style>
@media only screen and (max-width: 989px) {
    product-recommendations img.motion-reduce {
        height: -webkit-fill-available !important;
        opacity: 1 !important;
    }
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ARnkn
New Member
12 0 0

You are a star  Thank you so much!

rizza
Tourist
4 0 2

Hi @ThePrimeWeb 

 

I'm curious if you could help our store with this issue as well.

 

We are using the DAWN theme and I've been able to contain all the product cards except the "related products". I've attempted to use the code found in this thread but none of them are allowing the related product cards to be uniformed. See example below. 

 

Our website is josephsinspirational.ca 

 

TYSM in advance! 

 

Current:

Screenshot 2024-05-10 at 1.48.29 PM.png

 

After embedding your code:
Screenshot 2024-05-10 at 1.48.39 PM.png

 

Desired outcome:

Screenshot 2024-05-10 at 1.49.48 PM.png

ThePrimeWeb
Shopify Partner
2130 609 474

Hey @rizza,

 

I've done some changes to fit your store, try this.

 

Instructions to paste are the same as above.

<style>
product-recommendations .media.media--transparent.media--hover-effect {
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    position: relative !important;
}

product-recommendations .card__media {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

product-recommendations img.motion-reduce {
    width: 100% !important;
    position: relative !important;
    object-fit: contain !important;
}


product-recommendations .card--media .card__inner .card__content {
    display: none !important;
}

product-recommendations .card__inner.gradient.ratio {
    width: 100% !important;
    height: 100% !important;
}

product-recommendations .card__inner.ratio:before {
    display: none !important;
}

product-recommendations .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    display: none !important;
}

@media only screen and (max-width: 989px) {
    product-recommendations img.motion-reduce {
        height: -webkit-fill-available !important;
        opacity: 1 !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
rizza
Tourist
4 0 2

Oh @ThePrimeWeb , you are a true genius. Thank you so much!