Shopify themes, liquid, logos, and UX
How to create full size banner for different collection pages Desktop. now it is cutting of the heads of people
Hi,
Main issue it because you have verticle image on horizontal layout banner, for better result and for long term I encourage you to fix image to make it horizontal but following is a fix I can think of:
Find a file called `component-collection-hero.css` and change the update following CSS:
.collection-hero__image-container img {
top: 50% !important;
transform: translateY(-50%) !important;
}
to following by adding that new object-position property:
.collection-hero__image-container img {
object-position: 50% 22%;
top: 50% !important;
transform: translateY(-50%) !important;
}
change the second value (22%) to how much you want to position the image on the Y axis.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025