Product Images

  • Click the categories link in the management panel.
  • Click on the category where your product is.
  • You will see no products. To fix that do the next bullet point:
  • Press the “category products” radio button in the upper right of the screen to display the results of what is in that category.
  • Click on the product you want to add an image to or change an image of.
  • Click on “change image” radio box in first the “Thumbnail”
  • click_browse
  • Browser for the image on your drive (the Thumbnail should be 100pixles wide as most of them are and this way it will play well with the others)
  • Click “Apply”
  • Close the pop up window
  • Make sure you type at least one space charachter in the “Short Description” field, as it is a required field.
  • Then scroll down and click the “Save” radio box at the bottom of the page.
  • Repeat for the one entitled “Product Image” (note for product image it must be 363 pixles or less in width or the design of the page will fall apart)

Things to note. The thumbnail should be smaller of an image size. The Product Image (big image) should not exceed 363 pixles.

How do I Tell How Big The Images Are In Pixles?

  • In Windows Explorer if you right click on a .jpg image. Go to Properties.
  • Go to the upper right tab called “Summary”
  • Then click the tab called “Advanced” in the bottom right of that window.
  • If you need help resizing your images e-mail them to me at

Agendaium’s Photoshop Tips

  • control + J: Copy current layer
  • alt + drawing a circle or circle marquee: Draw from center.
  • D: Default colors.
  • X: Switch foreground and background colors.

Sending a RGB Document to a Print Shop

When printing a document designed in RGB, you have to convert it to CMYK first.

Go to Edit, Convert to profile, Photoshop 4 Default CMYK.

The adjust the saturation to bring it back to look good.

Layout Tutorial

Log into your x-cart. Click on edit templates. Go to /customer/home.tpl. This file controls everything in the front end. I sugguest you strip out all of the old tables and html garbage you can. Leaving you the below:

Your welcome, visit my site if you want me to develop your store for you

Some tips.

  • It’s up to you if you want to do a left, right, content relative css setup, or a absolute positioning.
  • The default setup is a left coloumn, right column, center, divided by tables.
  • The setup below you have to put your own div’s in. See the html comments on how the stuff is grouped.

Start home.tpl file.

