X-Cart Ability Template Docs - Advanced X-Cart Skin with Many Built-In Features

Thank you for purchasing the X-Cart Ability Template!

Ability is an advanced, all-purpose X-Cart v4.4.x / v4.5.x template solution, with a rich amount of layout possibilities and features built-in.

The idea behind Ability is to give you all the design flexibility and features you need, in one template, whilst keeping your costs down.

It can be used as the foundation to any web store. You'll be surprised at what you can achieve with this template alone.

Requirements

X-Cart v4.4.5 or v4.5.0 highly recommended (current demo is based on the Jan 30th 2012 release of X-Cart Gold v4.4.5)
X-Cart v4.5.0 is a major update. The v4.5.0 Ability demo is available here.
Good working knowledge of X-Cart and the X-Cart v4.4.x / v4.5.0 templating system
Basic-intermediate skills in HTML, CSS and Smarty

Compatibility

The template uses modern javascript and CSS techniques and is therefore aimed at modern browsers.

It has been tested with: Firefox 8-12 / Chrome 11 / Opera 11 / Safari 5 for Windows / Internet Explorer 6*/7**/8/9

It should also work with capable, modern mobile devices such as iPad etc.

* IE6 is nearing it's end of life and strictly not supported by us. You should encourage any IE6 users to upgrade.
** IE7 is an old browser, some features of the template may not work 100% correctly. You should also encourage any IE7 users to upgrade.
Microsoft will soon be silently updating old IE browser users to at least IE8.
In the meantime, there is an Ability option to redirect IE6/7 users to a browser upgrade page.

Updates

If / when we update the template and you require the updated files, just contact us with your order ID + X-Cart version and we'll send them to you promptly.

Vote for this template!

If you are happy with your purchase, please vote and post a brief review here. Thank you!

If you intend to rate us less than 5 stars, please get in touch us with us first, so that we can assist with any issues you may be experiencing.

X-Cart Ability Features

Theme Options

Clean layout design with 20 ready made easily customisable colour themes, just 16 lines of CSS per theme
Serves as an ideal framework / starting point for your X-Cart projects
Multiple themes enables you to easily change the look and feel whenever you like, eg. seasonal
True unlimited colour themes with in-built theme designer - colour pickers for theme elements, choice of background tile or image
Over 970 background tiles and images included
CSS code generator for easy colour theme generation
Layouts based on a fluid / flexible version of the popular and easy to use 960 grid system
Option to set the fixed (pixels) and fluid (percentage) widths
Ability to set the following to fixed or fluid... overall store width / header / header content / body content / checkout / footer / footer content
Layout can be displayed as 3 columns, 2 columns left / right or 1 column (product pages and static pages can also have independant column style)
Homepage can be set to display as full width (1 column) - maximises the effects of your promotions

Header Options

Choice of header style, or easily create your own custom header
Choice of 4 logo image sizes, or option to have textual company logo and tagline using Google fonts
Choice of 4 search box sizes
Customer account dropdown menu box

Category Menu Options

Horizontal menus included...

5 level animated dropdown / flyout menu
3 level mega dropdown menu, with full control over layout in category admin and option to display parent icons/descriptions. Can also be set to 2 level only.
1 level tabbed category menu
Tabbed speedbar menu
Tabbed custom menu

Vertical menus included...

5 level animated flyout menu
3 level tree menu, with persistence and choice of theme
2 level sliding menu, with persistence
1 Level basic menu style
Or use standard X-Cart menus

Additional categories page displaying all categories up to 3 levels

Homepage Options

Promotional Displays Included...

Responsive width image slider x 2
3D flash image slider / rotator
Featured image box
Horizontal image roundabout
Horizontal image accordion
Responsive static image or YouTube video (can be set in Ability settings and set to autoplay)

BBC style animated news ticker, dynamically lists the last x news headlines
Animated countdown to an event, eg. end of a sale, launch of new product etc.
Additional new and random products display (amounts configurable in Ability settings)
Featured products, bestsellers, new and random products can be displayed as animated carousels
... Or can be displayed in rows or grids, with ability to dynamically switch between row/grid
Featured products, bestsellers, new and random products can be grouped into a set of compact tabs
Manufacturers can be displayed as a carousel, or logos/links in columns (amount configurable in Ability settings)

Products Display Options

Products display

Grid and row switchers, with persistence
Smart columns, which adapt to the store width (for use with a fluid layout)
Masonry columns, which adapt to the store width in an animated fashion and are centered (for use with a fluid layout)
Basic tabular display
Or use default X-Cart products display

Upselling and recommended (random) products use the grid and row switchers display for SEO purposes
Default grid/row display and number of columns can be set from Ability settings

Product Page Layout

Product layout can be displayed independantly as 3 columns, 2 columns left / right or 1 column
2 types of custom tabbed product information display, either tabbed above or below
Vertical accordion product information display
Tabs and accordions have persistence feature
Or use standard X-Cart tabs below
Display links to next/previous products

Footer Options

Choice of footer style, or easily create your own custom footer
Display rotating testimonials, news box, latest Tweets etc.
Display Footer payment icons, large or small

Custom Fonts

Replaces H1/H2/H3 fonts which are loaded via the Google Fonts API
500+ fonts to choose from
Includes local font previewer, or use the Google font previewer

Addons

Traffic statistics gatherer / visitor counter. Displays visitors last 24 hours / 30 days / all time. Top 10 referrers, pages, keywords, countries.
Dynamic AJAX search box - lists products after 3 characters typed
BBC style animated news ticker, dynamically lists the last 5 news headlines - enable / disable
Animated countdown to an event, eg. end of a sale, launch of new product etc. - enable / disable and configure date in Ability settings
Advanced animated breadcrumbs, collapses and becomes compact if you have many subcategories
Lazy loader for product images - delays the loading of images until browser focuses on them
Page peel effect - displays animated promotional message in top right corner
Google map display for contact us page - displays map, streetview etc. and 'get directions' form
FAQs for contact us page in accordion style list
Advanced lightbox to replace ColorBox, with 10 different themes and ability to display videos, inline content etc.
Custom floating social bookmarking links for product page - alternative to Socialize module
Google translator menu box
Image gallery with categories, automatic thumbnail generation and lightbox
Display first detailed image as sticky tooltip on product thumbnails hover
Search by price menu box
'Sticky' header speedbar menu
'Sticky' footer recently viewed products list
QR code generator for product pages
Product 'quick view' lightbox for search results

Advanced Minicart

