Shopify Pitch Theme: How to Increase Logo Size Beyond 100px & Fix Blurry Images

Hey everyone! As a Shopify migration expert, I spend a lot of time diving into the community forums, and a common head-scratcher that pops up time and again is around logo sizing. Especially with themes like Pitch, merchants often hit a wall: the theme editor caps their logo at a seemingly arbitrary 100 pixels. This common frustration, highlighted by @petandposy in a recent community thread, often leads to blurry images when forced larger. The community offered fantastic insights on overriding limits and tackling blurriness. Let's get your brand looking sharp!

Understanding the Logo Size Challenge

Themes like Pitch often have a hardcoded 100px logo limit in their schema, as @Custom-Cursor noted. Forcing a larger display with CSS often results in blurriness. @sadik_ShopiDevs and @Maximus3 explained why: CSS can't add detail to a low-resolution source image. Even if you upload a 'high-res' image, Shopify might serve a smaller version, or the image itself might have excessive transparent padding.

Method 1: The Quick CSS Override (and its limitations)

For a quick fix, especially for slight increases, custom CSS can override the 100px limit. However, @tim_tairli warns against significant enlargement with CSS alone if your source image isn't optimal.

Here's @sadik_ShopiDevs's method for your base.css file:

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.

You can adjust the 200px and 160px values to your preference. Alternatively, @tim_tairli offered a version using CSS variables, which you could place in your theme's 'Custom CSS' section within the Header settings:

.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;
}

Method 2: Solving the Blurry Logo Mystery (The Most Important Step!)

This is where @petandposy ran into trouble, even with what they thought was a 'high-res' image. The community quickly zeroed in on the real culprit: the source image itself. As @sadik_ShopiDevs wisely put it, "CSS can make it appear larger, but it can’t add extra detail."

@Maximus3's diagnosis of @petandposy's image being served smaller than expected, despite a high-res upload, highlights common issues like Shopify's automatic resizing, excessive transparent padding, or SEO compression. Here's how to ensure your logo is crystal clear:

Step-by-Step for a Sharp Logo:

1. Inspect the Served Image: Go to your live store, right-click your logo, and select 'Inspect' (or 'Inspect Element'). Look at the src attribute of the tag. Does it have a parameter like ?width=300 or ?height=200? This tells you what size Shopify is actually serving. Also, check the 'Natural' or 'Intrinsic' dimensions of the image file itself in the inspector. Here are some of the images @Maximus3 shared during the diagnosis:

   

   

   

   

2. Optimize Your Source Image:
   • Crop Aggressively: Open your logo in an image editor (like Photoshop, GIMP, or Canva). Crop any unnecessary transparent space around your actual logo design. @Maximus3 noted that @petandposy's 300px width could be more like 170px if transparent pixels were removed. Here's @petandposy's uploaded image:

     

   • High-Resolution Upload: Upload a truly high-resolution version. @sadik_ShopiDevs recommended 400-600px wide, or even a 2x version (meaning if you want it to display at 200px, upload it at 400px). The browser will then scale this larger image down, resulting in a much sharper look.
   • Consider SVG: @NKCreativeSoulutions hit the nail on the head: if you have an .svg (Scalable Vector Graphic) version of your logo, use it! SVGs scale infinitely without any pixelation because they're based on mathematical paths, not pixels. This is the absolute best format for logos.
3. Upload to Shopify: Go to Theme Settings → Logo and upload your newly optimized, high-resolution logo. Make sure it's the correct file! You can also check your Admin → Content → Files section to verify the dimensions of the file Shopify has stored, as @Maximus3 suggested.
4. Re-apply CSS (if needed): Once your source image is good, then you can apply the CSS override from Method 1 if you still need to push past the theme editor's slider limits. The larger source image will now scale beautifully.

Method 3: Editing Your Theme Schema for Native Control (Advanced)

For those who want a truly integrated solution that updates the theme editor's slider itself, @tim_tairli provided a more advanced method: editing your theme's settings_schema.json file. This is a powerful change because it means you won't need custom CSS overrides; the theme's native settings will simply allow for a larger size.

A crucial word of caution here: Always duplicate your theme before making any code edits. This provides a safe rollback point!

Here’s the gist of what @tim_tairli suggested, referencing the Pitch theme's shared code with the Horizon family:

1. Go to Online Store → Themes → Edit Code.
2. Locate and open config/settings_schema.json.
3. Find the sections related to logo_height and logo_height_mobile. You'll be looking for code similar to this snippet @tim_tairli shared:
4. Adjust the Values: You'll want to change the "max" value to something higher, like 300. Remember @tim_tairli's advice that the range setting typically allows for 100 steps max, so if your max is 300, your step should be 5 (300/5 = 60 steps). Also, make sure your min and default values are divisible by your new step value. So, you might end up with something like:

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

5. Save your changes. Now, when you go back to the Theme Editor, your logo height slider should allow for much larger values!

As you can see, what started as a simple question about logo size on a Shopify theme quickly uncovered layers of image optimization, CSS overrides, and even theme code adjustments. The key takeaway from the community discussion is that a crisp, perfectly sized logo often requires a two-pronged approach: first, ensuring your source image is high-resolution and properly cropped, and only then applying CSS or theme schema edits to achieve your desired display size. Don't be afraid to experiment, and always remember to back up your theme before diving into the code. Happy customizing, and here's to a beautifully branded storefront! If you're just starting your journey to build an amazing online store, remember that Shopify makes it incredibly easy to get set up and focus on what you do best.