Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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.