From Shopify Wiki

The Image Method

In this section, we'll physically add our logo image to our theme by inserting it into theme.liquid and make it look right with our stylesheet, layout.css.

Adding Your Image

First we need to copy our logo file to the theme. Hopefully, your logo is already optimized for the web and is in either a .JPG, .GIF, or .PNG, and that you've made note of it's name and size. For the sake of this tutorial, let's say our logo is 250px wide by 120px tall and it's filename is StoreLogo.gif. This is a bit on the large side of what we'd normally want for our logo, but it should make for a good example.

Note: If you're new to this, px is simply an abbreviation for pixels. If you are unsure of your logo's size, you can usually get the dimensions of an image file by viewing it's properties or info details, depending on your operating system.

Step 1: Copy your logo into your Dropify theme's assets folder.

Step 2: Open theme.liquid - which resides in your theme's layout folder - in your favorite text editor and delete the following code, which is probably hanging out around line 42:

<h1 id="logo"><a href="/" title="Go Home">{{shop.name}}</a></h1>

We want to *replace it with this* mixture of HTML and Liquid code to add our image, so paste it in there:

<a href="/" id="logo" title="{{shop.name}} Home Page">
  <img src="{{ 'StoreLogo.gif' | asset_url }}" alt="{{shop.name}} Logo" />
</a>

Note the 'StoreLogo.gif'; if your image file has a different name, replace that with the correct filename.

What we've done here is remove the text and added an image of your logo wrapped in a link. So if you logo is clicked it will take your customers back to your store's home page. Let's save theme.liquid now and continue on...

Positioning Your Logo

If you refresh a page in your store, you'll hopefully notice your logo has replaced the text. Yay!

But wait... due to the size of our artwork, and depending on the browser we're using, something doesn't look quite right. Since our CSS code in layout.css is geared toward styling the text in a finite space, we're going to have to dig in and restyle some things to accommodate the changes. Don't panic, I'll walk you through it.

There are a few different ways we can style and position our new logo, but let's go with the easiest for now, and perhaps I'll add some other methods at some point in the near future.

Step 3: Let's open layout.css in our favorite text or CSS editor and look for the section called /* Header Styles */. The stuff near the beginning of this section is what we want to focus on.

Step 4: The goal here is to remove what we don't need, which are the old rules for the store name text, and remove the set height on the #header. So first, let's delete the following:

#header {
	height: 60px;
	position: relative;
	}
h1#logo {
	font-weight: bold;
	position: absolute;
	bottom: -8px;
	left: 0;
	padding: 0;
	margin: 0;
	}
h1#logo a {
	text-decoration: none;
	color: #EA3A41;
	text-transform: uppercase;
	font-size: 48px;
	line-height: 48px;
	letter-spacing: -0.1em;
	padding: 0;
	margin: 0;
	}

Now we just need to replace it with our new #header styling, basically just dropping out that set height and letting the height of our logo determine the height of the #header:

#header {
	position: relative;
	}

Hey, that was actually easy! Look at your page now. The logo should be fitting right in with the rest of it's new friends. Done!

Some Tips

• Making your logo blend with your color scheme is important. So keeping the logo's background color in sync with the background color of your page is a good place to start. Making the actual logo colors mesh with your theme, or vice-versa, is also very important to your branding. If you have no clue what I'm talking about, or how to do this, then you should probably hire a designer.
• Notice that we have a title attribute on the link, and an alt attribute on the image. These are important, and not only to your customers, but to search engines as well, and you should feel free to edit these if you like. The title attribute shows a 'tooltip' when you hover over the link. The alt attribute contains the text that is displayed in place of the image if a customer has images turned off in their browser, or if for some reason your image isn't being served properly.
• Find a logo size that will look good with your theme. 120px tall is probably too big in most scenarios, and you should never go beyond 450px wide. You don't want your logo to crash into your mini cart display and make a mess.

I'll try to post some other example here soon, but this should get you up and running. If you have any problems, feel free to "let me know":https://www.promotionsickness.com/contact.