AJAX minicart that can be displayed in header or menu box
Instantly displays cart contents on adding to cart, with options to change quantities, delete items or clear cart without page refresh
Products can be grouped by category and maximum minicart height is configurable
In addition, when an empty cart is viewed, bestsellers, new and random products are displayed to the customer
Option to display thumbnails in minicart

RSS Feeds

Generates feeds for latest news and latest products (generate manually, or set up cron jobs)
Number of items per feed and additional text, thumbnail size etc. configurable from Ability settings

Miscellaneous

Choice of menu and dialog box style - rounded, square or basic borderless
Basic promotional menu boxes can be enabled to display any extra info, such as payment seals etc.
Choice of manufacturer menu box - dropdown version includes its own search facility if more than 30 manufacturers
Configure bestsellers and recently viewed image sizes from the Ability settings
Animated 'back to top' button that appears in bottom right corner
Choice of 'easing' effect, autoplay and mouse wheel feature for carousels
Option to redirect old IE browsers to a browser upgrade page

Just For Fun

Animated snow effect

Design Features

Well organised template structure
Well commented CSS code
Wide choice of homepage promotion options
Flexible width carousels
Scrollable content boxes
Easy to use tooltips
Customised view cart page
Improved one page checkout layout
And much more...

Template Settings Screenshot

If you require the latest version files, you can request them - here - quoting your order ID and X-Cart version.

(1) Patch Database

(a) In admin go to Tools > Patch/Upgrade, underneath Apply SQL patch, browse to the SQL patch file, patch/patch_install.sql and click 'Apply'.

If for any reason you need to uninstall the template, use patch_uninstall.sql.

(b) The Ability statistics addon requires a database to store traffic data. It adds six new database tables.

You can use your X-Cart database to store the data, or you can use an alternative database.

If using the X-Cart database, in admin go to Tools > Patch/Upgrade, underneath Apply SQL patch, browse to the SQL patch file, patch/addons/patch_statistics_addon_install.sql and click 'Apply'.

If you are using an alternative database, patch the database using a tool like PHPMyAdmin or similar.

If for any reason you need to uninstall the statistics addon, use patch/addons/patch_statistics_addon_uninstall.sql.

(2) Upload Files

(a) Upload all files in the upload directory to your store root directory.

(b) Upload the graphics files as mentioned in your order email.

(3) Modify Store Files

(a) In cart.php

After...

    $smarty->assign('cart_empty', true);

Insert...

	# Ability Template
	require './ability_get_new_products.php';
	require './ability_get_random_products.php';
	# /Ability Template

(b) In home.php

After...

require './auth.php';

Insert...

# Ability Template
if ($main == "" && $cat == 0 && $config['Ability_Template']['abi_featured_new'] != 'disabled') {
	require './ability_get_new_products.php';
}
if ($main == "" && $cat == 0 && $config['Ability_Template']['abi_featured_random'] != 'disabled') {
	require './ability_get_random_products.php';
}
if ($main == "" && $cat == 0 && $config['Ability_Template']['abi_addon_ticker'] == 'Y') {
	require './ability_get_news.php';
}
if ($main == "" && $cat == 0 && $config['Ability_Template']['abi_home_manufs'] != 'disabled') {
	require './ability_get_manufacturers.php';
}
# /Ability Template

Before...

// Assign the current location line
$smarty->assign('location',       $location);

Insert...

# Ability Template
if ($config['Ability_Template']['abi_product_next_prev'] == 'Y') {
	require './ability_next_prev.php';
}
# /Ability Template

(d) In products.php

Before...

$smarty->assign('cat_products',      isset($products) ? $products : array());

Insert...

# Ability Template
if ($config['Ability_Template']['abi_addon_image_preview'] == 'Y') {
if($products) {
foreach($products as $key=> $product)
$products[$key]["image_url"] = func_query_first_cell("SELECT image_path FROM $sql_tbl[images_D] WHERE id=".$product["productid"]);
}
}
# /Ability Template

(e) In recommends.php

Before...

if (!empty($recommends)) {
    $smarty->assign('recommends', $recommends);
}

Insert...

# Ability Template
if (!empty($recommends))
foreach ($recommends as $rid => $prod) {
$prod_tmp = func_select_product($prod['productid'], (isset($user_account) && isset($user_account["membershipid"])) ? max(intval($user_account["membershipid"]), 0) : 0);
$recommends["$rid"]['descr'] = $prod_tmp['descr'];
}
# /Ability Template

(f) In search.php

Before...

// Assign the current location line
$smarty->assign('location', $location);

Insert...

# Ability Template
if ($config['Ability_Template']['abi_addon_image_preview'] == 'Y') {
if($products) {
foreach($products as $key=> $product)
$products[$key]["image_url"] = func_query_first_cell("SELECT image_path FROM $sql_tbl[images_D] WHERE id=".$product["productid"]);
}
}
# /Ability Template

(g) In modules/Bestsellers/bestsellers.php

Before...

$smarty->assign_by_ref('bestsellers', $bestsellers);

Insert...

# Ability Template
if (!empty($bestsellers))
foreach ($bestsellers as $pid => $prod) {
$prod_tmp = func_select_product($prod['productid'], (isset($user_account) && isset($user_account["membershipid"])) ? max(intval($user_account["membershipid"]), 0) : 0);
$bestsellers["$pid"]['descr'] = $prod_tmp['descr'];
}
# /Ability Template

(h) In modules/Upselling_Products/related_products.php

Before...

if (!empty($product_links))
    $smarty->assign('product_links', $product_links);

Insert...

# Ability Template
if (!empty($product_links))
foreach ($product_links as $pid => $prod) {
$prod_tmp = func_select_product($prod['productid'], (isset($user_account) && isset($user_account["membershipid"])) ? max(intval($user_account["membershipid"]), 0) : 0);
$product_links["$pid"]['descr'] = $prod_tmp['descr'];
}
# /Ability Template

(i) In skin/common_files/common_templates.tpl

Before...

{else}

Insert...

{* Ability Template - All Categories *}
{elseif $main eq "categories"}
{include file="customer/categories_all.tpl"}
{* /Ability Template - All Categories *}

{* Ability Template - Gallery *}
{elseif $main eq "gallery"}
{include file="custom/addons/gallery/gallery.tpl"}
{* /Ability Template - Gallery *}

(j) X-Cart Gold users, in skin/common_files/single/home.tpl

X-Cart Pro users, In skin/common_files/admin/home.tpl

Before...

{else}

Insert...

{* Ability Template *}
{elseif $main eq "abi_stats_overview"}
{include file="admin/main/stats/ability_stats_overview.tpl"}

