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

Solved
Tourist
6 0 3

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

Success.

Shopify Partner
455 80 101

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
Messenger: @sarhov
Telegram: @sarhov
1 Like
Tourist
6 0 3

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

1 Like

Success.

Shopify Partner
455 80 101

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
Messenger: @sarhov
Telegram: @sarhov
2 Likes
Tourist
6 0 3

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

 

 

1 Like
New Member
1 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