I cant reduce the height of the header image on my store. I don’t know how to code either so could someone post code to reduce the height of my header image?
1 Like
- In the code editor, locate the CSS file related to your theme. It may be named something like “theme.scss.liquid” or “styles.scss.liquid.”
- Open the CSS file and add the following code at the end:
/* Adjust the height of the header image */
.header-image {
max-height: 200px; /* Change the value to your desired height */
}
- Save the changes and exit the code editor.
- Preview your store to see the updated header image height. Adjust the
max-heightvalue as needed to achieve the desired height.
Hello @NathanKim
Please add below code above in theme.liquid.
online store >> edit code >> theme.liquid
.shopify-section-group-header-group .h-screen { height: 80vh!important; }after added
i hope the given code helpful for you.
if solution is helpful for you then please like the post and tap on accepted.
Thankyou 
Hi @NathanKim ,
I understand that you want to reduce the height of the header image in your store. You can try this code.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on (theme.scss.liquid, styles.scss.liquid, or base.css) file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
- At the bottom of the file, add the following CSS code:
- And Save.
.relative.overflow-hidden.h-screen img {
height: 80%;
}
You can adjust the height whatever you like.
Result:
I hope it help.