Shopify themes, liquid, logos, and UX
Hi, I have a square image on the home page as my collection image, but when clicked on to the collection page, it comes up as a banner and I cannot find a way to move the image within the banner frame to display the (lower) part of the image in the banner. Is there a way to solve this? Or, a way to upload/save a different image on the collections page banner, to show the product (which is lower in the frame of the home page collection image). Thanks for any suggestions.
Hello, @WAHKdiana
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-hero__image {
background-size: contain;
height: 450px;
}
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
hi this work perfectly now are you able to tell me how I can change the Collection text from middle of picture to bottom of picture? and change the font please:
Hello, @madari21
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi Ketan I did understand what you sent on the code perhaps, may be a different question.
How can you show the image as banner (when you enter in the collection) and not having troubles changing size on phones, and also; How to show them as square on the front end page ?
Thanks
sorry i can't see this section
Thanks
sorry it's not
Hello - I have the same problem but the code you shared doesn't provide a fix. Are you able to assist please?
can you please share store url please
Hi Ketan,
Been a while since I asked this and I think Debut has been updated.
I have another collection online now and need to be able to move the banner image around in all the banners of the Collections section. You can see the live site at: wildatheartkenya.com - the Wild at Heart Foundation Collection you can see that the banner photo shows the dog's nose, but I want it to show the collar section of the photo. I also want to do this on the other collar pages so it's the collar section of the photos which are across all the banner images. I saw one reply which said your code didn't provide a solution; please check this and it would be super helpful if you might provide another set of instructions on where to paste this in to the site please? Thank you so much. Diana
yes, please upload feature collection image on shopify admin
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024