Shopify. How to manage logo dimensions

This tutorial shows how to manage logo dimensions in Shopify store.

Shopify. How to manage logo dimensions

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

Text logo.

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.

Image logo.

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:

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

Feel free to check the detailed video tutorial below:

Shopify. How to manage logo dimensions