The article describes step-by-step installation instructions, features and some tips and tricks of Zen Cart with all our mobile templates.
After hard work on the Mobile Zen Cart Template we are glad to announce its release.
Definitions:
Mobile Template – a secondary template which is installed alongside with your current desktop theme and is ONLY displayed on mobile/devices browsers (separate second template folder in Zen Cart).
Responsive – a single template that RESPONDS to the device browser by displaying the content in an appropriate manner which “fits” the device browser size with using only CSS styles.
Main features of our mobile templates:
- User friendly usability
- iOS, Android, BlackBerry, Windows based devices compatible
- 5 color variations in one package: Black, Blue, Green, Red, Pink
- Responsive slideshow banner (touch screen adapted)
- Language/Currency dropdown boxes
- Categories and shoppincg cart dropdown windows
- Multilingual mobile skin
- CSS buttons (Smooth buttons appearance on each device screen, including iPhone retina display)
- Touch screen adapted
- Automatic mobile users detection
- Automatic template re-size on mobile device rotation
- Separate CSS styles and template files for mobile appearance
- Admin managed home page banners (the template uses all your banners and admin settings of your full version template)
- Icons adapted to retina display for the top menu
- Flexibility
- No back link required
- No affection to core functionality
- No affection and changes of default database scheme
- Easy to change design and layout
- Easy to install
The mobile template does not require a separate installation of Zen Cart. It should be installed alongside your regular desktop theme and does not touch your current template. The mobile template uses all the admin settings of your current store.
There is no duplicate content after you install our mobile theme. Only look and feel changes when you visit the site via mobile device, so all the settings, products and other content are exactly the same as you have for your regular desktop theme. It works as just you change your theme via admin area, but it automatically changes for mobile devices.
Installation Instructions
- Backup all your store files.
- Unpack the template package to your local computer.
- Rename all the folders of the mobile template color variation you are going to use for your store to the “YOUR_ACTIVE_TEMPLATE_NAME_mobile” folder names. For example, if you are using Robbo Blue template and the folders of the theme are named “robbo_blue”, and you want to use blue mobile version of your store, you should rename all the “classic_blue_mobile” folders of the mobile template package to “robbo_blue_mobile” (DO NOT FORGET TO LEAVE “_mobile” AT THE END OF RENAMING FOLDERS).
- Upload all the files and renamed folders to the root directory of your Zen Cart installation (for example: www.yourdomain.com/your_zencart_store/).
That’s all! Now your store will have a special appearance for mobile users. Keep in mind, you should not activate the mobile template in your admin area. Your regular full site template should be activated.
After the mobile Zen Cart template is installed correctly, you need the following. When your users click to the “Desktop Site” link at the bottom of the mobile template, they will be redirected to a full version of your store. In order to allow your users to switch the mobile version again you need to place the following link to any place of your full site template:
<?php if($detect->isMobile()) { ?><a href="trigger.php?r_link=<?php echo urlencode($_SERVER['REQUEST_URI']); ?>"><strong>Mobile Version</strong></a><?php }; ?>For example, it can be placed to the bottom “\includes\templates\template_default\common\tpl_footer.php” file of your Zen Cart. Note, the link appears on your full version of the site only when you visit the store via mobile device.
To replace the links of the icons that lead to your social media pages (Twitter, Facebook) you should edit the “\includes\templates\classic_[COLOR]_mobile\common\tpl_footer.php” file. The 39th and 40th code lines.
How To Avoid Mobile Appearance on Tablets
If you want to have the mobile theme appearance only on mobile devices, not tablets, just replace the following code line
if (($detect->isMobile()) and ($_COOKIE['MobCookie'] != "full"))with the following:
if (($detect->isMobile()) and ($_COOKIE['MobCookie'] != "full") and (!($detect->isTablet())))of the “includes\init_includes\overrides\init_templates.php” file of your Zen Cart. The code line is about 49.
Admin Managed Banners
The mobile template uses all your banners and admin settings of your full version of the store template. If you need to place any special home page banner for viewing it only on the mobile template version, you should place any images or HTML code to the “includes\languages\english\html_includes\classic_[COLOR]_mobile\define_main_page.php” file.
Other Features
A responsive slideshow banner is located on the home page of the template. The slideshow allows you to switch the images via finger on a touch screen. The shopping cart and category dropdown boxes were developed either to make the navigation of the mobile theme as easy as it can be. Black, red, blue, green and pink color variations are included to the template.
A bottom section of the template consists of a menu with EZ-Pages links. So, all the links you have created via EZ-Pages section of your store will be displayed inside the bottom menu. Stay tuned with us.
Working with Zen Cart Add-ons
Zen Cart add-ons that contain the same files as our template package may affect the template functionality. So, if the add-on you have now use the same template files as our template package, you need to merge that files manually and the theme and your add-ons will work absolutely correctly. All the add-ons that are related to Google, payment methods, checkout (and so on) will work correctly with all our themes right after the installation. You can test any add-on on our free themes before purchasing premium one.
If you have the COWOA, Fast and Easy Checkout modules on your site, you need to copy some files to your renamed mobile folders to get these modules worked on your mobile theme. The reason of this is that you installed these modules only for your desktop theme and mobile theme does not have necessary files to work properly with these modules. Just send us a message and get a quote if you want us to make this work.
By the way, it is the main difference between just this mobile theme and our responsive themes. You do not need to re-install any modules for the responsive themes to get it worked on mobile devices as they use only CSS styles (not new template files) to look different on mobile and tablet devices.
