About


X-Cart Ultra is a fast, advanced, fully responsive, SEO friendly template for X-Cart Classic, based on Bootstrap 4.


Bootstrap 4 Based

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.


One Config File

Ultra uses a single .conf file for template settings, so no database patching and you can easily add your own settings to tailor the template as your own.


Flexible Layouts

You can have full width or boxed layouts and can set the columns for all sections of the store, be they one column, two column left sidebar or two column right sidebar.


Smart Category Menus

Various multi-level category menus are available, enabling your customers to find your products easily. Use the unique responsive header category mega menu, or just a sidebar menu, or both!


Smart Products Display

Responsive, sortable, cascading product listings. Products can be displayed in carousels or not.


Dynamic Search

Customers can find products, categories and manufacturers fast with the advanced search box.


Mobile Friendly

Ultra has been carefully designed to provide an intuitive shopping experience on mobiles, tablets and desktops.


SEO Ready

Google's recommended JSON-LD format structured data is included throughout the store to help you get indexed quickly.


Fast!

Ultra uses carefully chosen plugins and lazy loading to achieve a smooth browsing experience.


Low Cost

Ultra offers exceptional value for money and will help you get your online store up and running fast.



Highlights


  • Easy installation
  • Fully open source plus valid HTML
  • Fully configurable from a single .conf file
  • Super modern, card based design
  • Fast and fully responsive throughout
  • Future-proofed with the very latest Bootstrap 4
  • Flexible layouts easily configured in the settings
  • Search engine optimised, clean, semantic HTML
  • JSON-LD structured data code included
  • Seamless Wordpress integration (save $249)
  • Testimonials addon included (save $99)
  • Mobile-friendly sliders and optional product carousels
  • Revised one page and fastlane checkouts
  • Low cost / quick ROI / free updates and support *

Themes & Layouts


  • 20 preset themes, based on material design colours
  • Customisable colour 'shades' for each section
  • Multicolour layouts also possible!
  • Site layout can be boxed or full width / fluid
  • Page layout can be full width, or 2 columns with left or right sidebar
  • Each and every page can have it's own column layout
  • Google fonts support for headings, choice of body font stack
  • Choice of dialog, menu box and subheading styles
  • 3 header styles, up to 6 footer columns with choice of contents

Multi-Level Menus


  • Unique, priority based, responsive header category mega menu
  • Optional off-canvas menu that can be revealed left or right
  • Sidebar category menus - basic, sliding or mobile-friendly drilldown menus

Minicart


  • Effective, fully responsive header minicart

Homepage


  • Optional image slider, which can be full-width or boxed
  • Products displayed in optional responsive carousels
  • Optional countdown to an event for special offers etc.
  • Optional promotions boxes with many types of hover effects
  • Optional manufacturers logo carousel
  • Optional featured category display (via addon)
  • Optional latest blog posts display (via addon)

Product Listings


  • Responsive, cascading, live-sortable product cards
  • Effective product 'quick view' feature

Product Pages


  • Clean product page layout
  • Responsive, zoomable image lightbox, Cloudzoom alternative
  • Support for up to 5 videos via product 'extra' fields
  • Optional lazy-loaded social share buttons
  • Optional Disqus commenting

Search


  • Fast, dynamic live search box for products, categories and manufacturers

Misc


  • Much improved fast lane / one page checkouts
  • Optional RSS feeds generators for latest products and news
  • AJAX newsletter subscribe (standard and Mailchimp)
  • Optional Google map for contact us page
  • Manufacturers A-Z listing feature
  • Manufacturers list can be displayed in rows or columns
  • Alternative uploads manager for files, images, videos etc.
  • Various widgets and image hover effects available

And much more...


* Support is free for 'minor' issues, but for more complex requests, we may need to charge a fee.


Included Addons


