How can I resize product image aspect ratio in Dawn theme?

Worldwidemedals · ‎01-17-2024

Hello, I am using the Shopify Dawn theme. I have thousands of product images, all with different aspect ratios. I chose the setting in the product card where all the image's aspect ratios are square. Unfortunately, it ends up cropping the images to fit in the square. How can I make the images contained inside the squares as EBAY does below? Thanks for your help.

Dan-From-Ryviu · ‎01-18-2024

Go to Online store > themes > Edit code > open theme.liquid file, add this code below after <head> element

<style> 
.ltn__product-list-view .image-position-wrapper {
padding-bottom: 100% !important;
background: #00000024; 
}
.ltn__product-list-view .image-position-wrapper .image-position-size {
    position: absolute!important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-18-2024

Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom

#product-grid .card__media .media img {
object-fit: contain;
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

DelightCart · ‎01-18-2024

@Worldwidemedals I need your store URL to check it.

⚡️ Delight Cart - It's time to turn your visitors into loyal shoppers! ✨

⚡️ Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.

Dan-From-Ryviu · ‎01-18-2024

Hi @Worldwidemedals

Could you share your store URL so I can check and provide the code to do it?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Worldwidemedals · ‎01-18-2024

https://worldwidemedals.net/?_ab=0&_fd=0&_sc=1

Dan-From-Ryviu · ‎01-18-2024

Go to Online store > themes > Edit code > open theme.liquid file, add this code below after <head> element

<style> 
.ltn__product-list-view .image-position-wrapper {
padding-bottom: 100% !important;
background: #00000024; 
}
.ltn__product-list-view .image-position-wrapper .image-position-size {
    position: absolute!important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Worldwidemedals · ‎01-18-2024

Thank you! This worked for my current theme, but I would like to do it for the DAWN theme. (I just made it the current theme)

WorldWideMedals

Dan-From-Ryviu · ‎01-18-2024

Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom

#product-grid .card__media .media img {
object-fit: contain;
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Worldwidemedals · ‎01-18-2024

Thank you for your help! I've been trying to figure this out for weeks.

Dan-From-Ryviu · ‎01-18-2024

Happy I could help!

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Tom_Brett · ‎08-27-2024

Hi Dan,

Any help with ours? That code didn't seem to work for me.

See on this page where the yellow bass is larger then the others.
https://shop.coastacademyofmusic.com/collections/bass-guitar

Dan-From-Ryviu · ‎08-27-2024

Hi @Tom_Brett

Please use this code for your theme

<style>
.card--card, .card--standard .card__inner {
    --ratio-percent: 100% !important;
}
.card--standard .card__inner img {
  object-fit: contain !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Tom_Brett · ‎08-27-2024

YOU ARE THE GREATEST!!! One last thing is possible. How do I do the same
with the product page?

See how these all go to different sizes? Id love to avoid that

https://shop.coastacademyofmusic.com/products/markbass-yellow-pb-bass-w-laurel-fretboard

Dan-From-Ryviu · ‎08-27-2024

Please update the code

<style>
.card--card, .card--standard .card__inner {
    --ratio-percent: 100% !important;
}
.card--standard .card__inner img {
  object-fit: contain !important;
}
.product__media-wrapper .product__media { padding-top: 100% !important; }
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

PartyFair · ‎01-18-2025

Thank you, this worked but there are grey bars above and below the image. How do I make this white?

itsleonforshort · ‎04-05-2024

Hi Dan. How about this website? How do I know how big the image resolution of the center image. I would like to copy the Origin theme's resolution.

UNCLOUDED (uncloudedshades.com)

Dan-From-Ryviu · ‎08-27-2024

Hi @itsleonforshort

Your store is unavailable.

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How can I resize product image aspect ratio in Dawn theme?

How can I resize product image aspect ratio in Dawn theme?

Community Blog Articles