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

One Comment on “Layout Tutorial”

  1. You could also get a pre designed x-cart template (just google for it) or hire a professional who can design a new look and feel of your store and/or integrate it with x-cart template system.

    The thing about smarty (template system that xcart uses) that you can change the appearance of x-cart without having to modify any of php files.

    It is possible to redesign x-cart to appear like anything you want!!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s