Dawn Theme - Product Grid Images

Solved
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)

Accepted Solutions
Schoppifyer
New Member
2 1 2

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 6 (6)
dmwwebartisan
Shopify Partner
9829 2237 3078

@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 | Bag is a cart drawer that maximizes your sales. View 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
New Member
2 1 2

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

Thanks!

jphg
Excursionist
22 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
New Member
2 1 2

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