{elseif $main eq "abi_stats_visitors"}
{include file="admin/main/stats/ability_stats_visitors.tpl"}

{elseif $main eq "abi_stats_history"}
{include file="admin/main/stats/ability_stats_history.tpl"}
{* / Ability Template *}

(k) X-Cart Gold users, in skin/common_files/single/menu_box.tpl

X-Cart Pro users, In skin/common_files/admin/menu_box.tpl

After...

{if $active_modules.XAffiliate ne ""}
{include file="admin/menu_affiliate.tpl"}
{/if}

Insert...

{* Ability Template *}
<li>
<span style="float:left;margin-right:5px"><img src="{$AltSkinDir}/custom/images/icons/star.png" alt="" /></span>
<span style="float:left">{$lng.lbl_ability}</span>
<div>
{if $active_modules.Ability_Template}
<a href="{$catalogs.admin}/configuration.php?option=Ability_Template">{$lng.option_title_Ability_Template}</a>
{if $config.Ability_Template.abi_addon_stats eq "Y"}
<a href="{$catalogs.admin}/ability_stats_overview.php">{$lng.lbl_abi_stats} {$lng.lbl_abi_stats_overview}</a>
<a href="{$catalogs.admin}/ability_stats_visitors.php">{$lng.lbl_abi_stats} {$lng.lbl_abi_stats_visitors}</a>
<a href="{$catalogs.admin}/ability_stats_history.php">{$lng.lbl_abi_stats} {$lng.lbl_abi_stats_history}</a>
{/if}
<a href="{$catalogs.admin}/ability_stats_cleaner.php" target="_blank">X-Cart {$lng.lbl_stats_cleaner}</a>
<a href="http://www.xcartmods.co.uk/docs/ability" target="_blank">{$lng.lbl_ability_docs}</a>
{/if}
</div>
</li>
{* / Ability Template *}

(l) In include/search.php

After...

        for ($i = 5; 50 >= $i; $i = $i + 5) {
            $perPageValues[] = $i;
        }

Insert...

        # Ability Template
        # Show all products per page
            $perPageValues[] = 99999;
        # /Ability Template

» Advanced Minicart Modifications

(m) In include/common.php

After...

        // Get categories menu data
        if (!empty($categories)) {
            $smarty->assign('categories_menu_list', $categories);
        }

Insert...

		// Ability Advanced Minicart Start
		if ($config['Ability_Template']['abi_addon_minicart'] != 'disabled') {
			include $xcart_dir."/ability_minicart_content.php";
		}
		// Ability Advanced Minicart End

(n) In skin/common_files/js/ajax.minicart.js

Replace...

// Widget :: update cart total block
ajax.widgets.minicart.obj.prototype.updateTotal = function() {
  return this.checkElement() && ajax.core.loadBlock($('div.minicart, span.minicart', this.elm), 'minicart_total');
}

With...

// Widget :: update cart total block
ajax.widgets.minicart.obj.prototype.updateTotal = function() {
	// Ability Advanced Minicart Start
	if(typeof minicart_update == 'function') {
		minicart_update();
	}
	// Ability Advanced Minicart End
  return this.checkElement() && ajax.core.loadBlock($('div.minicart, span.minicart', this.elm), 'minicart_total');
}

» Mega Dropdown Menu Modifications

(o) In admin/process_category.php

After...

                    'order_by' => intval($v['order_by']),

Insert...

                    # Ability Mega Dropdown
                    'md_enabled' => ($v['md_enabled'] == 'Y' ? 'Y' : 'N'),
                    'md_cols' => intval($v['md_cols']),
                    'md_align' => intval($v['md_align']),
                    # /Ability Mega Dropdown

(p) In include/func/func.category.php

After...

        $to_search[] = 'node.order_by';

Insert...

        # Ability Mega Dropdown
        $to_search[] = 'node.md_enabled';
        $to_search[] = 'node.md_cols';
        $to_search[] = 'node.md_align';
        # /Ability Mega Dropdown

» Statistics Addon Modifications

(q) In admin/ability_stats_config.php

Update the database settings...

$db_host = 'localhost'; // Hostname
$db_user = 'username'; // Username
$db_pass = 'password'; // Password
$db_name = 'database';// Database

If you are using the X-Cart database to store statistical data, you can obtain the settings from config.php

(4) Enable the Flyout Menus module

In admin go to Modules and enable the Flyout Menus module.

Then to the right of Flyout Menus, click the Configure link.

Uncheck the Cache the menu option and click Apply changes.

(5) Activate Template

In admin go to Settings > General Settings > Appearance, from the skin options, select Ability Template and click 'Apply changes'.

(6) Clear Template Cache

In Tools > Maintenance click the 'Clear templates/X-Cart cache' button (IMPORTANT)

Template installation complete!

The template should now be active and you should be able to view the template settings, via the admin 'Settings' menu tab.

PLEASE NOTE! If the template is not appearing as per the demo, and / or you cannot see the template settings link in admin, then the most likely cause will be that the SQL patch has not been applied correctly. Re-apply the install patch (step 1), then clear the template cache.

(7) Post Install Steps

