How to edit Collection banner image, Debut theme

WAHKdiana
Tourist
4 0 3

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.

Replies 15 (15)

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WAHKdiana
Tourist
4 0 3
Hi
You can see the live site on wildatheartkenya.com

Look forward to hearing what you think….

Thank you!
KetanKumar
Shopify Partner
36839 3635 11972

@WAHKdiana 

@WAHKdiana 

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.
 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
madari21
Excursionist
24 0 3

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:

 

madari21_0-1605475074746.png

 

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sassy-pets
Tourist
7 0 2

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 ?

 

sassy-pets_0-1605678444480.png

 

madari21
Excursionist
24 0 3
KetanKumar
Shopify Partner
36839 3635 11972

@madari21 

Thanks 

sorry i can't see this section 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
madari21
Excursionist
24 0 3
KetanKumar
Shopify Partner
36839 3635 11972

@madari21 

Thanks 

sorry it's not

KetanKumar_0-1606276307310.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sdc-watches
Tourist
9 0 4

Hello - I have the same problem but the code you shared doesn't provide a fix. Are you able to assist please?

KetanKumar
Shopify Partner
36839 3635 11972

@sdc-watches 

can you please share store url please  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WAHKdiana
Tourist
4 0 3

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

KetanKumar
Shopify Partner
36839 3635 11972

@WAHKdiana 

yes, please upload feature collection image on shopify admin 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing