How do I change the logo or the logo alt text in the header?

Customizing your logo

By default, Zen Cart uses includes/templates/YOURTEMPLATE/images/logo.gif for the filename of the logo image, but you can use your own filename for the logo.

NOTE: If your logo is available as a .gif image, it’s faster to just upload your logo by replacing the logo.gif file on the server. Then refresh your browser cache (CTRL+R) to see it on your site. You may still want to update the image dimensions listed in the following instructions.

Using an image editor, create your new logo and save it to includes/templates/YOURTEMPLATE/images/yourname and upload it to your server.

The name yourname will also include a file extension, such as .png, .jpg, etc.

After creating your logo you can adjust the alt text, width, height, and image name in includes/languages/english/YOURTEMPLATE/header.php

NOTE: If you don’t have the file includes/languages/english/YOURTEMPLATE/header.php, then copy includes/languages/english/header.php to includes/languages/english/YOURTEMPLATE/header.php before editing. See What if I don’t have a file that some instructions mention?

For the purpose of this example, let’s assume yourname is newlogo.png, and that the logo is 200px wide and 80px tall.

define('HEADER_ALT_TEXT', 'My new alt text');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '80px');
define('HEADER_LOGO_IMAGE', 'newlogo.png');

Save this file and upload it to your server.

By default, the logo is left aligned. Changing the alignment involves making a modification to your includes/templates/YOURTEMPLATE/css/stylesheet.css.

Open the file and find the following:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}

Since this is a collection of several “selectors” (#logo, .centerBoxContents, etc) and in order not to interfere with the layout of other sections, split this into two separate statements and create a new selector/definition below it, like this:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}

#logo {float: left;}

To center the logo use text-align: center;

To right align the logo use float: right;

Image Caching

The reason the instructions above recommend using the new name newlogo.png is to ensure that the cache isn’t used.

If you simply replace includes/templates/YOURTEMPLATE/images/logo.gif with your own logo using the same filename, your browser will likely not pick up the change immediately because of [browser caching](/user/new_user_topics/browser caching/).

Still have questions? No problem! Just head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified October 4, 2020 by Scott C Wilson (b21d1d5).