(a) In General Settings > Company, update your Company name and URL (ensure you have http:// in front of your URL).

(b) In General Settings, enable 'Parse Smarty tags in the content of embedded static pages'.

(d) Add the following code to your root .htaccess file (required for the X-Cart JS/CSS speedup tools) ...

<FilesMatch "\.(css|js)$">
    Allow from all
</FilesMatch>

(e) If using X-Cart Clean URLs, add the relevant .htaccess code in General Settings > SEO.

(f) Ensure rss_news.xml and rss_products.xml in the store root folder are writable (CHMOD 777).

(g) Should you wish to start collecting traffic data, in the Ability settings, enable the Traffic statistics gatherer / visitor counter addon.

If we can help in any way, get in touch

The v4.4.x / v4.5.x Templating System

In X-Cart v4.3.x and below, you had to modify the entire skin1 folder to design your skin.

In X-Cart v4.4.x onwards they introduced a new way of creating skins.

Now, the main template repository is skin/common_files

Any files in skin/ability, will override those in /skin/common_files

The Smarty variable that displays the path to the main template repository is {$SkinDir}

The Smarty variable that displays the path to the Ability template is {$AltSkinDir}

Common Styles

The main stylesheet for editing much of the skin styling is - skin/ability/custom/css/common.css

Theme Styles

The stylesheets for each of the preset / custom themes reside in - skin/ability/custom/css/themes

Click here for example theme CSS with comments.

Headers & Footers

You can choose a different header / footer in the Ability settings.

Headers reside in - skin/ability/custom/header

Footers reside in - skin/ability/custom/footer

Header Logos

Header logo images reside in - skin/ability/custom/images/logos

Four sizes are available, which you can choose in the Ability settings.

You can also choose a textual logo, which uses Google fonts. You can choose the text and fonts in the Ability settings.

Homepage Promotions

Much of the homepage promotions can be enabled/disabled from the Ability template settings.

The main template for re-ordering homepage promotions is - skin/ability/customer/main/welcome.tpl

Homepage Image Sliders

The central folder for the homepage image sliders etc. is skin/ability/custom/welcome/promotions

Responsive image slider - skin/ability/custom/welcome/promotions/image_slider/image_slider.tpl

Camera image slider - skin/ability/custom/welcome/promotions/camera_slider/camera_slider.tpl

3D flash image slider - skin/ability/custom/welcome/promotions/flash_slider/piecemaker_medium.xml - (or _small or _large depending on layout)

Featured image box - skin/ability/custom/welcome/promotions/featured_box/featured_box_medium.tpl - (or _small or _large depending on layout)

Horizontal image roundabout - skin/ability/custom/welcome/promotions/image_roundabout/image_roundabout.tpl

Horizontal image accordion - skin/ability/custom/welcome/promotions/accordion/accordion.tpl

Static image - skin/ability/custom/welcome/promotions/static_image - (image filename and link can be set in Ability settings)

YouTube video - skin/ability/custom/welcome/promotions/video - (video ID can be set in Ability settings)

Homepage Welcome Message

In admin > languages search for and edit - lbl_txt_welcome

Homepage Countdown to an Event

Countdown date and hyperlink to either product or category can be set in Ability settings.

It will automatically display either a product image or category icon.

You can set the countdown message and countdown expired text in Ability settings.

Horizontal Category Menu Styles

5 level animated dropdown/flyout menu - skin/ability/custom/addons/menus/horiz/dropdown/css/dropdown.css

Or for quick colour customisation, in skin/ability/custom/addons/menus/menus_common.tpl - uncomment line 14 and set the colours...

	//customtheme: ["#1c5a80", "#18374a"],

3 level mega dropdown menu - skin/ability/custom/addons/menus/horiz/mega/css/mega.css

1 level tabbed category menu - skin/ability/custom/css/common.css (look for SPEEDBAR TABS)

Tabbed speedbar menu - skin/ability/custom/css/common.css (look for SPEEDBAR TABS)

Tabbed custom menu - skin/ability/custom/css/common.css (look for SPEEDBAR TABS)

3 Level Mega Dropdown Menu

You may wish to close your store while organising your categories.

If you have many sub-categories, it may take some time to re-organise the categories to achieve the desired overall effect.

Enable the mega dropdown menu in the Ability settings, then go into your admin categories section to manage your dropdown menus.

Change the order of your categories by adjusting the order 'Pos.' fields.

Three new fields appear on the right hand side... (these only appear at the root category level)

Mega Dropdown Enabled - Yes or No
Mega Dropdown Columns 1-5
Mega Dropdown Align Pos. 0-6 (this is the horizontal offset, in 120px increments, 6 = right aligned)

If categories are not displaying in the correct manner, go into Tools > Maintenance and click the button - Force cache generation

If for any reason you get an unusual category display, try setting the number of columns to a number divisable by the total subcategories.
Eg. If you have 9 subcategories, use 3 columns. If you have 24 subcategories, use 4 columns.

Also, avoid mixing 2nd level categories with 2nd / 3rd level categories, as it may affect the category layout.

The stylesheet to modify styles is - skin/ability/custom/addons/menus/horiz/mega/css/mega.css

Vertical Category Menu Styles

5 level flyout menu - skin/ability/custom/addons/menus/vert/flyout/css/flyout.css

Or for quick colour customisation, in skin/ability/custom/addons/menus/menus_common.tpl - uncomment line 55 and set the colours...

	//customtheme: ["#1c5a80", "#18374a"],

3 level tree menu - skin/ability/custom/addons/menus/vert/tree/css/jquery.treeview.css

2 level sliding menu - skin/ability/custom/addons/menus/vert/sliding/css/sliding.css

Menu Box Elements

Modify one or more of the following templates, depending on your chosen column layout...

2 columns with left hand menu - skin/ability/customer/left_right_bar_2_cols.tpl

2 columns with right hand menu - skin/ability/customer/left_right_bar_2_cols.tpl

3 columns with left/right menus - skin/ability/customer/left_bar.tpl AND skin/ability/customer/right_bar.tpl

If you have any questions, not answered below, get in touch

Expand All | Collapse All

Pre-Order Questions

Are there any server requirements for this template?

By default X-Cart requires a fairly decent server to run smoothly. See here for more details.

We strongly advice against using low-cost, highly populated shared servers such as HostGator, GoDaddy etc.

You should be running PHP 5.x

Will this template work on X-Cart versions lower than v4.4.4?

It will most likely work, however some newer features may not, so it's not recommended.

To ensure full compatibility and remain as bug-free as possible, we highly recommend you either upgrade your store to v4.4.4+ or install a fresh v4.4.4+

We always try to test the template with the latest available version of X-Cart within a few days of its release.

Will this template work on X-Cart Gold and Pro versions?

Yes. There are no additional charges for Pro stores either.

How easy is the template to install?

You'll need to have use of an FTP client and basic knowledge of modifying PHP / Smarty templates.

Click on the 'Installation' tab in the top menu above to view the installation procedure.

We can perform the installation for $69, which includes basic setup, logo upload and basic theme creation.

Can I add other third party mods to my store using this template?

Absolutely, provided that you or your mod installer are fully aware of the new X-Cart templating system in v4.4.x.

Occasionally third party mod instructions will require adapting, depending on which smarty template files need customising.

Essentially, any template files in skin/ability will override any core template files in skin/common_files

Can I add a third party checkout mod to my store using this template?

Yes, the template itself makes no modifications to the checkout procedure.

Can I use the template on multiple stores?

The single domain license can only be run on the store URL and / or development URL you specify when ordering.

The development license entitles you to use the template on unlimited stores without restrictions.

Can I develop my X-Cart store with the Ability template on my local server? (localhost)

Yes you can - localhost or IP address 127.0.0.1

How easy is it to customise the template layout / design?

Much of the layout and design can be customised from the Ability settings.

The in-built themes are very easy to customise and can change the look of your store dramatically. Each theme contains only 16 lines of CSS code.

The template has a theme designer and CSS code generator for easy theme generation.

Being a CSS based template, any part of the store can be easily customised, if you know what you are doing and are prepared to do some digging in the code.

If you have basic-intermediate knowledge of HTML, CSS and Smarty then you should have no problem tweaking.

Firebug is a great tool for inspecting CSS elements.

Are any template files encoded?

If you have a single domain license, some files are encoded. If you have the developers license, all files are open source.

Do I require any special loaders such as Ioncube or Zend?

Unlike other templates, no you don't.

Does the template 'call home' in any way?

Unlike other templates, no it doesn't.

Why should I buy this template?

It is the most feature-rich, flexible and customisable X-Cart template that currently exists
It has many unique features and addons built-in, that would cost you extra elsewhere
It has proved to be very search engine friendly
It has features you would not expect from an X-Cart template
It is easier than customising the default X-Cart templates
Once you get used to the Ability template layout, you will find it indispensible!
It is incredibly good value for money, especially if you purchase the developers license

Theme Generation Questions

How do I choose or modify a custom theme?

Please use a modern, capable browser, such as Chrome or Firefox - NOT IE

1) In the Ability template settings, near the top, enable the 'theme designer', then visit your storefront.

