How to change collection image height on the collection page? - Debut theme

Solved
Highlighted
Tourist
6 0 4

I want to change the collection image height on each of my collections page. The image is getting cut off and i cant manually adjust what appears on the page?

0 Likes
Highlighted
Shopify Partner
482 86 134

This is an accepted solution.

You mean collection image itself or products height per collection ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
1 Like
Highlighted
Tourist
6 0 4

The collection image itself at the top. I want to increase its height as its cutting out the majority of the image.

2 Likes
Highlighted
Shopify Partner
482 86 134

This is an accepted solution.

Yes, you can have overwrite the default styles.

Click on Actions button and go into Edit Code.

Here search/open theme.scss.liquid file.

 

Scroll at the very bottom and add the following codes.

.collection-hero__image{
  height: 400px;
}

// Below goes styles for mobile
@media screen and (max-width: 749px) {
  .collection-hero__image{
    height: 200px;
  }
}

Play with 400px and 200px (for mobile) to get the result you want.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
4 Likes
Highlighted
Tourist
6 0 4

Thanks Sarhov. It is now working! Appreciate your help!

 

 

1 Like
Highlighted
Tourist
3 0 0

Do I just copy and paste what you have there? I cant find where it goes, either! Argh! Sorry, just struggling with my collections page top image being cut very short! Width is fine!

0 Likes
Highlighted
New Member
2 0 0

I copy and paste it , not working

can you advise

0 Likes
Highlighted
New Member
1 0 0

Hi, 

Were you able to resolve this? I have been trying to use the above code also without any luck. 

 

Thanks!

0 Likes
Highlighted
Tourist
3 0 0
No. I could not change it. I ended up just removing the banner all together
and just having a title.
Sorry I can't help!
Debut is a great web format, but their banners are very much in need of an
upgrade!
Kind regards.
0 Likes
Highlighted
Tourist
3 0 0

It looks like this in my store. Much more professional than a quarter height banner!

https://atptextures.com/collections/texture-sets

0 Likes