How do I add additional images in the header of the Simply Kerrin template?


In the default installation of the Simply Kerrin template, the logo is displayed on the left hand side.

Zen Cart Template - Simply Kerrin

However, there may be times when you wish to display additional image(s) in the header, for example to include a free shipping icon.  There are two options – add the reference to the image in the tpl_header.php file or add the reference to the image to the stylesheet.css file.

In this example we will include a free shipping image in the header:

  1. Upload the required image to the /images folder located in the /includes/templates/simply_kerrin directory.
  2. Next, open the tpl_header.php file located in the /includes/templates/simply_kerrin/common/ directory.
  3. Find this section of code:
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    </div>
  4. and modify to also include the additional image:
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    </div><div><img src="includes/templates/simply_kerrin/images/freeshipping.jpg" /></div>
  5. Save the modified tpl_header.php file.

Simply Kerrin - Zen Cart Free Template

     
   
     

More Zen Cart:

  1. How do I add additional images in the header of the Simply Kerrin template?
  2. How to center your logo with the Simply Kerrin Zen Cart template
  3. Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo
  4. How do I change the Simply Kerrin Zen Cart template from a fluid width to a fixed width?
  5. Frequently Asked Questions about free Zen Cart Template – Simply Kerrin
  1. #1 by tony on 25 November, 2010 - 7:52 am

    Hi. I followed your instructions at: http://www.kerrinhardy.com/2010/05/25/how-do-i-add-additional-images-in-the-header-of-the-simply-kerrin-template/

    How do I re-center my BraceletStar logo and place the FREE SHIPPING icon just to the right of it. Also, how do I insert the solid green border that is in the original template (below the header tag line)? Thanks.

  2. #2 by tony on 25 November, 2010 - 7:54 am

    Hi again. Could you please email me instructions on how to insert some photos of models wearing my products. I would like to place them on the homepage and other pages throughout my website. Do you have instructions on how to insert a flash image of rotating photos? Thanks again.

  3. #3 by kerrin hardy on 29 November, 2010 - 11:16 pm

    Hi Tony
    Have a look at both How to center your logo with the Simply Kerrin Zen Cart template and Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo. I think these should help to get your Bracelet Star logo centred correctly. Please let me know how you get on.
    I’ll look at writing up how to use a nice script for rotating images that I’ve used in the past.
    Cheers
    Kerrin

(will not be published)

Notify me of followup comments via e-mail. You can also subscribe without commenting.