KMTheme

VELO - Responsive Magento Theme for Bike Shops

Current Package Version is 1.0
Created for Magento Community Edition v1.7.x.x - 1.9.x.x



User Guide

Our Package



Quick Start

If you want to test the theme and check how the live demo was configured, you can install demo containing all the sample data and settings from our live demo. To install demo store with all the sample data (similar to live demo of Velo), follow the instruction in Demo Store's Installation

Installation



Demo store's installation

In this theme package we included sample data with settings of demo version. Follow the instructions below in order to install exactly the same store as on demo version:

  1. Before magento installation create empty database using phpMyAdmin or similar tools
  2. Import Sources/demo/dump.sql.gz into database that was created in previous step
  3. Install magento:
    1. Go to magento download page choose the latest stable full release of the Magento Community Edition and download it
    2. Upload and unzip downloaded file with magento to the folder on your server where magento should be installed
    3. Open browser and proceed to the folder where magento was unzipped and load default Magento setup wizard
    4. Follow the wizard's instructions and finish magento installation
  4. When the demo store with demo sample data is installed follow successively the steps that were described in sections: "Prepare your magento", "Upload the theme files", "Install the theme"

Prepare your magento

  • Refresh and Disable all the Magento cache

    • When configuring your store, whatever theme or anything else you should refresh all the Magento cache and then completely disable it. To get it done go to System -> Cache Management

  • Reindex magento data

    After making any changes to magento data (products, categories) you should reindex the data. To get it done go to System -> Index Management

  • Backup Magento files and the store database

    • It saves lot's of your time if something goes wrong. To create backup go to System -> Tools -> Backups

  • Disable compilation mode

    • To get it done go to System -> Tools -> Compilation

  • Disable Merge JavaScript and CSS Files

    • To get it done go to System -> Configuration -> Developer

  • Log out from Magento admin panel

    • It must be done to refresh the magento access control system

Theme files uploading



  • Unzip theme folders (app, skin and js) from Theme_vX.X.zip file which you will find in downloaded theme package

  • Connect to your server using favourite File manager (i.e. Filezilla or WinSCP)

  • Upload unzipped theme folders (app, skin, and js) to the root of your magento.

  • After theme files uploaded you might also want to upload images from theme preview. Since template images are not included in theme due to licensing restrictions, we included just sample images (blurred version of original images) so you can get almost the same view of your store as demo store. Upload media folder which you will find in downloaded theme package to the root of your magento

  • Set correct file permissions for uploaded folders. File permissions depend on server settings. If you have any doubts about file permissions, please sent request to your hosting provider. More info about file permissions you can find here Magento WIKI: Filesystem permission

  • Login into your Cpanel account using your Cpanel user access data

  • Upload Theme_vX.X.zip file to the root of your magento

  • Extract files using Cpanel options:

  • After theme files uploaded you might also want to upload images from theme preview. Since template images are not included in theme due to licensing restrictions, we included just sample images (blurred version of original images) so you can get almost the same view of your store as demo store. Upload media folder which you will find in downloaded theme package to the root of your magento

  • Set correct file permissions for uploaded folders. File permissions depend on server settings. If you have any doubts about file permissions, please sent request to your hosting provider. More info about file permissions you can find here Magento WIKI: Filesystem permission

Install the theme


Manual installation is the only right way of theme's installation if you prefer to install theme on live store

  1. Go to System -> Configuration -> Design page of your admin panel and set the field "Current Package Name" as Velo. Click Save Config button

  2. Import static blocks, pages and widgets

If you want to use one of available Velo demos, navigate to section Homepages of current theme documentation where we add step-by-step instructions of subthemes configuration.

Import CMS



The Velo has some predefined static content, widgets which must be created manually

Adding of CMS Pages


All used pages you can find under Sources/Static Content/Pages, where <FILE NAME> - id of page, <FILE CONTENT> - content of page. Your pages may have any title, and any url key. To set up CMS pages, you follow the instruction below.

How to create a page

To create a page with same content as on demo you need to go to CMS -> Pages and open the active page you want

Go to the "Design" tab and set "1 Column" layout.

Go to the downloaded package Our fullpackage/static content/pages/home.txt and put content from that file into "Content" section in the admin panel.
Make your cms page as home page under the System -> Configuration -> Web -> Default page

To import Widget, you also can navigate KtmCore >>> KtmVelo >>> Ktm Settings >>> Theme Installation, click to button to create CMS pages provided with this theme


Adding of Static Blocks


All used static blocks you can find under Sources/Static Content/Blocks, where <FILE NAME> - id of static block, <FILE CONTENT> - content of static block. Your static blocks may have any title. Id of static also may be changed, but in that case you will need to specify what static block should be used in theme options. Below is the part of default theme and responsible for that part of static blocks:

