Solved

Dawn Theme - Product Grid Images

thewolf22
Tourist
5 0 1

Hey there! 
Wondering if anyone could help me out with an issue I have with the product grid inside collections using Dawn Theme.

The product images are being cropped. Only option they are not being cropped is when 'Adapt to image' is selected however then products are completely misaligned and it looks awful.
I would like to use the square option for images but have the images scaled rather than cropped (even though a lot of my images are similar in size). I can't share link as at this stage my current theme is different and I'm only preparing to switch to Dawn and I'm stuck with this issue.

Hoping for any guidance on this. If not thanks for taking the time to read. Cheers.

Accepted Solution (1)
Schoppifyer
Tourist
5 1 4

This is an accepted solution.

I've solved the problem.

In the product grid you set the image ratio to square -> products are nicely aligned but images are cut off

In "edit code" go to "assets" and find base.css

find the following code: 

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

replace "cover" with "contain"

.media > img {
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

 

I needed to clear browser cache but now it seems to be working - no more cut off images!

View solution in original post

Replies 12 (12)

dmwwebartisan
Shopify Partner
12280 2546 3693

@thewolf22 

Please share store URL & screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
thewolf22
Tourist
5 0 1

Hey @dmwwebartisan unfortunately its not my active theme at the moment so I can't share link. Im just trying to stop product grid cropping images - instead I want it to scale down the images to fit within the square.

Schoppifyer
Tourist
5 1 4

I have the exact same problem. Did you find a solution for this?

Thanks!

jphg
Excursionist
30 0 7

"misaligned" -> So you mean your images have not the same ratio?

edit: wouldn't an image processing app help here?

Like this one : https://apps.shopify.com/bulk-image-edit ?

Features:

  • Bulk update image alt text and file name with customizable templates to represent your store name, product name, product type, etc
  • Set and forget, automatically update all newly added images with the defined Alt text and file name templates
  • Minimize Product or Theme Asset image file sizes without image quality loss
  • Resize all product images to square shape, the most popular image shape, to standardize images on your website and on social networks such as Facebook or Instagram
  • Resize/crop/Frame/Trim product images so that all your product images are same in width or height
  • Add text or image based watermarks to protect your product images from being stolen by competitors
  • Preview the products that will be edited before creating a task
  • Review the images that have been edited with our well-structured logs
  • Option to revert/undo any changes that have been made
thewolf22
Tourist
5 0 1

Thanks for your response but no, Image resizing was not the solution. All my images are same size prior to uploading to begin with. Anyways I've ditched the theme, its absolutely rubbish has issues everywhere.

Schoppifyer
Tourist
5 1 4

This is an accepted solution.

I've solved the problem.

In the product grid you set the image ratio to square -> products are nicely aligned but images are cut off

In "edit code" go to "assets" and find base.css

find the following code: 

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

replace "cover" with "contain"

.media > img {
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

 

I needed to clear browser cache but now it seems to be working - no more cut off images!

Logius
Explorer
48 0 14

@Schoppifyer Hello, I am using Dawn theme too but for some reason, it does not work on our website. Could you see why the images are still being cut off? 

artt
Visitor
2 0 0

Hi Schoppifyer,

 

Thanks for this, it partially fixed the problem, some smaller horizontal images get stretched, is it possible to contain those images(I have added screenshots)? Thanks, Art.

 

SMALL SIZE HORIZONTAL IMAGE (Stretched)

horizontal image.png

NORMAL SIZE IMAGE

normal image.png

  

mooseshoes
Shopify Partner
17 0 2

This was immensely helpful.  Thank you.

mooseshoes
Shopify Partner
17 0 2

I spoke a bit too soon.  The change also altered images on my home page which looked better with the "cover" option.  Any thoughts on per-page changes?  Thanks.

LeitzMusic
Visitor
1 0 0

For some reason, this code wouldn't come up with FIND...so i had to scroll the entire code to find it

Jahid-KlinKode
Excursionist
145 1 4

Hey @thewolf22, if you're struggling with product grid image issues in Shopify Dawn Theme, watch this quick tutorial: https://www.youtube.com/watch?v=LNCzj6cxw1s.