{* $Id: home.tpl,v 2007/08/08 13:51:54 max Exp $ *}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”&gt;
{if $printable ne ”}
{include file=”customer/home_printable.tpl”}
{config_load file=”$skin_config”}
<html xmlns=””&gt;
{capture name=title}
{if $config.SEO.page_title_format eq “A”}
{section name=position loop=$location}
{if not %position.first%}&nbsp;::&nbsp;{/if}
{section name=position loop=$location step=-1}
{if not %position.first%}&nbsp;::&nbsp;{/if}
{if $config.SEO.page_title_limit <= 0}
{$smarty.capture.title|replace:”&nbsp;”:” “|truncate:$config.SEO.page_title_limit|replace:” “:”&nbsp;”}
{include file=”meta.tpl” }
<link rel=”stylesheet” href=”{$SkinDir}/{#CSSFile#}” />
<body {$reading_direction_tag}{if $body_onload ne ”} onload=”javascript: {$body_onload}”{/if}>
<div id=”container”>
{include file=”rectangle_top.tpl” }
{include file=”head.tpl” }
{if $active_modules.SnS_connector}
{include file=”modules/SnS_connector/header.tpl”}

<!– sidebar area –>
{if $categories ne “” and ($active_modules.Fancy_Categories ne “” or $config.General.root_categories eq “Y” or $subcategories ne “”)}
{include file=”customer/categories.tpl” }
<br />
{if $active_modules.Bestsellers ne “” and $config.Bestsellers.bestsellers_menu eq “Y”}
{include file=”modules/Bestsellers/menu_bestsellers.tpl” }
{if $active_modules.Manufacturers ne “” and $config.Manufacturers.manufacturers_menu eq “Y”}
{include file=”modules/Manufacturers/menu_manufacturers.tpl” }
{include file=”customer/special.tpl”}
{if $active_modules.Survey && $menu_surveys}
{foreach from=$menu_surveys item=menu_survey}
{include file=”modules/Survey/menu_survey.tpl”}
<br />
{include file=”help.tpl” }

{if $active_modules.SnS_connector && $config.SnS_connector.sns_display_button eq ‘Y’ && $sns_collector_path_url ne ”}
{include file=”modules/SnS_connector/button.tpl”}
<br />
{if $active_modules.Feature_Comparison ne “” && $comparison_products ne ”}
{include file=”modules/Feature_Comparison/product_list.tpl” }
<br />
{include file=”customer/menu_cart.tpl” }
<br />
{if $login eq “” }
{include file=”auth.tpl” }
{include file=”authbox.tpl” }
{include file=”news.tpl” }
{if $active_modules.XAffiliate ne “” && $config.XAffiliate.partner_register eq ‘Y’}
<br />
{include file=”partner/menu_affiliate.tpl” }
{if $active_modules.Interneka ne “”}
<br />
{include file=”modules/Interneka/menu_interneka.tpl” }
<br />
{include file=”poweredby.tpl” }
<br />
<!– /sidebar area –>
<!– central space –>
{include file=”location.tpl”}

{if $gcheckout_enabled and $main ne “cart” and $main ne “checkout” and $main ne “anonymous_checkout” and $main ne “order_message”}
<div align=”right”>
{include file=”modules/Google_Checkout/gcheckout_button.tpl”}</div>

{include file=”dialog_message.tpl”}

{if $active_modules.Special_Offers ne “”}
{include file=”modules/Special_Offers/customer/new_offers_message.tpl”}

{include file=”customer/home_main.tpl”}

<!– /central space –>
<div id=”footer”>
{include file=”rectangle_bottom.tpl” }
{if $active_modules.Google_Analytics ne “” && $config.Google_Analytics.ganalytics_code ne “”}
{include file=”modules/Google_Analytics/ga_code.tpl”}


More Important File’s Below:

  • {include file=”head.tpl” } feel free to remove any html tabels from this.
  • menu.tpl (a good place to remove dingbats images and customize navigation box headers).
  • style1.css
  • upload custom development based images to /images/your_directory_name. This will keep them straight.

That’s Great Now How Do I Do The Buttons?

The default buttons on x-cart are way to ugly. How do I customize them? Well you have two options.

Make Your Own Buttons:

  • left = but1.gif
  • center = butbg.gif
  • right = but2.gif
  • Comment out the class “IMG.ButtonSide” in style1.css. It restricts the height of your buttons.

Just Comment Out The Buttons and Go With No Buttons:

  • Edit the class “td.button” in the CSS file to handle the middle part of the button and some general spacing stuff with it.
  • Edit buttons/buttons.tpl to get to the left and right sides of the button images, and some more specific spacing stuff.

How Do I Get Rid of the Default Shopping Cart Icons?

  • /customer/main/minicart.tpl
  • comment out the line of code for “dingbats=*.gif” using {* and *}.

How Do I Customize the Cart Pages If Fast Lane Checkout is Enabled?

These pages are built from the below .tpl file.
  • modules/Fast_Lane_Checkout/home.tpl

Product Edititing

Find the Management square panel on the left.

  • Click on “Categories”. Here will be a list of all the categories in the store thus far.
  • Drill down to the highest category level you can by clicking on the red links of the name of the category. It will update your location. You will be at the highest level when the screen appears blank. Don’t panic there really are products here, instead click “category products” as shown below.category_products
  • Once you see the product you want to edit, click on its name or its SKU.
  • Go down to the 3rd section called “classification”
  • Find the “main category” drop down list. Drop it down to the category you would like the product in instead. Leave it there.
  • Find the “details” section. Go to where it says “short description” we are not using this on our site. This is where the hack comes in. Notice this has an * that means it is a required field. So we need to put a blank space in here so it will save.
  • To to that go to the “short description” field put the cursor there and type the space bar at least one time, mabye twice to make sure you got a space in there.
  • Then it will save! (all the required fields have been filled)
  • Go to scroll to the bottom of the page you will find a radio button called “save”. Click it and you are done.

Convert Normal Directory To a SVN Versioned Directory

Basically it goes like this. There is a repository where the behind the scenes data is stored. You chose a new repository for each new project.

  • Create a directary called REPO this will house all the project reposotories.
  • Create a subdirectory called P1, P2, etc. upon each new project you make.
  • Right click on the P# folder you just created and go to “create repository here”.

Then when you have your actual base of project data most likely stored in my documents somwhere, you import it to the corresponding repository and then SVN checkout that data to synchronize it with the repository.

  • Right click on data that needs to go into the Repositry. “Tortise SVN, import” to correspoiding repository.


  • Create a new directory for the project that will be Version Controlled. “SVN checkout”. Lead this to the repository you just imported to. That will bring the stuff from the repository into that directory.
  • Start Versioning!
  • To revert to your versions its all about right clicking on the file you would like to see the versions of and pressing “show log…”

Obligatory Product Varients Post


Go to a product. Click into it to edit it. Click on “Product Options” in the “Product Management:” payne.


Then it takes you here:

Option Group Name: Something for the administrators only, just chose something that describes the variations. I usually use all caps sepearated with a underscore, and I keep it short.

Option Text: What the customer sees to tell them there options.


Click Update Option Group when done.

Follow the screen below to fillout a sample of colors for a proudct.

Option Group Type: Stick to Varients. Just be sure all the prices of the varients are the same or you will have to see another tutorial.

Options List: This is the meat. Type something and press the plus icon to accept what you typed. Change the Orderby field to 1,2,3. 1 is whatever one you want first, ect.


 Once you make your screen look like the one above be sure to click “Add Option Group.”

To see what you have done: Follow the link automatically provided for you upon finishing a variant set. OR click on “Product Options” in the “Product Management:” payne, under “In this section” where all of the things to do with the product you are currently editing are. That takes you to the same place.

It should look like the below: