How can I increase the size of my logo in the Debut theme?

Store Design

Topic summary

Increasing the header logo size in Shopify’s Debut theme beyond the default limit. The built-in “Custom logo width” slider in Customize > Header often doesn’t affect the logo because the theme applies an inline max-width.

Working approaches reported:

  • Add a CSS override in Assets > theme.scss.liquid targeting the logo image (e.g., .site-header__logo-image img or .site-header__logo img) with max-width and, if needed, width, both with !important. This helped several users (desktop first); verify mobile behavior.
  • Edit Sections > header.liquid to raise the theme setting’s range (e.g., increase logo_max_height or max pixels from 250/60px to higher values like 300–500px), then adjust via the theme editor slider. This worked for multiple users; mobile may still need CSS.

Issues and questions: Some users still can’t get changes to apply; logos became off-center after enlarging; removing extra padding below the header via CSS worked inconsistently; moving the search bar for full-width logos wasn’t answered.

Artifacts: Screenshots in posts show where to change the logo_max_height parameter.

Outcome: Mixed success with code overrides or setting range edits; thread remains open with unresolved centering/layout concerns.

Summarized with AI on January 1. AI used: gpt-5.
1

Can anyone point me in the direction of where in the coding I can make my store name/logo larger in the header section on my website? I don’t want it to be the full width of the page, but probably around twice the size it currently allows me to go

TIA

2 Likes
2

anyone?

3

Hello Karen,

Please follow these steps to do that:-

  1. Login to your store
  2. Click Customize > Header
  3. There you can see “Custom logo width (in pixels)” just increase it to twice of current value and click save.

Hope that helps!

4

Thanks Sagar for your response, I have tried that, but it does not make my logo any bigger

Currently the pixel width is 5000… and the image is the same size even if it is set to 300!!

5

Hello Karen,

If it does not work in this way then you have to write the code yourself, for that-

  1. Login to your store
  2. Click on Action > Edit HTML/CSS
  3. Open the file theme.scss.liquid and at the bottom add this code

.site-header__logo-image img {

max-width: 200px !important;

}

You can increase the value to 250 or 300 or whatever that you need.

4 Likes
6

Hi Sagar, thankyou very much, that helps alot :slight_smile: Just one other question, If I decided to make it the full width of the page, what piece of coding would I need for that? and would I need to figure out how to move the search bar (which is currently on the left hand side of my logo)?

7

Hi! I tried the solution posted above, but still can’t make my logo bigger, is there something I’m missing?

3 Likes
8

Hi Jose, I still can’t find out how to do this, if you can, will you please post it here?

1 Like
9

Doesnt work :frowning:

1 Like
10

Not working for me either

1 Like
11

Hi! I’ve found the solution for this in case you wanted an update.

  • Go to themes - edit code - sections - header.liquid

  • Then find with clrt+f the max of pixels that you were allowed before, for example 250 and change it to 300 (max), and save.

  • Now when you go back to the theme editor you’ll see that you can now go up to whatever amount you wrote on the code.

5 Likes
12

That doesn’t work. There’s nowhere in the Theme settings that allows you to adjust logo size, not from what I can see anywhere. I did change the numbers in the CSS but it doesn’t do anything.

13

It worked fine for me. You just have to find the line where the logo info is.

14

The max-width property is applied the logo image element by the theme inline. You can override this as follows:

  • Go to Online Store/Themes/Actions/Edit Code
  • Open ‘theme.scss.liquid’ from the Assets folder
  • Scroll all the way to the bottom and add in these lines of code (note, 290px was the width that worked for me, you should change that number to suit your logo and site).
.site-header__logo-image img {
  max-width:290px!important;
}
  • Hit ‘Save’ and this should do the trick.

Check that the logo is still good at smaller screen sizes as this will only affect sizes around laptop and above.

There are other references to how the max-width is set in other theme files, and this is an over-ride so a bit hacky. But it works and won’t break anything.

1 Like
15

can’t get any of these suggestions to work. any other suggestions? Thanks

16

Hello! Can’t make that way logo bigger as well. Please help! Also I noted on the first same code extra space after exclamation mark, but I tried with space and without and still doesn’t work.

17

Need to make it as well!:wink:

18

Sorry to hear that. Can you share your site address for me to check?

19

Www.facemaskwithfilters.com

20

Assuming you wan to make the logo 400px wide on desktop, try adding:

.site-header__logo img {
  max-width: 400px!important;
  width: 400px!important;
}

Adding in the ‘width’ as well works for me when I try it out in your site, though I don’t need it on another site we built recently.

By the way, how big do you want the logo? I’m thinking it looks right at around 200px wide.

Hope this works for you, and good luck with sales!

4 Likes