Addon Description
Advanced Page Meta Update title tags and meta descriptions in bulk in admin.
Advanced Testimonials Enables your customers to easily post and view testimonials.
Auto Upselling Products Add upselling products in bulk, from a category or a manufacturer.
Easy Custom Contact Forms Generate custom forms with ease, with automated email sending. No PHP skills required.
Featured & Hidden Categories Displays selected categories on the homepage or anywhere else. You can also hide categories from the category menus.
Glossary Displays popovers on keywords/phrases of your choice.
Mobile Detect Informs you which kind of device your customers ordered with.
Password Protected Static Pages Simple password protection for static pages of your choice.
Product Additional Data Adds up to 5 downloads and 10 product FAQs per product.
Wordpress Blog Integration Seamlessly integrates Wordpress into the store.

Modules / Features Support


Ultra is compatible with X-Cart Gold, Gold Plus and Platinum. Below are currently supported modules / features (not a comprehensive list). Contact us with any questions.

Module Supported Notes
One Page Checkout -
Fastlane Checkout -
New Arrivals Requires X-Cart Gold Plus or 'Hot Products' Module
On Sale Requires X-Cart Gold Plus or 'Hot Products' Module
Previously Ordered Products Requires X-Cart Gold Plus or 'Hot Products' Module
Banner System Requires X-Cart Gold Plus or Separate Module
Multiple Currencies Requires X-Cart Gold Plus or Separate Module
Advanced Customer Reviews Requires X-Cart Gold Plus or Separate Module
Email Account Activation Requires X-Cart Gold Plus or Separate Module
Product Notifications Requires X-Cart Gold Plus or Separate Module
Special Offers -
Add To Cart Popup -
Egoods -
Surveys -
Login with PayPal Requires Separate Module
Abandoned Cart Reminder Requires Separate Module
Product Configurator Requires X-Cart Platinum or Separate Module
Feature Comparison Requires X-Cart Platinum or Separate Module
Hot Products New Arrivals, On Sale, Quick Re-Order.
Refine Filters Can slow the store down, but generally works fine.
Pop-up Anywhere Popups are generally a bad idea.
Mailchimp With new AJAX submit.
Cloudsearch Subscription based. Or you can use the included dynamic search.
Exit Offers Kind of works, mileage may vary.
Social Login / XAuth AKA Janrain. Not worth using, but it can be enabled.
POS System Contact us if you need it.
PDF Invoices Contact us if you need it.
fCommerce Go Contact us if you need it.
Testimonials But there is a free addon included, saving you $99.
Wordpress In X-Cart But there is a free addon included, saving you $249.
Cloud Zoom Replaced with a zoomable, mobile friendly, responsive lightbox.
Infinite Scroll Not recommended, bad for SEO and UX.
Socialize Uses own lazy loaded social sharing widget. Disqus commenting also available.
Magnifier Flash based, so not worth using, but contact us if you really need it.

Your module missing? Contact us and we may be able to integrate it...

Changelog

REQUEST A FEATURE DOWNLOAD

8th June 2017 v1.2.0 X-Cart v4.7.7


  • Updated for X-Cart v4.7.8 - INFO
  • Dynamic product search query updated to not display products with set membership level prices
  • HTML & Inline JS Minifier added
  • Blog addon tested with Wordpress v4.8
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

27th January 2017 v1.1.0 X-Cart v4.7.7


  • Updated for X-Cart v4.7.7
  • Blog addon tested with Wordpress v4.7.x
  • 'Video Playlist' widget updated
  • New 'breakout' CSS class for full width content outside of main container
  • Updated skin/ultra/admin/altskin_product_data.tpl to fix Chrome admin table spacing issue
  • Updated skin/ultra/css/tabs.css to fix Firefox v52 tabs display issue
  • Updated altskin_get_featured_categories.php and altskin_get_manufacturers.php with new 'sort' options
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

