Increasing the logo size on the Pitch theme?

[petandposy]

No matter what code I try, I cant seem to override the logo size option in the editor it just says the max is 100px, which isn’t large enough for the desktop look I am going for.

[eva_greene]

Hi @petandposy,

Try adding this CSS in your theme’s Custom CSS section or in Assets/theme.scss.liquid:

.site-header__logo img {
  max-height: 150px !important;
  width: auto !important;
}

Adjust the 150px to your preferred size. This usually overrides the editor’s max limit.

[sadik_ShopiDevs]

Hello @petandposy
If you’re using the Pitch theme, the logo size setting in the theme editor is capped at 100px. You can override that limit with a small CSS tweak.

1. Go to Online Store → Themes → Edit Code

2. Open Assets → base.css

3. Scroll to the very bottom of the file

4. Paste the following code:

   /* Desktop */
   .header-logo__image {
       width: 200px !important;
       height: auto !important;
   }
   
   /* Mobile */
   @media (max-width: 749px) {
       .header-logo__image {
           width: 160px !important;
           height: auto !important;
       }
   }
   

5. Save the file and refresh your storefront.

This should increase the logo width to 200px on desktop and 160px on mobile, regardless of the theme editor’s 100px limit.

If you’d like it even larger, simply adjust the 200px value to your preferred size.

[SectionKit]

Hello @petandposy, Have you tried to add the code in the Custom Css input?

[tim_tairli]

Your theme shares code with the rest of Horizon family.

So one option is to edit theme code to allow for bigger size – change values in "max" lines, for desktop and mobile (would also require increasing the “step”):

config/settings_schema.json

To avoid theme code edits, it’s possible to use “Custom CSS” setting of the ‘Header’ section:

.header-logo__image {
  /* for desktop */
  --header-logo-image-width: 200px !important;
  --header-logo-image-height: 200px !important;
  /* for mobile */
  --header-logo-image-width-mobile: 75px !important;
  --header-logo-image-height-mobile: 75px !important;
}

Set width and height according to your need and logo proportions – for square image height equals width…

[petandposy]

this created more room in the header, but didn’t change the logo image size

[petandposy]

@sadik_ShopiDevs

/* Desktop */
.header-logo__image {
    width: 200px !important;
    height: auto !important;
}

/* Mobile */
@media (max-width: 749px) {
    .header-logo__image {
        width: 160px !important;
        height: auto !important;
    }
}

this helped, but the image is blurry despite being high res

[NKCreativeSoulutions]

What type of file is your logo? A .svg is the best, if you have one.

[petandposy]

Its png which I have always used with no issues

[Maximus3]

Let’s establish the correct website and logo. This you? It’s always a good idea to let people know what the website is so they can check.

Alright, so there are some things that are being misunderstood.

Looking at this logo image, it is not high res…

First, intrinsic value tells me that the image, when you open it in any editor like Photos or Photoshop, is 300x200. When you increase the rendered size beyond the actual image size, it becomes stretched and pixelated.

Second, look at this image. It has a lot of empty space. That 300px width should be more like 170px when you take out the transparent pixels. The height can also be adjusted here. This image doesn’t need all 200 pixels.

So what I would do, is open in an editor like Photoshop or Canva, figure out what image size is good for my logo, resize accordingly, and crop the transparent pixels. Only then would I edit the theme code to accommodate how the header renders the logo.

[petandposy]

Yes but that is not the image size I am uploading, thats part of the problem. The image I upload is 360dpi 1000px wide. Theres no reason it should look so pixelated or be showing as 300x200.

[Maximus3]

Perhaps you are using a different image for the theme than the one you uploaded. This is pretty common. Or you used an seo app to compress it. As it stands your image is not 1000px. It is 300x200 showing at 400x267. Sorry but that’s what’s going on. That is the reason it looks pixelated. However you want to fix that, whether you want to re-examine and re-upload, now you know what’s going on. But I would concentrate on fixing this first before messing with the custom CSS.

[petandposy]

This is the image directly from photoshop and what I uploaded.

[Maximus3]

You should be able to trace the steps. The image url perameter states that it has a height of 200. Its filename is june_western_logo_b.png. So just go to your Admin → Content → Files and search for that image filename and verify if that’s the correct one. If not, re-upload and re-assign.

[Maximus3]

Looks pretty good now

[tim_tairli]

Theme code automatically resizes your logo image file based on the “Logo” → Height setting under “Theme settings”.

CSS only solution would be ok’ish if you want to make your logo just a tad bigger, but if you’re enlarging it 2 or 3 times, the result will be blurry.

Therefore, the proper fix would be the theme code edit I’ve suggested above

Keep in mind that range setting allows for 100 steps max, so if you need to get to 300px “maximum” it will require a step of 5.
And amend “min” and “default” to be divisible by “step” – like this

  "min": 20,
  "max": 300,
  "step": 5,
  "default": 50,

[Custom-Cursor]

@petandposy

No matter what code I try, I cant seem to override the logo size option in the editor it just says the max is 100px, which isn’t large enough for the desktop look I am going for.

Hello, @petandposy
Hope this message finds you well!
If the theme caps the logo at 100px, it’s likely a hardcoded limit in the theme schema. You’ll need to edit the theme code to increase max value for logo size settings.

[sadik_ShopiDevs]

Hello @petandposy

Glad that helped!

If the logo looks blurry after increasing the CSS width, it’s usually because the uploaded logo image itself is only being served at the original size (for example, 156px wide). CSS can make it appear larger, but it can’t add extra detail.

I’d recommend uploading a higher-resolution logo (e.g. 400–600px wide, or even a 2× version if possible) in Theme Settings → Logo, then keep the CSS width at 200px. The browser will scale the larger source image down, resulting in a much sharper logo.

If you’ve already uploaded a high-resolution logo, let me know its dimensions (or share the file), and I can help check if the theme is serving a smaller image version that needs a different solution.