Hi,
I am using the Dawn theme, when I select Portrait image ratio for Product card, the ratio according to the documentation supposed to be 2:3 but in fact it is not it is less than that. So it is causing my images to be cropped when I dont want them too.
my website is swaace.com.au
In the screen shot above the left image is default portrait for the Theme, on the right i have forced that to 2:3 or 150%.
I dont know what to change to force all the images to be the 2:3 ratio.
Hope Someone has a solution for me. I’m sure it wont be difficult just need to know what code to change.
Thanks
Hello @rogerjet
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
img.motion-reduce {
object-fit: contain !important;
}
my reply helpful? Click Like to let me know! your question answered? Mark it as an Accepted Solution.
@rogerjet ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
Before:
After:
If it helps you, please like and mark it as the solution.
Best Regards
Hi thanks for the reply but that is not what I want as that display the images at whatever size they are so if the images are not all 2:3 then they are all different.
Thanks but that doesnt correct the aspect ratio in your example you can see the images are not all the same size.
@rogerjet , try adding this before
Sorry but that did not work either the aspect ratio still is not 2:3
Use this one
result: https://www.loom.com/share/3c316b9194fe4c08acfa2dff1e84106a
If it helps you, please like and mark it as the solution.
Best Regards
Thank you so much…really fixed all my images across the site. Strange that the Dawn theme is supposed to have portrait as 2:3 ration but is not.
Hi rogerjet, I am trying to address the same issue in my theme but the code that seemed ot work for you isn’t visible. Could you post the css snippet that you used to accomplish the 2:3 aspect ratio? Thank you!
Hi x2jones
I used this script in my theme.liquid
<script>
function setHeightForCards() {
const cards = document.querySelectorAll('.card__inner');
cards.forEach(card => {
const width = card.offsetWidth;
card.style.height = (3 / 2) * width + 'px';
});
}
document.addEventListener('DOMContentLoaded', setHeightForCards);
window.addEventListener('load', setHeightForCards);
window.addEventListener('resize', setHeightForCards);
window.addEventListener('scroll', setHeightForCards);
</script>
x2jones
October 29, 2025, 10:12pm
12
rogerjet:
<script>
function setHeightForCards() {
const cards = document.querySelectorAll('.card__inner');
cards.forEach(card => {
const width = card.offsetWidth;
card.style.height = (3 / 2) * width + 'px';
});
}
document.addEventListener('DOMContentLoaded', setHeightForCards);
window.addEventListener('load', setHeightForCards);
window.addEventListener('resize', setHeightForCards);
window.addEventListener('scroll', setHeightForCards);
</script>
It worked! Thanks so much for this!