25th December 2016 v1.0.5 X-Cart v4.7.6


  • More performant and versatile responsive tab system, with deep linking and persistence
  • Account page menu tabs (top_links.tpl) updated
  • Printable pages improved
  • New 'disable_lazy_load' setting to disable lazy loading (mainly for testing)
  • Meta viewport setting adjusted to be HTML5 compliant
  • Drilldown sidebar category menu improved
  • New 'fly_to_cart' setting for when adding to cart
  • New 'dynamic_search_prices' setting to display prices or not
  • New 'flip cards' widget added
  • New auto-populating 'image gallery' widget added
  • New 'sidebar social' widget added
  • Grids demo page added
  • Alternative logo in 'sticky' header is now possible
  • Lightbox updated, now supports social sharing
  • Open Graph / Structured data improvements
  • FontAwesome updated to v4.7.0
  • Blog addon tested with Wordpress v4.7.1
  • Smarty code can now be added to the blog sidebar
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

23rd November 2016 v1.0.4 X-Cart v4.7.6


  • Install docs + altskin_common.php adjusted to eliminate any unnecessary SQL errors
  • Quick View modal product title issue fixed
  • HTML minifier removed (makes hardly any difference with regards to speed)
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

27th October 2016 v1.0.3 X-Cart v4.7.6


  • New 'header_lower_cats' setting for # of header menu parent categories
  • New 'single_product_redirect' setting to redirect to the product page, if only 1 product in category / search result
  • New 'email_header_logo' and 'admin_header_logo' settings added
  • New 'descriptions_on_thumb_hover' setting to display short description snippet on thumbnail hover
  • New header customer account quick access dropdown menu for when logged in
  • 'Smart Grid' and 'Masonry Grid' widgets added
  • 'Animated elements on scroll' feature added
  • New 'Easy Custom Contact Forms' addon included
  • New 'Product Additional Data' addon included for product downloads and FAQ
  • Product 'Quick View' improved to display product detailed images gallery
  • Products 'live' sort and 'standard' sort now combined
  • Google maps added to customer address book (not in popup dialog box)
  • Banner system module tweaked to prevent sliding if only 1 banner in the location
  • Various tweaks to the Blog addon, title tags, author names added, footer block fix
  • New glossary addon options, caseSensitive and exactMatch
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

4th October 2016 v1.0.2 X-Cart v4.7.6


  • Now supports PHP v7.0.x
  • Open Graph data added
  • Categories can now be hidden from the category menus
  • FAQ page is now multi-language capable
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

30th September 2016 v1.0.1 X-Cart v4.7.6


  • Structured data improvements
  • Multi-colour layouts are now possible
  • Product configurator module support
  • Minor tweaks and improvements
  • Uses Bootstrap v4 Alpha 4

20th September 2016 - v1.0.0 X-Cart v4.7.6

  • Initial release
  • Uses Bootstrap v4 Alpha 4

Notes

ASK A QUESTION

Changing general styles


See skin/ultra/css/altskin.css


Changing specific Bootstrap styles, eg. button colors etc.


You should add code to skin/ultra/css/bootstrap.overrides.css. You should avoid modifying skin/ultra/css/bootstrap.min.css


Modifying the template configuration


You can edit from the admin 'Template' dropdown > configuration, or directly in an FTP client, skin/ultra/altskin.conf


Setting full width / boxed and page layouts


See skin/ultra/altskin.conf


Modifying the homepage contents


Elements can be enabled / disabled in altskin.conf, or to customise further / rearrange, edit skin/ultra/customer/main/welcome.tpl


Editing the homepage welcome message


There's a link in the admin 'Template' dropdown menu, or look in languages for txt_welcome


Editing the homepage promotions boxes


Change the images, titles and text in skin/ultra/custom/widgets/widget_promotions.tpl

Images should be uploaded to skin/ultra/images/custom/


Editing or disabling the header ticker


See skin/ultra/altskin.conf


Editing the subcategory page


See skin/ultra/customer/main/subcategories.tpl. Note, there is no skin/ultra/customer/main/subcategories_t.tpl


Editing the product listing template


See skin/ultra/customer/main/products_t.tpl

