Product Image Aspect Ratio for 'Related Products'

ARnkn · ‎04-25-2024

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.

ThePrimeWeb · ‎04-26-2024

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

ThePrimeWeb · ‎04-25-2024

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 · ‎04-25-2024

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

ThePrimeWeb · ‎04-25-2024

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.

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 · ‎04-25-2024

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 attached

ThePrimeWeb · ‎04-25-2024

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 · ‎04-25-2024

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)

ThePrimeWeb · ‎04-25-2024

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 · ‎04-25-2024

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 · ‎04-25-2024

Can you try incognito or something?

Looks fine to me

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 · ‎04-26-2024

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 · ‎04-26-2024

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 · ‎04-26-2024

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

ThePrimeWeb · ‎04-26-2024

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 · ‎04-26-2024

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

ARnkn · ‎05-02-2024

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 · ‎05-02-2024

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 · ‎05-02-2024

Sure, its: https://www.fionawalkerengland.com/

ThePrimeWeb · ‎05-02-2024

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 · ‎05-02-2024

You are a star ⭐ Thank you so much!

rizza · ‎05-10-2024

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:

After embedding your code:

Desired outcome:

ThePrimeWeb · ‎05-11-2024

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 · ‎05-14-2024

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

Littleboutique · ‎07-13-2024

Heyy!! Please help to fix my store my product and image not showing on my website

Product Image Aspect Ratio for 'Related Products'

Product Image Aspect Ratio for 'Related Products'

Community Blog Articles