View source

{{Template:menuBarCustomising}}
== Top 10 Questions asked by new Zen Cart&trade; Users ==

=== Introduction ===
Your Zen Cart&trade; is successfully installed so let’s take a look at how you can execute the most commonly made changes to a default installation. As you follow these steps, your store will become more and more your own.


Especially for inexperienced users, it is wise to decide exactly what you want to change and how you want to change it before starting to make the changes.  You will need a [[Useful_Tools#PHP.2C_HTML_and_Text_Editors| text editor]] to change the content of the files and an [[Useful_Tools#FTP_Tools| FTP client]] to upload your changes to your server. ('''see''' [[Useful_Tools| Useful Tools For Working With Zen Cart&trade;]])


The answers in this section assume you have read [[Customisation_-_Templates_-_Create|Creating your own template]] and have either created your own template or have downloaded one of the pre-defined templates.


'''CAPITALIZED''' words refer to a folder or language that you choose. We use '''CUSTOM''' for your template and '''ENGLISH''' for your language by default. Change these if needed.


The “Top 10 Questions” asked by Zen Cart&trade; users changes regularly. Rather than a #1 - #10 list, the questions have been grouped for economy of editing. This section  encompasses the following items:
* The Header Image
* The Logo
* The “Sales message or Tagline” text
* The “Congratulations!” greeting message
* The “Welcome Guest” message
* The “Breadcrumb”
* The Copyright text in the footer area



== How do I change the Header Image? ==
=== Template based on the Classic Template ===
By default Zen Cart&trade; uses ''header_bg.jpg'' for the name of this image, but you can use your own filename for the background image.


Using an image editor, create a new background graphic and save it to ''includes/templates/CUSTOM/images/header_bg.jpg'' and upload the file to your server.

===  Template based on the recommendations for [[Customisation_-_Templates_-_Create#For_Zen_Cart.E2.84.A2_Version_1.3..2B|Zen Cart&trade; version 1.3.+]] ===
Using an image editor, create a new background graphic and save it to ''includes/templates/CUSTOM/images/your_header_image.???''.


Now open your ''stylesheet.css'' and find or add the following code.

<pre><nowiki>
 #logoWrapper {
 width:760px;
 height:110px;
 background-image:url(../images/your_header_image.???);
 background-repeat:no-repeat;
 }
</nowiki></pre>


Change the file name to that of your own header image, adjust the width and height to those of your header image, save the stylesheet and upload both files to your server.


== How do I add and position a new logo? ==
By default Zen Cart&trade; uses ''logo.gif'' for the name of this image, but you can use you own filename for the logo.

Using an image editor, create your new logo and save it to ''includes/templates/CUSTOM/images/your_image_name.???'' and upload it to your server.

After creating your logo you can adjust the height, width and logo name in ''includes/languages/ENGLISH/header.php''
<pre><nowiki>
 define('HEADER_LOGO_WIDTH', '192px');
 define('HEADER_LOGO_HEIGHT', '64px');
 define('HEADER_LOGO_IMAGE', 'logo.gif');</nowiki></pre>

Make the needed changes, save the file to ''includes/languages/ENGLISH/CUSTOM/header.php'' and upload to your server.

By default, the logo is left aligned. Changing the alignment involves making a modification to your ''includes/templates/CUSTOM/css/stylesheet.css''. Open the file and find the following:

<pre><nowiki>
 #logo, .centerBoxContents, .specialsListBoxContents,
 .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}</nowiki></pre>

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:

<pre><nowiki>
 .centerBoxContents, .specialsListBoxContents,
 .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}</nowiki></pre>
<pre><nowiki>
 #logo {float: left;}</nowiki></pre>

To center the logo use ''text-align: center;'' or to align it to the right use ''float: right;''

Make the needed changes, save the file and upload to your server.

=== How do I remove the logo completely? ===
If you don't want or need a logo, open ''includes/templates/CUSTOM/common/ tpl_header.php'' find and comment out this line of code by adding <code><nowiki><!--</nowiki></code> at the beginning, <code><nowiki>--></nowiki></code> at the end and <code><nowiki>//</nowiki></code> between the words ''php'' and ''echo'', as shown below.

 <pre><nowiki><!-- <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> --></nowiki></pre>

Save the file and upload it to your server.


== How do I Change the Sales message or Tagline? ==
To change the ''sales message goes here'' or ''Tagline Here'' text to say what you want open the ''includes/languages/ENGLISH/header.php'' file in your text editor. Find the following line of code:

 define('HEADER_SALES_TEXT', 'TagLine Here');

Replace the tagline text with your own text, making sure that the single quote marks are not left out.

Save the edited file to your ''includes/languages/ENGLISH/CUSTOM'' folder.

If you are using the classic template save the file to ''includes/languages/ENGLISH/classic/header.php''

=== How do I Remove/Delete the Sales message or Tagline? ===
Earlier versions of Zen Cart&trade; required changing 3 files to accomplish this. This was necessary in order to eliminate the "empty div" bug in IE.

With Zen Cart&trade; v1.3.5 this is easily accomplished by changing only 1 file and the "empty div" bug in IE is no longer a concern.

Open the ''includes/languages/ENGLISH/header.php'' file in your text editor. Find the following line of code:

 define('HEADER_SALES_TEXT', <nowiki>''</nowiki>);

Delete the tagline text, making sure that the single quote marks are not deleted.

Save the edited file to your ''includes/languages/ENGLISH/CUSTOM'' directory.


== How do I Change the Congratulations! Message? ==
If you want to change the ''Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution?'' Text with your own open the ''includes/languages/ENGLISH/index.php'' file and find the following code:

 // This section deals with the "home" page at the top level with no   options/products selected
 /*Replace this text with the headline you would like for your shop.
 For  example: 'Welcome to My SHOP!'*/
 define('HEADING_TITLE', 'Congratulations! You have successfully installed your
 Zen Cart&trade; E-Commerce Solution.');
 } elseif ($category_depth == 'nested') {
 // This section deals with displaying a subcategory
 /*Replace this line with the headline you would like for your shop. For
 example: 'Welcome to My SHOP!'*/
 define('HEADING_TITLE', 'Congratulations! You have successfully installed your  
 Zen Cart&trade; E-Commerce Solution.'); 
 }

Replace the text starting ''Congratulations'' with your own text. Make sure that the single quote marks are not left out, save the file and upload to your server.


== How do I Change the Welcome Guest Message? ==
If you want to eliminate ''Welcome Guest! Would you like to log yourself in?'' message completely, turn off the Customer Greeting in your Admin > Configuration > Layout settings > Customer Greeting > Show on Index Page and set to 0.


If you want to replace this message with one of your own, start your text editor and open the ''includes/languages/ENGLISH/index.php'' file and locate these lines of code:


<pre><nowiki>
 if (STORE_STATUS == '0') {
 define('TEXT_GREETING_GUEST', 'Welcome <span class="greetUser">Guest!</span>
  Would you like to <a href="%s">log yourself in</a>?');
 } else {
 define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.');
 }
 define('TEXT_GREETING_PERSONAL', 'Hello <span class="greetUser">%s</span>!');</nowiki></pre>


As you can see, there are two ''Welcome'' messages depending upon whether you wish you Zen Cart&trade; to be a fully functioning store, or just a showroom. Edit the message starting from the word ''Welcome'' but be careful not to change the text in angled brackets, or the brackets themselves. Make sure that the single quote marks are not left out. If you want to include an apostrophe in your text e.g. ''Lucy's Store'', you will need to put an escape character before the apostrophe, i.e. ''Lucy\'s Store''.


== How do I remove the Home in the middle column next to the Categories box? ==
These are called the breadcrumbs, showing where you are and how to get back to previous locations. You can either turn it off completely or you can turn it off only on the main page. Although this looks a little odd on your home page, they can be very useful to your users as they go deeper into your site.


You can turn them off in Admin > Configuration > Layout settings > Define Breadcrumb Status and set to ''0''.


To turn them off on the main page, edit ''includes/templates/CUSTOM/templates/common/tpl_main_page.php''. 


Find the following lines of code:


<pre>
 <!-- bof  breadcrumb -->
 <?php if (DEFINE_BREADCRUMB_STATUS == '1') { ?>
 <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR);  ?></div>
 <?php } ?>
 <!-- eof breadcrumb --></pre>
For Version 1.3.0+ change to:
<pre>
 <!-- bof  breadcrumb -->
 <?php if (DEFINE_BREADCRUMB_STATUS == '1' && ($current_page!='index' || (int)$cPath>0)) { ?>
 <div id="navBreadCrumb"><?php echo  $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
 <?php } ?>
 <!-- eof breadcrumb --></pre>
For Version 1.3.5 change to:
<pre><!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' && !$this_is_home_page) { ?>
<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb --></pre>

Save the file and upload to your server.



== How do I change the copyright message in the footer? ==
If you find it necessary to change the footer for some reason, be sure to read the explanations below before making any edits. 
Then open the ''includes/languages/english.php'' file in your text editor.

Find the following lines of code:

<pre><nowiki>
define('FOOTER_TEXT_BODY', 'Copyright &copy; ' . date('Y') . ' 
<a href="' . zen_href_link(FILENAME_DEFAULT) . '" target="_blank">' . STORE_NAME . '</a>. 
Powered by <a href="http://www.zen-cart.com" target="_blank">Zen Cart</a>'); </nowiki></pre>

The ''date('Y')'' automatically inserts the current year, so there's no need to change that unless you want to break the automatic function of the date display.

The ''zen_href_link(FILENAME_DEFAULT)'' will automatically insert your store's URL as found in the HTTP_SERVER setting of your configure.php file. It is recommended not to change this.

And the ''STORE_NAME'' will automatically show the name of your store, taken from your setting in Admin->Configuration->My Store->Store Name.

If you do decide to make changes, be sure to save the file to ''includes/languages/CUSTOM/english.php'' and upload to your server.

It is considered common courtesy to leave ''Powered by Zen Cart&trade;'' intact as it assists in advertising the Zen Cart&trade; project that is allowing you to create your new store and hopefully make money from it. If you want to list your shop in the Zen Cart&trade; Showcase, you must leave the 'Powered by Zen Cart&trade;' link in the footer for identification.



== Where do I find the files I would edit to change other parts of my cart (i.e. template files, sideboxes, etc.)? ==
If you want to turn your sideboxes on and off, or move them left and right, you do this from the ''Admin'' panel in Admin > Tools > Layout boxes controller.


Other files you would modify are located in ''includes/templates/template_default''.


Which file(s) you edit will depend on which page of your shop you want to customize. Working with these files is fairly easy since they are clearly marked with <pre><nowiki><!--bof whatever--></nowiki></pre> and <pre><nowiki><!--eof whatever--></nowiki></pre>


This makes moving sections of the file easy. After editing any of these files save them in your ''/CUSTOM'' folder.


The most common file(s) to be customized are:
*Language Files
** ''includes/languages/english.php''
** ''includes/languages/english/*.php''
** ''includes/languages/english/html_includes/*.php''
* Template Files
** ''includes/templates/template_default/common/tpl_header.php''
** ''includes/templates/template_default/common/tpl_footer.php''
** ''includes/templates/template_default/common/tpl_main_page.php''
** ''includes/templates/template_default /templates/tpl_product_info_display.php''
* Sidebox Files
** ''includes/modules/sideboxes''
** ''includes/templates/template_default/sideboxes''


A lot of your basic customization can be done from your ''Admin'' panel in:
* Admin > Configuration
* Admin > Catalog > Product type > Product > General > Edit Layout
* Admin > Tools > Layout boxes controller



== What directories contain all the images? (i.e. buttons, icons, images etc.)? ==
* ''/images'' folder: This is where your product images are located.
* ''/includes/languages/ENGLISH/images'' folder: icon.gif (your language flag).
* ''/includes/templates/CUSTOM/buttons/ENGLISH'' folder: contains the buttons used by the cart.
* ''/includes/templates/CUSTOM/images'' folder: contains header_bg.jpg, logo.gif and other images required by your template files.
* ''/includes/templates/CUSTOM/images/icons'' folder: contains additional images used by the cart (specific to your template).


NOTE: If your template is looking for an image in the ''/includes/templates/CUSTOM/images'' folder but cannot find it, Zen Cart&trade; will use the image in the ''/includes/templates/template_default/images'' folder.



== How do I change the category (or any other sidebox) title? ==
Look in ''includes/languages/english.php''. Suppose you want the ''Categories'' sidebox to have a different title. Look for:


<pre><nowiki>
 define('BOX_HEADING_CATEGORIES', 'Categories');</nowiki></pre>
Additional changes for sideboxes will follow this pattern:
<pre><nowiki>
 define('BOX_HEADING_XXXXXXXX', 'New Title');</nowiki></pre>
Make the needed changes, save the file to ''includes/languages/CUSTOM/english.php''and upload to your server.



== Can I use an image for the sidebox header? ==
The short answer is yes. You  can use two methods to achieve the result. 


=== Method 1 ===
Using an image editor, create your image sets with a name for each sidebox you want to change and save your graphics to ''includes/templates/CUSTOM/images/'' and upload it to your server.


In your ''includes/languages/CUSTOM/english.php'' find this line of code:


<pre><nowiki>
 define('BOX_HEADING_CATEGORIES', 'Categories');</nowiki></pre>


You can change it as follows:


<pre><nowiki>
 define('BOX_HEADING_CATEGORIES', 'your_english_graphic.jpg');</nowiki></pre>


Now in ''includes/modules/sideboxes/CUSTOM/categories.php'' find this:


<pre><nowiki>
 $title = BOX_HEADING_CATEGORIES;</nowiki></pre>


and change it to:


<pre><nowiki>
 $title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES,
 DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES,
 HEADER_ALT_TEXT);</nowiki></pre>


Note: You would do this for each of your sideboxes.


Make the needed changes, save the files and upload to them to your server.


=== Method 2 ===
If you want to replace the default Zen Cart&trade; background image (''tile_back.jpg'') to be used for all the sideboxes use an image editor to create your image (using the same dimensions as ''tile_back.jpg'')  and save it to ''includes/templates/CUSTOM/images/'' and upload it to your server.


Now open you ''stylesheet.css'' and find following:


<pre><nowiki>
 .leftBoxHeading, {
 margin: 0em;
 background: url(../images/your_background_image.jpg) #FF6699;
 padding: 0.5em 0.2em;
 }	
 .rightBoxHeading {
 margin: 0em;
 background: url(../images/your_background_image.jpg) #FF6699;
 padding: 0.2em 0em;
 }</nowiki></pre>


Change the image file name in each of the URL functions, save the stylesheet and upload both files to them to your server.