Dawn Theme Photos of Products Zoomed and cropped

Solved

Dawn Theme Photos of Products Zoomed and cropped

jkadgconcepts
Tourist
6 0 1

Hello All,


I have been researching this issue but have not found any viable solutions as of yet. When our products are viewed from the catalog or collections view the photos are zoomed in and cut off on the majority of the photos. I have found information on this that there is a way to adjust the photo before uploading to make them all uniform. Regardless, does anybody have the most efficient option on adjusting these photos to ensure that the images are not cut off and you can see the entire product image? If there is no coding to help this situation, is there an app integration or a 3rd party application that can be recommended to adjust all of our photos to look uniform? 

 

If you do recommend an application to resize the photos are there specific dimensions to stick to?

 

In the photo below we are happy with the two product on the edges, but the ones enclosed in the middle are needing to be zoomed out and not "cropped". 

Screen Shot 2024-05-28 at 10.10.05 AM.png

Thank you in advance for the help!

Our shopify web link is airpipingdirect.myshopify.com

password to enter the site is shopify123

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @jkadgconcepts

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716910311989.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716910318304.png

 

Step 3: Insert the below code at the bottom of the file -> Save 

.card__media .media img {
  object-fit: contain !important;
}

Here is result: 

BSSTechVenture_2-1716910360165.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @jkadgconcepts

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716910311989.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716910318304.png

 

Step 3: Insert the below code at the bottom of the file -> Save 

.card__media .media img {
  object-fit: contain !important;
}

Here is result: 

BSSTechVenture_2-1716910360165.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

jkadgconcepts
Tourist
6 0 1

Thank you so much, your response was so quick and worked perfectly!