2) To the left hand side of the screen you will see some floating icons, click on the uppermost icon and a popup will appear.

3) You can preview the preset themes by clicking on the colours.

4) To enable any theme, remember your chosen theme number (01-20).

5) Go back to Ability template settings, enable the theme number, then disable the 'theme designer'.

Your chosen theme should now be active.

To modify any of the custom themes, go to skin/ability/custom/css/themes and edit the CSS files.

Click here for example theme CSS with comments.

How do I create my own custom theme?

The process is fairly simple. You may wish to close your store while you do so.

Please use a modern, capable browser, such as Chrome or Firefox - NOT IE

1) In the Ability template settings, near the top, enable the theme designer, then visit your storefront.

2) To the left hand side of the screen you will see some floating icons, click on the second icon and a popup will appear.

3) Then click each of the 12 colour pickers to change the theme colours.

4) Then choose either a transparent tile image or image background.

5) Then click on the third left hand floating icon that looks like a 'gear'.

6) CSS code should appear, copy this code and paste into skin/ability/custom/css/themes/custom.css

5) Go back to Ability template settings, set the theme to 'Custom', then disable the 'theme designer'.

Your custom theme should now be active.

Click here for example theme CSS with comments.

When I enable the theme designer, I cannot see the floating icons, why?

Because you are probably using IE. Please use Firefox or Chrome etc. instead.

General Questions

I am seeing a bug when I do X...

X-Cart v4.4.4 + is becoming stable, but as with all X-Cart releases bugs are inevitable.

We have designed the template as cleanly as possible and not changed much of the core X-Cart files.

So before automatically assuming the Ability template is at fault, please check the X-Cart Bug Tracker and X-Cart Forums first.

If you still have problems, please use our support ticket system.

On installation, the layout is messed up, why?

It could possibly be that the header dropdown flyout menu is the cause. Ensure you do not have too many categories enabled to fit the header width.

How do I modify/delete/re-arrange the menu items?

Modify one or more of the following templates, depending on your chosen column layout...

2 columns with left hand menu - skin/ability/customer/left_right_bar_2_cols.tpl

2 columns with right hand menu - skin/ability/customer/left_right_bar_2_cols.tpl

3 columns with left/right menus - skin/ability/customer/left_bar.tpl AND skin/ability/customer/right_bar.tpl

How can I create my own menu links box?

You can use code like this...

{capture name=menu}
<div class="menu_nav">
	<ul>
		<li><a href="#link_1">Menu Link 1</a></li>
		<li><a href="#link_2">Menu Link 2</a></li>
		<li><a href="#link_3">Menu Link 3</a></li>
		<li><a href="#link_4">Menu Link 4</a></li>
		<li><a href="#link_5" class="last">Menu Link 5</a></li>
	</ul>
</div>
{/capture}
{include file="customer/menu_dialog.tpl" title="MENU TITLE GOES HERE" content=$smarty.capture.menu}

For RSS latest products, the product thumbnails do not appear, why?

Ensure you have set the full Company URL, including http:// in General settings > Company > Store name

The 'Store name' field should be named 'Store URL', which is kind of an X-Cart bug, as of v4.4.5.

The 2 level sliding menu behaves oddly, why?

Ensure each parent category has at least one sub-category.

Or, apply this fix.

My news ticker doesn't work, why?

Ensure you have added a news list and at least one news list message.

It only works when you have one single news list.

My gallery doesn't work, why?

Ensure your server is running PHP 5.x.

How do I add images to the gallery?

Upload folders of images to /files/gallery

You can upload folders within folders and the gallery categories menu should update accordingly.

What format of images should I use for the gallery?

You can use JPEG or PNG. JPEG's are highly recommended, being smaller in file size than PNGs.

Are gallery thumbnails cached?

No they are not, so it's recommended you don't upload hundreds of images per gallery folder.

Keep to a reasonably low amount of images per folder if possible.

How do I adjust the gallery thumbnail size?

Edit /gallery_config.php

Then edit the last lines of - skin/ability/custom/addons/gallery/css/gallery.css

How do I make my own tooltips?

Use a hyperlink like this...

<a href="#nogo" class="ttip_s" title="This is the tooltip text!">Link Text</a>

You can use ttip_n / ttip_e / ttip_s / ttip_w depending on the tooltip position required (North / East / South / West)

The "title" attribute should contain the tooltip text.

To display a tootip containing an image, use...

<a href="#nogo" class="ttip_s" title="<img src='path/to/image.jpg' alt='' />">Link Text</a>

How do I make a video appear in the advanced lightbox?

Use a hyperlink like this...

<p class="p_video"><a href="http://www.youtube.com/watch?v=4A1AgQJcyYc" class="lbox">YouTube Video Lightbox</a></p>

It supports YouTube, Vimeo, Metacafe, Google, Dailymotion, Gametrailers.com and Twitvid.com

How do I make inline content appear in the advanced lightbox?

Use a hyperlink like this, noting the desired lightbox width / height and ID...

<a href="?lightbox[width]=500&lightbox[height]=150#your_id" class="lbox">Inline Content</a>

Then add your inline content like this...

<p id="your_id" style="display:none"><b>Inline Content</b> Consectetur adipiscing elit. Mauris auctor nisi eget justo gravida volutpat. Nullam a arcu purus, id malesuada risus. Vestibulum non dapibus nisi. Nulla lacinia interdum consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sed tortor ut augue vehicula luctus eu a elit.</p>

How do I make iframe content appear in the advanced lightbox?