To manage static blocks, go to CMS >>> Static Blocks section in the admin panel. To create a static blocks, go to CMS >>> Static Blocks, click Add New Block button and follow these steps:

  1. In identifier field enter an identifier of one of the static blocks. Make sure the identifier is lower-case and seperated by underscores to follow Magento's standards
  2. Enter the title in Block Titke
  3. Select the Store View to which this block will apply
  4. Select Enabled in the Status field. Disabled means that the block is not displayed in the frontend.
  5. Insert your Content(it can be text or HTML) and click Save Block.

Here's an example:


To import Static Blocks, you navigate KtmCore >>> KtmVelo >>> Ktm Settings >>> Theme Installation, click to button to create all static blocks provided with this theme


  • Velo_menu - is used for the image in menu:


  • Velo_popup_content - used for the welcome popup with subscribe form:


  • Velo_footer - is used for the store footer:


  • Velo_contact_map_block - that is block which shows detailed information about store location and it is displayed over contact map on contact us page:


  • Velo_sidebar_banner - is used for the image in sidebar:


Adding of Widgets


To manage Widgets, go to CMS >>> Widgets section in the admin panel.


To import Widget, you navigate KtmCore >>> KtmVelo >>> Ktm Settings >>> Theme Installation, click to button to create Widget provided with this theme


For more details on import widgets please see CMS Widgets section

Known problems with installation

If you get any problems with theme's installation first of all make sure that you have followed all steps indicated in "Prepare your magento" section.

It's pretty common issue. Just clear all the magento cache then logout from the admin panel and login again
Solution 1. Make sure you have uploaded the theme files in the correct way. Note that folders structure of uploaded files must match to the structure of files in downloaded package.
Solution 2. Check if you have set correct file permissions. File permissions depend on server settings. If you have any doubts about file permissions, please sent request to your hosting provider. More info about file permissions you can find here Magento WIKI: Filesystem permission

Solution: The only one reason why that's happened is importing of dump file after magento installation. Reinstall magento, but import dump file into your database before magento installation
Solution: Since theme optimized for using that extension in order you can get the most recent blog module version, you should also install blog extension and after that add several posts. More detailed about Blog and latest posts widget you will read in theme documentation in section Blog extension

Homepage Selection

Theme Options



After template installation, you will see free-standing Admin Panel by navigating to KTMCore >> KTM Velo:



Whenever you select Ktm Settings or Ktm Design, this module will appear. It manages Velo theme settings and designs, which allows you to create as many variations of Velo theme for any store, cms page or product page with unique design as you wish:


Theme Settings

Location

This chapter refers to the following section of the theme admin panel: KtmCore > Ktm Velo > Theme Settings.

Header

In this tab, you can configure the options related to the header section.

  • Upload default logo: Choose a logo image with .png, .ipg, .gif image types.
  • Upload retina logo: Choose a retina image with .png, .jpg, .gif image types.
  • Logo Image Alt: Enter the alt attribute for your logo image.
  • Enable Sticky Header: You can enable/disable sticky header by selecting the tabs.
  • Sticky logo: If you choose to enable the sticky header, upload your logo (retina)image with .png, .jpg, .gif image types.
  • Hide cart on Mobile Devices: You can choose Yes/No to show/hide the cart on mobile devices. Empty cart can be hidden on mobile devices (if browser viewport is narrower than 480 pixels).
  • Block "Compare" in Header: enable/disable "Compare" drop-down block in the header. If set to No, the block will be displayed on its default position in Magento: in the left sidebar.

Ultra Menu

In this tab, you can configure the options related to the ultra menu section.

Category View

In this tab, you can configure the options related to the category view. Category view presents the list of products from the selected category.

  • Keep Image Aspect Ratio: Set Yes, to keep the aspect ratio of the product images intact. Height of the images will be calculated automatically based on width. This option also affects product listings: Featured Products Slider block and New Products block.
  • Alternative Image: Enable/ Disable to show alternative image on mouse hover over the main.
  • Image Width: Set width image in page products list.
  • Image Height: Set height image in page products list.

Product Page

In this tab, you can configure the options related to product page.

  • Enable Elevate Zoom: Yes or No to enable elevate zoom in product detail page.
  • Zoom Type: Possible Values: Lens - You can use the lens zoom setting to Magnify the image, Inner - The zoom can be placed inside of the image.

Product Label

In this tab, you can configure the options related to product labels.

  • Show 'new' label: You can choose New to enable 'new' label display, or choose No to hide it.
  • Show 'sale' label: You can choose Sale to enable 'sale' label display, or choose No to hide it.

Default Magento Block

In this section you can disable/enable the default Magento blocks.

Theme Installation

In this installation section, you can import static blocks, import pages and import widgets. For more information, navigate to Import CMS.

Customization Settings

In this section you can disable/enable this option to load "custom.css" file in which you can override the default styling of the theme. To create "custom.css" you can use the file "SAMPLE.custom.css" which is located in skin/frontend/ktmvelo/default/css directory.

Theme Design

Location

This chapter refers to the following section of the theme admin panel: KtmCore > Ktm Velo > Ktm Design.


Velo is equipped with administrative module which gives you the ability to configure the visual appearance of your store. You can change the colors of many elements by using color pickers or by specifying the color code manually. You can also apply textures patterns for the main sections of the page. Names of the most of the options are pretty self-explanatory.

General

The layout style will be applied throughout the entire site. When you have the boxed version activated, you can choose to have the background be a custom image, a background slider, a pattern or a solid color. Keep in mind that container will stay without changes. To change the width of container please use option Container width same in this admin option section

Font

In this tab, you can configure the options related to fonts.

Page

In this tab, you can configure the options related to pages like background color, background images, background position, etc. Below is the detailed information:

Header

In this section, you can configure all the options related to header.

Ultra Menu

In this section, you can configure all the options related to header.

Main Section

In this tab, you can configure the main section of the page (the section located between the header and the footer).

Product Page

In this section, you can configure the options related to add-to cart button and tabs in product pages.

Footer

In this tab, you can configure the entire footer of the page. Settings from this tab are inherited by all the other sub-sections of the footer. Some of the settings can be overridden in sub-sections. You can change the setting of footer general, footer top, footer bottom and copyright.

Extensions



KTM Ajax Cart



  • Ajax cart: is a usability improvement for online stores. With Ajax shopping cart, customers rapidly add products to cart with no useless page reloads and without interrupting the shooping process. All neccessary product information are provided right on that page by Ajax cart extensions; therefore your customers just need to choose out their favorite products and click to add or remove easily on displaying page.

  • Ajax compare: Magento has a great feature which allows customers to compare products side by side when they browser your store.

  • Ajax wishlist: Allow customers to save shopping carts and create lists of frequent purchases in an simple way. Help your customers to plan their shopping to ensure more deals.

To enable ajax cart, ajax compare, ajax wishlist you only select Yes and click to Save Config.

KTM Newsletter



One of the most effective ways of increasing sign up rates to your email newsletter is to display a pop up message to visitors. Velo popup shows a clean design popup where you can insert images, messages and a newsletter form. After theme installation you need to create a static block which will be shown as popup and choose it in module options.

  • Text color: Let's fill in your color code
  • Newsletter image: Upload your image from your computer
  • Title newsletter: The name of newsletter
  • Description newsletter: Short information about newsletter which you want to send to your customers.

KTM Filter

This simple extension makes store navigation more flexible and more user-friendly by enabling store customer to apply multiple values of the same filter criteria.



Blogs

  1. To add a new blog, you navigate Blog >>> Add Post, after that you fill information in fields.
  2. To add a new category, you navigate Blog >>> Categories
  3. If you want to set up blog, you navigate Blog >>> Settings

CMS Widgets



Our Velo Theme is equipped with a few widgets on 03 homepages which allow you to display products and some other content on your CMS page and static blocks. To put one of our widgets into your page or static block you need to click on button "Insert widget" on the top of content editor or follow our simple step at section Adding a Widget.


The image below shows our available widgets on each homepage. Plugins in shop pages will be accompanied by its homepage:




Homepage 1 Widgets


Main Slide

In this section of main slide widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable needs.

Block Top

In this section of block top widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Popular Products

In this section of popular products widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Blogs

In this section of blog widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Free Shipping

In this section of free shipping widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Block Footer Top

In this section of block footer top widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Block Sidebar

In this section of block footer top widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Homepage 2 Widgets


Main Slide

In this tab, you can configure the options related to front-end settings and layout updates about this slider widget. Basically, it is similar to the main slide widget of Homepage 01. For more details, go to Home 01 Widgets

Free Shipping

In this tab, you can configure the options related to front-end settings and layout updates about this free shipping widget. Basically, it is similar to the free shipping widget of Homepage 01. For more details, go to Home 01 Widgets

Featured Products

In this section of featured products widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Block Countdown

In this section of block countdown widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

New Products

In this section of new products widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Block Newsletter

In this section of block footer top widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Blog

In this tab, you can configure the options related to front-end settings and layout updates about this blog widget. Basically, it is similar to the blog widget of Homepage 01. For more details, go to Home 01 Widgets

Block Footer Top

In this tab, you can configure the options related to front-end settings and layout updates about this footer top widget. Basically, it is similar to the block footer top widget of Homepage 01. For more details, go to Home 01 Widgets

Block Sidebar

In this tab, you can configure the options related to front-end settings and layout updates about this block sidebar widget. Basically, it is similar to the blog sidebar widget of Homepage 01. For more details, go to Home 01 Widgets

Block Bottom

In this section of block bottom widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Homepage 3 Widgets


Video Background

In this section of video background widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Hot bikes

In this section of hot bikes widget, you can configure all the widget instances related to front-end widget settings and layout updates. Below is the detailed information:

Front-end & Layout Settings

You can change all the settings related to Front-end Properties and layout updates.

Widget Options

This is where you can change all fields to custom the widget settings for suitable demands.

Block Sidebar

In this tab, you can configure the options related to front-end settings and layout updates about this block bottom sidebar widget. Basically, it is similar to the blog bottom widget of Homepage 02. For more details, go to Home 02 Widgets.