How to manage logo dimensions in Shopify

How to manage logo dimensions in Shopify

Logo can be set up as a text or as an image.

In case it is used as a text, you have to use Firebug or any other tool to inspect the element and locate the CSS class used for it. The CSS class should look similar to the following one:

#logo b {
  display: block;
  font: normal 180px/1em 'Yesteryear';
  color: {{ settings.color_1 }};
  text-transform: lowercase;

Now you can open your site admin panel and navigate to the Themes> Customize theme section.


Select Edit HTML/CSS > Assets> style.css.liquid file from the list.


Search for the CSS class you have located before. It contains the font size. Edit the number to enlarge the logo and save changes. Refresh the site to see the result.

Logo can be set up as an image as well. In this case you change its size in another file.

Navigate to the Themes > Customize theme > Edit HTML/CSS > Configs tab and open settings.html file from there. Locate the line for the logo image. It should look as follows:

<td><input  type="file" name="logo.png" id="logo_image"  data-max-width="940" data-max-height="300" /></td>

Edit width and height from there (it is set up in pixels by default) and update changes.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.