Use a hyperlink like this, noting the desired lightbox width / height and URL...

<a href="http://www.bbc.co.uk/?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lbox">Open BBC</a>

How do I make a scrollable content box?

Use code like this...

<div class="scroll-pane-100">
<p>Your content goes here (ensure you use a paragraph tag on the content)...</p>
</div>

You can choose from many heights by substituting the class="scroll-pane-100" value...

50 / 80 / 90 / 100 / 125 / 150 / 175 / 200 / 250 / 300 / 350 / 400 / 450 / 500

How do I modify my FAQs?

Edit - skin/ability/custom/addons/faqs/faqs.tpl

How do I include my FAQs in other pages?

Use this Smarty code in your template/static page...

{include file="custom/addons/faqs/faqs.tpl"}

If including into a static page, ensure you have checked this option in X-Cart General Settings...

"Parse Smarty tags in the content of embedded static pages"

You may also need to update this line in skin/ability/custom/addons/addons_common.tpl

{if ($main eq "product" && $config.Ability_Template.abi_product_info_display eq "accordion") || ($main eq "help" && $config.Ability_Template.abi_addon_faqs eq "Y") || $smarty.get.pageid eq "8"}

Where pageid eq "8" should equal the page ID of your FAQs static page.

Why is my Google map not displaying? (I get a grey box)

Ensure this option is checked in Ability settings : Display location map on contact us page

Ensure you have added valid address details in General Settings > Company details > Company location address

Where does the Google map get the primary Company location from?

From the X-Cart General Settings > Company details > Company location address

I have many physical stores, can I add multiple map locations to the Google map?

Yes, edit skin/ability/custom/addons/maps/map.tpl

