How to add your logo to this theme

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 (antiqua-theme.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 75px 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 “Design & assets” 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 “antiqua-theme.css” CSS file.

Click on the file called “antiqua-theme.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 {
  position: absolute;
  height: 60px;
  width: 514px;
  left: 0px;
  top: 33px;
}
#header h1 a { font: italic normal 50px "Book Antiqua", "Palatino Linotype", Palatino, serif; color: #FFF; text-decoration: none; }
#logo { display:none; position: absolute; left: 0px top:30px width: 500px height: 75px 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: 0px
  top: 30px
  width: 500px
  height: 75px
  background-image: url('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.