Solved

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

Worldwidemedals
Tourist
8 0 3

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.military medals for sale _ eBay and 6 more pages - Personal - Microsoft​ Edge 2024-01-17 11_44_32 PM.png

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
7729 1507 1515

This is an accepted solution.

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>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Dan-From-Ryviu
Shopify Partner
7729 1507 1515

This is an accepted solution.

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;
}

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 9 (9)

DelightCart
Shopify Partner
1238 82 157

@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
Shopify Partner
7729 1507 1515

Hi @Worldwidemedals 

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7729 1507 1515

This is an accepted solution.

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>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Worldwidemedals
Tourist
8 0 3

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
Shopify Partner
7729 1507 1515

This is an accepted solution.

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;
}

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Worldwidemedals
Tourist
8 0 3

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

 

Dan-From-Ryviu
Shopify Partner
7729 1507 1515

Happy I could help!

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

itsleonforshort
Excursionist
26 1 0

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)