Replace...

	markers:[
		{
			address: "{/literal}{$config.Company.location_address}, {$config.Company.location_city}, {$config.Company.location_state}, {$config.Company.location_zipcode}, {$config.Company.location_country}{literal}",
			html: "<b>{/literal}{$config.Company.company_name}</b><br />{$config.Company.location_address}, {$config.Company.location_city}, {$config.Company.location_state}, {$config.Company.location_zipcode}, {$config.Company.location_country}{literal}",
			icon: {
				image: "{/literal}{$AltSkinDir}{literal}/custom/addons/maps/images/gmap_pin.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		}
	]

With...

	markers:[
		{
			address: "{/literal}{$config.Company.location_address}, {$config.Company.location_city}, {$config.Company.location_state}, {$config.Company.location_zipcode}, {$config.Company.location_country}{literal}",
			html: "<b>{/literal}{$config.Company.company_name}</b><br />{$config.Company.location_address}, {$config.Company.location_city}, {$config.Company.location_state}, {$config.Company.location_zipcode}, {$config.Company.location_country}{literal}",
			icon: {
				image: "{/literal}{$AltSkinDir}{literal}/custom/addons/maps/images/gmap_pin.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		},
		{
			address: "SECOND ADDRESS DETAILS WITH ZIP/POSTCODE",
			html: "<b>Second Address Text</b><br />Description etc.",
			icon: {
				image: "{/literal}{$AltSkinDir}{literal}/custom/addons/maps/images/gmap_pin.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		}
	]

Etc.

You may also need to adjust the map zoom setting (the lower the value, the more zoomed out the map display is)...

	zoom: 10,

How do I update the favicon image?

Upload a new favicon.ico image to skin/ability/custom/images

Generate you own here.

How do adjust the social links in the floating social box?

Edit skin/ability/custom/addons/addons_common.tpl

Add/remove items here...

	buttons: 'twitter,facebook,plusone,linkedin,buzz,digg,stumbleupon,pinit'

How do I edit the rotating testimonials in the footer?

Edit - skin/ability/custom/footer/content/footer_testimonials.tpl

How do I edit the footer credit card logos?

Edit - skin/ability/custom/footer/footer_payment_icons.tpl

How do I add custom quotes / testimonials to my product descriptions?

Use HTML code like this for each quote / testimonial...

<div class="quote_wrapper">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem nibh, commodo in fermentum non, tempus a mauris. Cras sed risus nunc. Etiam vel nisi eu sapien sollicitudin placerat. Nam vitae lobortis dui. Aenean lobortis ligula.</p>
<cite>Bob Smith</cite>
</blockquote>
</div>

How do I change the page peel images?

It consists of 3 PNG images, which reside in - skin/ability/custom/addons/corner_curl/images

Pre-sliced source files were sent to you, in the 'misc' folder of the main template files.

When a customer is logged in, the account dropdown menu says " 's Account... " - is that a bug?

No, just enable the 'Greet Visitor' module from within modules. Then it should display the customer name properly.

If you don't want to greet the visitor on the homepage, it can be commented out in skin/ability/customer/main/welcome.tpl

Alternatively, in skin/ability/custom/header/content/header_dropdown.tpl replace...

	<option value="">{if $login eq ""}{$lng.lbl_abi_my_account}...{else}{$display_greet_visitor_name}'s {$lng.lbl_abi_account}...{/if}</option>

With...

	<option value="">{if $login eq ""}{$lng.lbl_abi_my_account}...{else}{$fullname}'s {$lng.lbl_abi_account}...{/if}</option>

I want to increase the width of the left hand column on the product details, how?

The layout is based on a 16 column layout using the fluid 960 grid system.

Edit - skin/ability/customer/main/product_above.tpl

Adjust...

And...

<div class="grid_12 details">

See the FAQ below in CSS/HTML tips - "How do I use the Grid System?"

My store is slow in IE7, is there anything I can do?

You can try disabling the rounded corner effect (we use CSS3Pie to achieve the corners in IE).

In skin/ability/custom/css/ie.css, delete or comment out this code...

behavior: url(skin/ability/custom/js/PIE.htc);

I get an 'insecure' element error when in HTTPS mode with a Google font enabled, why?

In skin/ability/custom/addons/addons_common.tpl

Replace...

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family={$config.Ability_Template.abi_font_google}">

With...

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family={$config.Ability_Template.abi_font_google}">

My products layout display is messed up, why?

This is usually caused by one or more product descriptions HTML code not being valid, which breaks the CSS layout.

IE. a description may have an unclosed DIV or SPAN element, caused by the product description WYSIWYG HTML editor.

Keeping your product descriptions HTML valid, will not only ensure the layout is always correct, but will assist with SEO also.

If you are still having problems, try...

In skin/ability/customer/main/products_switchers.tpl

Replace...

{$product.descr|truncate:350:"...":true|strip|strip_tags:true}

With...

{$product.descr|truncate:350:"...":true|strip|strip_tags:false}

And / or try adjusting the truncate:x figure.

How can I use a static page for the welcome content?

Create a new static page, noting the page file (let's say you name it - welcome.html)

Uncheck the option "Show Link" or "Show a link to the page in Help menu?"

In skin/ability/customer/main/welcome.tpl

Replace...

{$lng.txt_welcome}

With...

{include file="./pages/en/welcome.html"}

Where do I edit the left/right menu promo boxes?

In skin/ability/custom/addons/promos

If I enable the vertical flyout category menu, the store is 'jumpy' in IE, why?

In skin/ability/custom/addons/menus/vert/flyout/js/flyout.js

Replace line 6...

shadow: {enable:true, offsetx:3, offsety:3}, //enable shadow?

With...

shadow: {enable:false, offsetx:3, offsety:3}, //enable shadow?

How can I get the minicart to display prices including tax/vat?

Enable this option in Shipping and Taxes > Tax System ...

Display a tax rate for each product in cart/order:

My homepage 3D flash slider is not working, why?

Ensure the 'Magnifier' module is enabled in modules (even if you don't use it).

It loads the SWFObject javascript code that powers the flash content.

My categories are not displaying, why?

Ensure the 'Flyout Menus' module is enabled in modules and the 'Cache the menu' option is unchecked.

Enabling the 'Cache the menu' feature has not yet worked properly in our experience, it may however work for you.

How do I adjust the footer testimonials transition speed?

In skin/ability/custom/js/common.js

Around line 137, look for and tweak these values...

if(!speed)speed=500;if(!delay)delay=6000;

Why does my statistics addon not work or not collect data?

Ensure you have patched the database (install step 1b) and updated your database details in admin/ability_stats_config.php

$db_host = 'localhost'; // Hostname
$db_user = 'username'; // Username
$db_pass = 'password'; // Password
$db_name = 'database';// Database

Also, ensure this code is present somewhere.

{include file="custom/addons/stats/stats.tpl"}

By default it is in - skin/ability/custom/footer/footer_copyright.tpl

What are the options for the statistics addon counter?

See admin/ability_stats_config.php

$style = "light"; // Counter style "dark" or "light"
$show = "total"; // Counter shows "total" or "last24h"  visitors
$size = "small"; // Size of the counter "small" or "big"

$reload = 3*60*60; // Reload lock in seconds (3 * 60 * 60 => 3 hours)
$online = 5*60; // Online time in seconds (5 * 60 => 5 minutes)
$oldentries = 30; // Delete visitor infos after x days (30 => 30 days)

What / where is the statistics addon counter code?

See skin/ability/custom/footer/footer_copyright.tpl

{include file="custom/addons/stats/stats.tpl"}

Does CDSEO work with the template?

Yes, it works fine with the template.

Some servers require that the following CDSEO line in the root .htaccess file is uncommented...

RewriteBase /xxxxx

RewriteBase /

Also, some servers don't like rewriting pages as folders, so if you experience issues, try using .html pages instead of folders.

Also, ensure your /admin folder permissions are not set to anything other than 755.

Failing that, check with the CDSEO vendor.

What does the 'X-Cart Statistics Cleaner' do?

It empties the X-Cart statistics tables (xcart_stats_*) generated by the X-Cart Advanced Statistics module.

Over time, these tables can get very large and start to affect store performance.

The bestsellers statistics data is not affected.

How do I edit the textual logo?

Adjust the logo Google font, font size and font colour settings for the company name and tagline in the Ability header settings.

Also in skin/ability/custom/css/common.css look for HEADER TEXTUAL LOGO

To change the logo 'icon', replace skin/ability/custom/images/logos/icon.png

How do I adjust the dimensions of the 'quick view' popup?

Edit skin/ability/custom/addons/quick_view/quick_view.tpl

$.lightbox(html,{width:480,height:240});return false;

CSS / HTML Tips

How do I use the Grid System?

In the main content column, you can make use of up to 16 flexible columns in any combination.

Let's say you want two columns, one 1/4 wide, the other 3/4 wide, then you would code it like this...

<div class="grid_4">
	<p>Column 4/16</p>
</div>
<div class="grid_12">
	<p>Column 12/16</p>
</div>
<div class="clearing"></div>

Let's say you want four equal columns, then you would code it like this...

<div class="grid_4">
	<p>Column 4/16</p>
</div>
<div class="grid_4">
	<p>Column 4/16</p>
</div>
<div class="grid_4">
	<p>Column 4/16</p>
</div>
<div class="grid_4">
	<p>Column 4/16</p>
</div>
<div class="clearing"></div>

Etc.

See here for more details.

The header and footer uses a 12 column flexible layout, so adjust your grid code accordingly.

How can I enlarge / scale the tiles on a tiled image background?

Use the background-size property, eg.

body { background-image: url(../../images/tiles/tile_164.png); background-size: 20%; }

The above example will make the background 5 tiles across.

10% = 10 across etc.

Or you could try using a fixed pixel amount...

body { background-image: url(../../images/tiles/tile_164.png); background-size: 150px; }

Note, if using a percentage value, it may distort the tiles somewhat on large screens.

Also, this may not work in older browsers.

How can I add a border to my images and/or align them left/right/center?

Add class="imgborder" to the image tag.

<img src="path/to/image.jpg" class="imgborder" alt="" />

You can also align the image to the left with class="imgborder alignleft"

Align right with class="imgborder alignright"

Align center with class="imgborder aligncenter"

How do I make an image flexible, ie. stretch 100% of container?

Add class="static_image" to the image tag.

<img src="path/to/image.jpg" class="static_image" alt="" />

How do I make some text highlighted?

You can highlight any text in one of four colours...

<p><span class="highlight-red">Lorem Ipsum</span></p>

or...

<p><span class="highlight-blue">Lorem Ipsum</span></p>

or...

<p><span class="highlight-green">Lorem Ipsum</span></p>

or...

<p><span class="highlight-yellow">Lorem Ipsum</span></p>

How do I use a single background image for my store background?

Use code like this in your theme stylesheet...

body { background: #fff url(../../images/backgrounds/background.png) top center no-repeat fixed; }

How can I create a HTML divider?

There are 12 styles to choose from...

<div class="divider_1"></div>
<div class="divider_2"></div>
<div class="divider_3"></div>
<div class="divider_4"></div>
<div class="divider_5"></div>
<div class="divider_6"></div>
<div class="divider_7"></div>
<div class="divider_8"></div>
<div class="divider_9"></div>
<div class="divider_10"></div>
<div class="divider_11"></div>
<div class="divider_12"></div>

Demos of the dividers can be seen here.

Or, just use a plain horizontal rule...

<hr />

How can I create a custom HTML button?

Use HTML code like this...

<button class="button" onclick="document.location.href='link.html';return false;">Button Title</button>

PHP / MySQL Tips

How can I get the X-Cart DB export tool to export ALL database tables?

By default, the X-Cart DB export tool will only export the standard X-Cart database tables.

You may have custom mods that add new database tables, in which case you'll want them to be exported also.

In admin/db_backup.php comment out or delete this code...

            if (!in_array($_table, $sql_tbl))
                continue;

Comment them out by adding two forward slashes to the start of each line ( // ).

Optimisation Questions

My store runs slow, what can I do to speed up my store?

Performance is heavily server dependant. You need to have a half-decent server to run X-Cart, ie. not a highly populated shared server.
Ensure the JS / CSS speedup tools are enabled in general settings.
Only enable the essential X-Cart modules that you need.
Only enable the essential features of the Ability template that you need.
Reduce the number of categories / subcategories, or limit the number of enabled category menus.
Enable the 'cache the menu' option in 'modules > flyout menus' (may not work on all servers).
Try some of the optimisation tools in 'General Settings'. If your store design is complete, you can disable Smarty template compilation.
Ensure your product images are well compressed/optimised, ie. not huge in file size considering the dimensions.
Optimise your database regularly in Admin > Tools > Maintenance.
Clean the X-Cart statistics logs frequently, otherwise they build up and can affect store performance. A tool is provided with Ability to do this efficiently.
One quick tip is to disable the 'Advanced Statistics' module altogether, but this may affect some features.
When you received the Ability files, there was a folder called /misc. Look for .htaccess_useful.txt - Adding some of this code to your root .htaccess files can speedup your store (if your server supports it).
There are many posts on the X-Cart Forum giving you tips on how to speed up X-Cart.

I notice that a lot of javascript code is appearing in the <head>, even when I have the JS/CSS Speedup option enabled, why?

Due to the nature and extensive features of the Ability template, we have not included the Ability files, javascript routines etc. with the X-Cart JS/CSS speedup tools.

We have however optimised/compressed much the javascript code, merged files etc. to speed up things as much as possible.

You must still enable the JS/CSS speedup tools, in order to compress the core X-Cart JS and CSS files.

Best Practices

Get used to using Firebug, it's one of the most popular web development tools of the moment.
If you are having trouble identifying a template, or part of a template, enable the dedug console in X-Cart general settings.
Only enable the essential X-Cart modules and Ability template features required. Having unnecessary modules/features enabled will only add overhead and slow down your store.
A fixed, centered layout is generally the best layout option, as there are less design issues to consider, especially with widescreen displays becoming more commonplace.
Go easy with the amount of categories / subcategories! Having too many (hundreds) will affect store performance.
Keep all your product thumbnail / detailed images and manufacturer logos to specific sizes. This creates uniformity throughout the store, reduces any layout issues and makes things easier on the eye. Store images in the 'File System', not the database.
High quality product thumbnails and detailed images is what will set your store apart from others. Ensure you have the best possible product images and optimise them where possible.
For extra security, password protect your /admin and/or /provider folders, either by using your host control panel, or manually by using a tool like this.
Only use secure passwords for your FTP server and X-Cart admin! Click here to generate some.

Coming Soon...

We'll soon be adding some custom themes for free download, as well as some premium themes you can purchase.

April 27th 2012

v1.1 - Major Update

Tested with X-Cart v4.5.0.
Various fixes to work with v4.5.0 including...
- Dynamic product search.
- Homepage new and random products.
- Product RSS feeds.
Improved one page checkout layout.

March 14th 2012

v1.052 - Minor Update

New Slider: Camera Responsive Image Slider.
Floating product social share links code updated.
Advanced lightbox code updated.
Statistics counter code moved to store root.
'Get Directions' form added beneath the Google map.
Google fonts updated to 501.

February 23rd 2012

v1.051 - Minor Update

New Addon: Product 'quick view' lightbox for search results.
New Addon: QR code generator on product pages.
New option to have textual company logo and tagline using Google fonts.
New Addon: Traffic statistics gatherer / visitor counter.
New Addon: Statistics database table optimiser / cleaner.
Alternative Google map plugin used - no API key required.
Google fonts updated to 466.

February 6th 2012

v1.04 - Minor Update

New Addon: Search by price menu box.
New Addon: Sticky header speedbar.
New Addon: Sticky footer recently viewed.

January 29th 2012

v1.03 - Minor Update

Tested with X-Cart v4.4.5.
Minor fix to mouse wheel jQuery plugin.
Minor tweaks to header minicart.
Static pages can now have independant column layout style.
Bestsellers menu can be hidden on homepage.
Links to next / previous products added to product page.
Google fonts updated to 436.

January 18th 2012

v1.02 - Minor Update

X-Cart Affiliate / Partner module now integrated into the Ability Template.
Footer quotes / testimonials are now randomised.
Google fonts updated to 422.

January 7th 2012

v1.01 - Minor Update

New Addon: Display first detailed image as sticky tooltip on product thumbnails hover.
4 new Google web fonts added.

January 1st 2012

v1.0 - Initial Release

Overview

Features

Installation

Customisation

FAQs

Tips

Changelog

Thank you for purchasing the X-Cart Ability Template!

Requirements

Compatibility

Updates

Vote for this template!

X-Cart Ability Features

If you require the latest version files, you can request them - here - quoting your order ID and X-Cart version.

(1) Patch Database

(2) Upload Files

(3) Modify Store Files

(4) Enable the Flyout Menus module

(5) Activate Template

(6) Clear Template Cache

(7) Post Install Steps

If we can help in any way, get in touch

The v4.4.x / v4.5.x Templating System

Common Styles

Theme Styles

Headers & Footers

Header Logos

Homepage Promotions

Homepage Image Sliders

Homepage Welcome Message

Homepage Countdown to an Event

Horizontal Category Menu Styles

3 Level Mega Dropdown Menu

Vertical Category Menu Styles

Menu Box Elements

If you have any questions, not answered below, get in touch

Pre-Order Questions

Theme Generation Questions

General Questions

CSS / HTML Tips

PHP / MySQL Tips

Optimisation Questions

Best Practices

X-Cart Links

Useful Browser Addons

Useful Software

Useful Tools

Coming Soon...

April 27th 2012

March 14th 2012

February 23rd 2012

February 6th 2012

January 29th 2012

January 18th 2012

January 7th 2012

January 1st 2012