Please,
thanks for your time, i appreciate it.
Hi, there!
This is May from Shopify.
Those are some good questions! You can make these changes by editing your theme settings and your theme code. Below are the steps on how to make these changes:
1. Changing the size of the header on Debut Theme.
First, you’ll want to log in to your admin, and open ‘Online Store > Customize’.
On the menu to the left, click ‘Header’. If you have a logo uploaded, you can customize your logo size, and it will automatically change the height of the header.
If you don’t have a logo, or if you only want to adjust the height, you’ll need to edit your theme code. Before making any code changes, I strongly recommend duplicating your theme, to ensure that your customers aren’t affected if you see any unintended results! After you duplicate you theme, you can proceed with the steps below:
From your admin, go to ‘Online Store > Actions > Edit Code’.
Then, you’ll see a list of folders on the left. Inside your ‘Assets’ folder, select ‘theme.scss.liquid’.
In that file, search for ‘site-header {‘, and add ‘height: [your height size here];’. This is what your code should look like:
Click ‘Save’.
2. Changing the color of the header, footer and body
To change the color of your header and footer, you’ll also need to edit your theme code.
Changing the header color
In the same file and section as above, you’ll want to edit your ‘background-color’. Replace ‘background-color: $color-body;’ with ‘background-color: #000;’. #000 is a hex color value for black. If you’d like to change this color in the future, you can replace #000 with your desired color.
Your final ‘.site-header’ code should look like:
.site-header {
height: 100px; /**adjust your height size here**/
background-color: #000;
position: relative;
padding: 0 $gutter-site;
@include media-query($small) {
border-bottom: 1px solid $color-border;
padding: 0;
}
@include media-query($medium-up) {
&.logo--center {
padding-top: $grid-gutter;
}
}
}
Click ‘Save’.
Changing the footer color
In the same file, ‘theme.scss.liquid’, search for ‘.site-footer’, and add this line: ‘background-color: #000;’.
When you add this color, you’ll see that the padding and margin has shifted. To fix this, you’ll want to remove this line: ‘margin: $section-spacing 0;’ and add these two lines: ‘margin-top: $section-spacing;’ and ‘padding-bottom: $section-spacing;’
After the edits, your final ‘.site-footer’ code should look like:
.site-footer {
background-color: #000;
margin-top: $section-spacing;
padding-bottom: $section-spacing;
@include media-query($small) {
text-align: center;
}
}
Click ‘Save'.
Changing the body color
You can change the body color from your theme settings. From your admin, click on ‘Online Store > Customize’.
On the left side, select ‘Theme Settings > Colors’.
Scroll down to the bottom and find ‘Background’. Changing this color will change the body background color.
Click ‘Save’.
It’s important to note that the 'theme.scss.liquid' can’t be reverted back to older versions, so it would be best to speak with a developer directly if you’re unsure of how to make this change. Since you are using a theme made by Shopify, if your account is eligible, our theme support may be able to look into making the change as well.
Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!
Kind Regards,
May
Shopify Support
May | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi May,
I have the same issue. I would like to change the size of header. make it not as tall as it is at the moment.
the problem is my codding looks different from what you showed.
.site-header {
background-color: $color-body;
position: relative;
padding: 0 $gutter-site;
@include media-query($small) {
border-bottom: 1px solid $color-border;
padding: 0;
}
@include media-query($medium-up) {
&.logo--center {
padding-top: $grid-gutter;
}
}
}
it doesn't have height at all. :(
Could you please help?
I also have Debut Theme.
Thanks,
Iana
I did that same theme same everything but then the div that contains the menu does not change size, the one that contains it changes tho. so it still looks same height but with a smaller div behind it
Thanks.
The change to the colour of the header leaves the whole of the inside still white using the Debut Theme?
Any idea?
User | Count |
---|---|
395 | |
202 | |
146 | |
42 | |
40 |