Adding a Logo

So, you want to give Vogue a personal look by adding your logo. Well, that’s not a difficult thing to do with a couple minor modifications. Let’s get started…

Step I – Create the Logo
Before we begin hacking away in the code, let’s make sure your logo is the proper dimensions and will properly align in the header. Right-click one of the following images that matches the color scheme you’re using, then save it to your desktop.

Once, you’ve downloaded the background image, open it with Photoshop or another image editing application. Add your logo over the background and save it in .png format, then upload it to your assets. Your logo should not be any larger than 240×65 pixels to avoid distortion to the header. Now, you’ll need to modify a bit of code.

Step II - Insert the Image
In your shop admin, click the “Look & Feel” tab from the main navigation. Then choose theme.liquid from the list of templates in the right column. Locate the following section of code…

<h1><a href="/" title="{{ shop.name }}">{{ shop.name }}</a></h1>

and replace it with…

<a href="/" title="{{ shop.name }}">
    {{ 'logo.png' | asset_url | img_tag: 'Shop Name' }}
</a>

Press the “Save Changes” button to apply the modifications you’ve made to theme.liquid. We’re almost finished, but there’s one last piece of code that needs updating.

Step III - Modify the Stylesheet
From the “Look & Feel” tab, choose stylesheet.css, caramel.css, or sea.css depending on which color scheme you’re using. Locate the following section of code…

#logo {
    line-height: 28px;
    width: 240px;
    padding-top: 24px;
    float: left;
}

and replace it with…

#logo {
    line-height: 28px;
    width: 240px;
    float: left;
}

Press the “Save Changes” button to apply the modifications you’ve made to the stylesheet. There you have it, a beautiful image logo in the header!