How to change the reconfigure Shopify theme company logo

I’m being asked this question allot so figured I would make a tutorial on how to change the company name from text to an image so folks can upload their company logos to the header.

Currently the theme uses the “Name of your shop” under http://yourshop.myshopify.com/admin/general_preferences and looks something like this

Ideally, you want your company logo there which is an image. Chances are, your company logo will be larger than the default height of the current setup. In this case, I’ll be using a custom logo with a new height of 122px and width of 267px.

WARNING: Before you begin, please make a backup of your current theme by going to “Assets” and clicking “Download your theme“
ie. http://yourshop.myshopify.com/admin/assets

Let’s get started

First, we’ll need to upload your new header image. In this case, I’ve saved my logo as logo.gif. Ideally, you will need to save your logo with transparency.

1. In your Shopify admin panel, under “Assets”, click on the “Theme Editor”
   ie. http://yourshop.myshopify.com/admin/assets/editor

   Look for “Theme Assets” and click “browse” to choose and upload your new logo, in this case logo.gif

2. Next, open the file all.css by simply clicking on it.Scroll down until you find /*logo*/

   The pertaining lines will look something like this:

   Old Code

   
/* Remove this comment to use an image logo. Then replace logo.gif with the name of your logo.
.logo{
background:url(logo.gif) no-repeat;
height:38px;
left:1px;
overflow:hidden;
position:absolute;
text-indent:-9999px;
top:23px;
width:195px;
z-index:100;
}
.logo a{display:block;height:100%;}
*/
.logo{
height:38px;
left:1px;
overflow:hidden;
position:absolute;
top:23px;
z-index:100;
font-size: 28px;
text-transform: uppercase;
letter-spacing: -0.1px;
font-weight: bold;
color: #332d1d;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
}

   Delete these lines and replace with the following.
   Note: change the height and width values according to your custom logo.

   New Code

   
.logo{
background:url(logo.gif) no-repeat;
height:122px;
left:1px;
overflow:hidden;
position:absolute;
text-indent:-9999px;
top:0;
width:267px;
z-index:100;
}

   If your logo has a larger height then 38px (the original height of .logo) then you’ll need to change the height of the #header as well.

3. Next, look for the following:
   

   Old Code

   
#header {
height:118px;
position:relative;
}

   For this example, replace it with the following:

   New Code

   
#header {
height:168px;
position:relative;
}

   Note: If the height of your logo is larger or smaller, you will need to adjust the height value accordingly.

4. Click save and refresh your shop.

Are you lost?

You can always have a look at my latest style sheet for the theme over at

http://static.shopify.com/s/files/1/0007/6902/assets/all.css?1244130437

My demo shop is at

http://reconfigure.myshopify.com/

If this all seems like a pain in the butt and would like to have us reduce your headaches, please feel free to contact us anytime.