Standard product cards and carousel-based product cards share this template.


Editing the product details templates


See skin/ultra/customer/main/product.tpl and skin/ultra/customer/main/product_details.tpl

Product 'Quick View' uses skin/ultra/customer/main/product_quickview.tpl and skin/ultra/customer/main/product_details.tpl


Redirect to product page if only one product exists in category or search result


In skin/ultra/altskin.conf change the setting single_product_redirect = false to single_product_redirect = true

The relevant code is at the top of skin/ultra/customer/main/search_result.tpl and skin/ultra/customer/main/subcategories.tpl


Modifying the sidebar


See skin/ultra/altskin.conf, or modify directly in skin/ultra/customer/sidebar.tpl


Editing the colour themes


CSS files reside in skin/ultra/css/themes

If using a multi-colour layout, you must edit skin/ultra/css/themes/ALL.css


Adding product videos


You can have up to 5 product videos per product; YouTube, Vimeo or local MP4/WEBM files. DEMO.

Add product 'extra' fields, named Video_1, Video_2, Video_3 etc.

Then in your product modify pages, use video URLs like this...

//youtube.com/embed/VIDEOID
//player.vimeo.com/video/VIDEOID
/uploads/videos/filename.mp4 (also upload filename.webm and a poster image, filename.jpg)

The ideal size for poster images is W1280 x H720 pixels.

If you need more than 5 videos per product, get in touch and we'll show you how.

By default, you only get 10 extra fields. If you need more, see Modules > Extra Fields.


Changing the default favicons


Icons reside in skin/ultra/ico

After updating, change the altskin.conf setting favicon_version to any other value.

We used this tool to generate the default icons.


Adding new language labels


Apply an SQL patch like the following and then run the X-Cart cleanup in Tools > Maintenance

REPLACE INTO xcart_languages SET code='en', name='lbl_my_new_label', value='Lorem Ipsum', topic='Labels';

Then include in your templates with {$lng.lbl_my_new_label}


Changing the default 'shop closed' page


Edit shop_closed.html, or replace the entire code with your own.


Changing the default '404 error' page


Edit skin/ultra/404/404_en.html, or replace the entire code with your own.


Using the Bootstrap grid system


See here for details. There's also some useful grid layouts available here and here.


Editing the footer blocks


They all reside in skin/ultra/custom/footer/blocks


Changing the footer payment icons


See skin/ultra/altskin.conf, or edit skin/ultra/custom/widgets/widget_payment_icons.tpl

Note, they are FontAwesome icons.


Fontawesome Icons


All can be viewed here.


Spacing content


You can use {include file="spacer.tpl" height="30"} between your code, as a more precise alternative to using <br> tags.


Disabling newsletter subscribe notifications


See altskin_newsletter_subscribe.php

$email_to_admin = true;
$email_to_customer = true;


Reward people for subscribing to the newsletter


Edit language label lbl_rns_email_reward, eg. 'Use coupon XXXXX for 5% off'

$email_to_customer must be set to true in altskin_newsletter_subscribe.php


Modifying open graph data & structured data code


skin/ultra/custom/open_graph_data.tpl
skin/ultra/custom/structured_data_company.tpl
skin/ultra/custom/structured_data_product.tpl

Use the testing tool to check for any errors.


Adjusting the search box dynamic search results


See skin/ultra/js/custom/vendor/jquery.dynamic.search.min.js

var ac_search_after_x_chars = 2;
var ac_max_result_display = 15;


Adjusting the header menu & product sort transition speed


In skin/ultra/js/custom/misc.js see var ITD = '0.35s';


Commenting out code


Wrap Smarty comments around the code {* ... *}    Don't use HTML comments <!-- ... -->


