Liquid, JavaScript, themes, sales channels
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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.
Solved! Go to the solution
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; }
This is an accepted solution.
@MaryanneWells
You need to follow steps that are given by @MS-WEB-DESIGNER . It will solve the issue.
@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.
@MaryanneWells
Do you want the same as this? https://prnt.sc/rychec
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; }
Yes! That is exactly the end result I am after!
This is an accepted solution.
@MaryanneWells
You need to follow steps that are given by @MS-WEB-DESIGNER . It will solve the issue.
Thanks so much, that worked perfectly. Appreciate the help!
@MaryanneWells
You're very welcome.
Hello I am looking to solve the same issue. I have tried editing my code and entering
.collection-grid-item__overlay { background-position: center; }
its better but it still crops off some of my image. Using debut. sacr3detching.com is my site
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022