Resize your website logo

When you upload a logo to your Customize theme page, Shopify will resize it so that it fits within bounds set by your theme. Usually, the logo is scaled down to fit within those bounds. Sometimes, the image file fits the bounds without needing to be resized. Your logo will never be scaled up, because this would cause pixelation problems.

Understanding the image size constraints

Shopify imposes these limits on the width and height of your logo to ensure that it fits within your Shopify theme layout. The limits prevent your theme layout from breaking if your logo is too wide or too high.

Finding your logo size settings

In the section of your Customize theme page where you upload your logo, you should see clear instructions on the ideal size for the image. For example, you might see: Recommended dimensions: 215px x 75px. If an optimal size is suggested, it means that your Shopify Theme will resize your logo so that it fits those limits.

Removing the image size constraints

You can remove the image size constraints, but at your own risk. If you remove the limits, your logo will no longer be resized, which could create problems in your theme layout.

If you still want to experiment with different constraints, follow these instructions to remove the restrictions on width and height:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Locate and click on the Configs folder to see the content in the folder.

  4. You will find 2 or 3 files under Configs. These are: settings_schema.json and settings_data.json. The settings_schema.json file contains your Customize theme page's form. Click on settings_schema.json to open it in the online code editor.

  5. Press ctrl + F on a PC or command + F on a Mac, and search settings_schema.json for logo.png. This will help you locate the logo upload section in your Customize theme page's form.

  6. Below logo.png, you'll see 2 attributes called max-width and max-height. The JSON code will look similar to this:

    ,
          {
            "type": "image",
            "id": "logo.png",
            "label": "Custom logo",
            "max-width": 450,
            "max-height": 100,
            "info": "(Recommended dimensions: 215px x 75px)"
          }
    

    You now have 2 options:

    • You can edit the max-width and max-height values to your desired width and height in pixels.
    • To remove the constraints completely, you can remove both of these attributes from your code, which will then look like this:
    ,
        {
          "type": "image",
          "id": "logo.png",
          "label": "Custom logo",
          "info": "(Recommended dimensions: 215px x 75px)"
        }
    
  7. Save your file.

  8. When you've saved your edits, go to the Customize theme page. and reupload your logo. The changes won't be implemented until you do this.

Want to discuss this page?

Visit the Shopify Community