How to add your logo to this theme

If you have a new store, or you have just loaded the Fresh theme from the Gallery, then you have the most recent version of the theme, which includes an easy configuration option using Theme Settings.

If you are trying to customize an existing theme that you don’t want to reload from the gallery, then you will need to follow the instructions in the “Manual Configuration” section.

Using Theme Settings

Step 1.

Go to the “Theme” section of your store, and click on “Theme Editor”




Step 2.

Go to the “Theme Settings” section. You will find a section called “Add your logo”.

Click on the “Use a logo?” checkbox and then click “Browse” to find your logo image to upload.

If possible, you should use a transparent image (GIF or PNG) to ensure that the background colour matches the colour scheme you are using. The image will be resized to fit into the banner area, so try to use an image that will fit across the top of the page.




Step 3.

Click “Save Settings” to save your new logo.

If you want to change your logo, just upload a new image.


Manual Configuration

To add your logo to this theme, you will need to do a bit of editing of your store’s theme.liquid file, and CSS file (fresh.css).

Step 1. Get your logo in the right image format.

Your logo will need to be a transparent 24 bit PNG file to display properly in your header. The maximum size it can be is 500px wide by 80px high.

Most people use Photoshop to do this, as it ensures your image is in the right format. If you don’t know how to do this, you will need to get someone to do it for you, or contact us and we’ll do it for you.

When your logo is in the right format, save it as “logo.png”


Step 2. Upload your logo.png image.

To upload your logo, go to the “Theme editor” section of your Toolbox, and click on “Theme Editor”.

At the bottom of the page there’s a section where you can upload your image.


Step 3. Edit the fresh.css" CSS file.

Click on the file called “fresh.css” in the “Theme assets” section of the “Theme editor” page. A window will pop up showing the contents of the file.

Scroll down to the section that looks like this…

#header h1 {
  float: left;
  height: 80px;
  margin-top: 10px;
  position: absolute;
  left: 30px;
  top: 10px;
  font-size: 38px;
}
#logo { display:none; position: absolute; left: 30px top:10px width: 500px height: 80px background-image: none; background-position: 0px center; background-repeat: no-repeat; }



Change the #header h1 text to the following…

#header h1 {
  display: none;
}



Change the #logo text to the following…

#logo {  
  display:block;
  position: absolute;
  left: 30px
  top:10px
  width: 500px
  height: 80px
  background-image: logo.png;
  background-position: 0px center;
  background-repeat: no-repeat;
}



You will also need to make sure you’ve set the width to the actual width of your image.

When you’ve done this, save your changes by clicking on the save button. You can then preview your changes by going to your storefront and holding down the shift button on your keyboard and clicking the “refresh” or “reload” button on your browser.