Debut theme Banner image - how to select the correct part of a photo to show?

Store Design
1

I need to have a specific part of an image showing in the banner image at the top of my Collections pages to show the product I’m selling, not just a randomly selected part of the image which doesn’t show anything - which is what currently happens! See:

www.wildatheartkenya.com

On the collars page, I need the COLLAR on the dog to show in the banner. I’ve tried a coding change but that just makes the banner image square which doesn’t work.

Can I edit the part of the image I want to show and select that as the banner image? If so, what proportions do I use/crop the original image to, and will it be responsive / fill the whole banner width?

Thanks so much for any suggestions.

2

Hi @WAHKdiana ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
	.collection-hero__image {
		height: 650px !important;
	}
}

Hope it helps!