How do I change the cropping of the images in Debut's All Collection grid structure?

Solved
MaryanneWells
Tourist
5 0 0

Hi there, I have recently set up my Shopify page for my earring business. While I have deliberately not chosen Collection images to feature at the top page each  of my Collections (I have just text instead), Debut is then taking my first product pic and using this as the square thumbnail when customers go to the Shop All (All Collections) page. That would be okay in itself, but it is cropping the image from the top and therefore my earrings look ridiculous and have their bottoms cut off. They look fine when they are rectangular images on the product page, but the templated square cropping is the issue. If I could control it and choose centre alignment that would be a much better long term solution for any future collections. I would just make sure my 1st product picture would always suit the crop.

 

Can I rework the Debut theme somehow to make the picture cropping on the All Collections template centred?

 

Love any feedback you have on this! Thanks.

Accepted Solutions (2)

Accepted Solutions
MS-WEB-DESIGNER
Shopify Partner
2877 180 494

This is an accepted solution.

Dear MaryanneWells,

 

Ans. In theme -> Online Store -> Action -> Edit code ->

Go to the Assets -> open theme.scss.css

Then paste this code at the bottom of file

 

.collection-grid-item__overlay {
    background-position: center;
}
Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart

View solution in original post

Akshay_V
Shopify Partner
433 16 56

This is an accepted solution.

@MaryanneWells 

You need to follow steps that are given by @MS-WEB-DESIGNER . It will solve the issue.

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help

View solution in original post

Replies 10 (10)
Akshay_V
Shopify Partner
433 16 56

@MaryanneWells 

Can you send me the store URL? So I can check the issue and give you a solution based on it. For faster resolution, you reach out to me using below contact details.

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help
Akshay_V
Shopify Partner
433 16 56

@MaryanneWells 

Do you want the same as this? https://prnt.sc/rychec

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help
MS-WEB-DESIGNER
Shopify Partner
2877 180 494

This is an accepted solution.

Dear MaryanneWells,

 

Ans. In theme -> Online Store -> Action -> Edit code ->

Go to the Assets -> open theme.scss.css

Then paste this code at the bottom of file

 

.collection-grid-item__overlay {
    background-position: center;
}
Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart

View solution in original post

MaryanneWells
Tourist
5 0 0

Yes! That is exactly the end result I am after!

 

Akshay_V
Shopify Partner
433 16 56

This is an accepted solution.

@MaryanneWells 

You need to follow steps that are given by @MS-WEB-DESIGNER . It will solve the issue.

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help

View solution in original post

MaryanneWells
Tourist
5 0 0

Thanks so much, that worked perfectly. Appreciate the help!

 

Akshay_V
Shopify Partner
433 16 56

@MaryanneWells 

You're very welcome.

Akshay Vaghasiya | Shopify Expert
Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on info@lavitastic.com regarding any help