Recommendations


  • Enable 'Clean URLs' and optimise your title tags and meta descriptions (essential)
  • Enable GZIP compression by adding the provided .htaccess code
  • Use PHP 7 if you can, which gives a significant increase in speed
  • Optimise your images, use compressed JPEG's for product images
  • Disable any unnecessary modules, both admin and customer-side
  • Go easy on third party content, such as social media widgets... they add extra overhead and will slow your store down
  • For security and peace of mind for your customers, enable HTTPS at all times
  • Lock down your X-Cart admin and Wordpress blog if you use the addon
  • Always use complex, impossible to crack passwords!
  • Once your store is live, enable the JS/CSS Speedup tools and other optimization settings in General Settings
  • Test with GTMetrix, Pingdom, Google PageSpeed Insights etc. to check for any possible bottlenecks
  • Don't forget to submit Google and Bing/Yahoo sitemaps

FAQ

ASK A QUESTION

Is this template encoded, or does it require an Ioncube loader?


No, it's entirely open source.


Can I use it on multiple stores?


You can, but as per the template terms & conditions, you must purchase one licence per store.


Is there a trial available?


Due to the template being fully open source, no, sorry.


What are the main differences between Ultra & reBOOT?


  • Ultra uses Bootstrap 4, reBOOT uses Bootstrap 3
  • Ultra template settings are in a single .conf file, reBOOT has a dedicated admin page for settings
  • Adding new template settings in Ultra is simpler
  • Ultra is more lightweight, faster, modern and mobile/SEO friendly
  • Ultra uses JSON-LD format structured data
  • Ultra is more aimed at confident developers

Bootstrap 4 is still in Alpha. Is this going to pose any problems in the future?


We've been working with v4 for some time now and any future Bootstrap upgrades to the template should be no cause for concern.

If you'd like to follow Bootstrap 4 developments, check the docs, Github and join the Slack Channel.


Can I recompile the Bootstrap CSS to my own requirements?


Sure, using the Bootstrap source files. Koala is a useful GUI tool for PC, MAC and Linux.

By default, Ultra uses the minified CSS file, bootstrap.min.css and we override some styles with skin/ultra/css/bootstrap.overrides.css


Do you provide .diff files for updates?


At the moment, no. We recommend using a file comparison / diff tool.

We try to avoid regular updates, unless certain issues or bugs arise. Releases usually settle down after 2-3 months from initial release.

If you have not made significant changes, you can simply upload the updated files.


Is this template available for X-Cart v5.x?


Ultra is available for X-Cart Classic v4.7.x only. v5.x has an entirely different code and template architecture. We have no plans to convert to X-Cart 5.x at this time.

X-Cart v4.x Classic is still a very capable platform to base a store on, is easy to modify and will be supported for many years to come.


Which browsers are supported?


Ultra is built for browsers that support modern web technologies and standards, so later versions of Chrome, Firefox, Opera, Safari, Android and IE/Edge.


Why use a .conf file for template settings?


It's so that you can change settings and add your own settings easily, without having to patch the database.

It also makes the template more portable. See here for more info.


What size header logo should I use?


The growing trend is for smaller logos. Look at Amazon, Ebay, Alibaba etc. We recommend a W200px x H80px, transparent PNG.

Set your light and dark logos in skin/ultra/altskin.conf and upload them to skin/ultra/images/logo


How do I change the email header logo?

Upload a new skin/ultra/images/logo/email-header-logo.png image.


How do I change the admin header logo?

Upload a new skin/ultra/images/logo/admin-header-logo.png image.


What size product images should I use?


That's entirely up to you, but it's a good idea to standardize the sizes of your thumbnails, product, variant and detailed images.

If you don't have time to standardize, product listings will cascade, plus all images will be responsive, so it's not a major issue.

In any case, we recommend you use optimized, progressive JPEG images, as they are generally a smaller file size.


How do I modify the homepage content?

Modify the homepage settings in skin/ultra/altskin.conf, or directly edit skin/ultra/customer/main/welcome.tpl


Can sliders / carousels be made to autoplay?


Yes, edit skin/ultra/js/custom/swipers.js

Where appropriate, replace autoplay: false, with eg. autoplay: 5000, (5 second delay).

You can also set the transtition speed by modifying speed: 250,


Can I make the featured categories non-random?


Yes, see the settings at the top of altskin_get_featured_categories.php


Can I make the manufacturers carousel non-random?


Yes, see the settings at the top of altskin_get_manufacturers.php


Which fonts can I use?


For body font stacks, see here. For headings, you can use any from Google Fonts.


How to make a centered, responsive image?


Add class="img-fluid m-x-auto d-block" to your image.


How to make a zoomable image?


Example code...

<img src="{$ImagesDir}/spacer.gif" data-src="//source.unsplash.com/category/nature/800x800" data-action="zoom" alt="Alt" title="Title" width="100" height="100">

Result:

Alt


What's the Bootstrap button CSS?


Eg. for btn-success

.btn-success { color: #fff; background-color: #5cb85c; border-color: #5cb85c; }
.btn-success:hover { color: #fff; background-color: #449d44; border-color: #419641; }
.btn-success:focus, .btn-success.focus { color: #fff; background-color: #449d44; border-color: #419641; }
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { color: #fff; background-color: #449d44; border-color: #419641; background-image: none; }
.btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, .open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus { color: #fff; background-color: #398439; border-color: #2d672d; }
.btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus { background-color: #5cb85c; border-color: #5cb85c; }
.btn-success.disabled:hover, .btn-success:disabled:hover { background-color: #5cb85c; border-color: #5cb85c; }

When modifying, you should add code to skin/ultra/css/bootstrap.overrides.css as opposed to modifying the Bootstrap core file.

For Bootstrap customisation, you should consult the Bootstrap docs.


How can I add a 'view all' option to the products 'per page' dropdown?


In include/search.php uncomment this line...

//$perPageValues[9999] = '9999'; // View All (optional)


Why do the blog pages look broken or unstyled?


Ensure /blog/.htaccess is BLANK and permissions on it are set to 444. Read the blog addon install.txt file.


How to hide content on small devices?


Add class="hidden-md-down" or class="hidden-sm-down" or class="hidden-xs-down" to your elements.


How to hide content until a customer is logged in?


Wrap {if $login} ... {/if} around your content.


Why has my store suddenly gone blank?


You might have made a typo or put invalid code in one or more Smarty templates.

Template files might be missing, so ensure that you have uploaded all the necessary files.

In the first instance, check the latest PHP logs in /var/log which should help you track down the issue.

You can also audit your Smarty templates by running Tools > Maintenance > "Check the syntax of all templates"


Why won't my new glossary entries save?


Ensure skin/ultra/custom/glossary/glossary.json is writable.


Do rich snippets appear in Google straight away?


No, whether they appear or not is at the discretion of Google. It may take weeks or months before they appear in part / fully populate.

Check your pages using the Structured Data Testing Tool.


How can I redirect home.php to / ?


In home.php after...

require __DIR__.'/auth.php';

Insert...

// Redirect home.php to /
if ($_SERVER['REQUEST_URI'] == "/home.php") {
    header ('HTTP/1.1 301 Moved Permanently');
    header ('Location: //'.$xcart_http_host.'/');
}

Or, if your store is in sub folder...

// Redirect home.php to /
if ($_SERVER['REQUEST_URI'] == "/SUBFOLDER/home.php") {
    header ('HTTP/1.1 301 Moved Permanently');
    header ('Location: //'.$xcart_http_host.'/SUBFOLDER');
}


Do I have to use spacer.gif with lazy loaded images?


No, src="{$ImagesDir}/spacer.gif" can be removed if you wish.

But, to remain HTML5 valid, the image 'src' attribute is required.


Why are my header menu category icons not displaying?


Go to Admin > Modules > Flyout Menus and set 'Show icons for categories' to 'down to level 9'

Discussion



© 2001-2017 xcartmods.co.uk. X-Cart and the X-Cart logo is a registered trademark of Qualiteam Software.