User Guide Improved Navigation
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 43
User Guide: Improved Navigation Page 1
Improved Navigation
Magento Extension
User Guide
Copyright © 2011 amasty.com
Support: http://amasty.com/support.html
Table of contents:
Copyright © 2011 amasty.com
Page 2
Support: http://amasty.com/support.html
User Guide: Improved Navigation
1. Creation of attribute filters and navigation configuration …………………………….………………… 3
2. Folding and unfolding of filters ……………………………………………………….………………………….. 5
3. Display mode and creation of tooltips for filters …………………………………………………………… 6
4. SEO. Hiding of filters for certain categories …………………………………………………………………. 7
5. Single or multiple selection. Dependent attributes ……………………………………………………….. 8
6. Editing of filter options ……………………………………………………………………………………………… 9
7. Creation of blocks with featured attribute options ……………………………………………………….. 11
8. Add ‘price’ attribute filters to layered navigation …………………………………………………………. 12
9. Configuring ‘price’ attribute filters ……………………………………………………………………………... 13
10. Creation of numeric attributes, e.g. width, height ………………………………………………………. 16
11. Improved Navigation examples ………………………………………………………………………………… 20
12. Custom Price Ranges ………………………………………………………………………………………………. 21
13. Custom Meta Tags for pages with selected attributes …………………………………………………. 22
14. Custom Meta Tags on front end ……………………………………………………………………………….. 26
15. Extension Settings ………………………………………………………………………………………………….. 28
16. ‘All brands’ page and other alphabetic lists ……………………………………………………………….. 35
17. How to add layered navigation to home page …………………………………………………………….. 37
18. Attribute images on product view pages …………………………………………………………………… 38
19. How to show attribute icons on category pages …………………………………………………………. 39
20. Layered navigation on product pages …………………………………………………………………….... 40
21. Order of filters in layered navigation ………………………………………………………………………… 41
22. Remove filters from layered navigation ……………………………………………………………………. 42
Copyright © 2011 amasty.com
Page 3
Support: http://amasty.com/support.html
Please login to admin cp, browse to
Catalog – Improved Layered Navigation –
Filters. Then click “Load” button – filters
will be loaded for all attributes, that are
included in layered navigation.
1. Creation and configuration of attribute filters
User Guide: Improved Navigation
Click on a filter to
edit its options.
Copyright © 2011 amasty.com
Page 4
Support: http://amasty.com/support.html
There are several options for display of
filter values – labels only, images only,
images and labels, etc.; you can also set
whether to display quantities, sorting, etc.
User Guide: Improved Navigation
If you set ‘Collapsed’ option to
‘Yes’, by default only title of this
attribute will be displayed in the
layered navigation. A customer
will be able to expand the filter
by clicking on the title.
1. Creation and configuration of attribute filters
Copyright © 2011 amasty.com
Page 5
Support: http://amasty.com/support.html
‘Number of unfolded options’ setting lets you
indicate how many filter options to display in
the navigation by default (customers will be
able to unfold all the rest options). You can
use individual number for each filter.
User Guide: Improved Navigation
This is an example of
an unfolded filter.
This is an example
of a folded filter
2. Folding and unfolding of filters
Copyright © 2011 amasty.com
Page 6
Support: http://amasty.com/support.html
To help customers with the
navigation you can add a
tool tip for each filter.
User Guide: Improved Navigation
3. Display mode and creation of tooltips for filters
The tips are displayed only when
customers hover mouse over the tool tip
icon. You can use text, HTML or even
images for tool tips to make them
attractive and integrated with your store.
You can choose whether to
display the filter in left
column or in the top block
of the main column.
Copyright © 2011 amasty.com
Page 7
Support: http://amasty.com/support.html
User Guide: Improved Navigation
If you would like not to
display the attribute and its
options on the page of some
categories, indicate ids of
the categories in this field.
For each filter you can specify individual SEO parameters. These parameters
will take effect for all pages on which the filter values are selected.
Let’s say you go to page http://your_store.com/category.html and select
‘black’ in filter ‘Color’.
Robots and rel nofollow paramaters specified for ‘Color’ filter will be
applied to page http://your_store.com/category/black.html.
4. SEO. Hiding of filters for certain categories
Copyright © 2011 amasty.com
Page 8
Support: http://amasty.com/support.html
User Guide: Improved Navigation
If you set this option to ‘Yes’,
customers will be able to
choose only one value at a
time for this attribute.
5. Single or multiple selection. Dependent attributes.
You can set the filter to be displayed when customers
choose certain options in other filters. For example,
display shirt size filter only when ‘Gucci’ brand is chosen.
Please specify ids of options, which should trigger the
filter, in this field. Leave the field blank if you would like
this filter to be displayed each time when it is applicable.
Each option of each filter has a unique id, you can find the
ids on the list of filter options at the ‘Options’ tab.
Copyright © 2011 amasty.com
Page 9
Support: http://amasty.com/support.html
At the ‘Options’ tab there’s the list of all the
filter options. Click on an option to upload
images for it, make it featured, add title
and description and meta-tag data.
User Guide: Improved Navigation
6. Editing of filter options
Copyright © 2011 amasty.com
Page 10
Support: http://amasty.com/support.html
You can make each option featured
and then display all featured options
of an attribute in a block (next page
describes how to do this).
User Guide: Improved Navigation
The title and description will be displayed
on the option page, which enables you to
place relevant content on your website
pages and optimize it for search engines.
Also you can upload images for
product list page, product view
page and layered navigation.
You can add meta title
and meta description
for each option page.
It is possible to use Magento
CMS blocks for options – just
enter the block identifier in
the ‘CMS Block’ field.
6. Editing of filter options
Copyright © 2011 amasty.com
Page 11
Support: http://amasty.com/support.html
7. Creation of blocks with featured attribute options
User Guide: Improved Navigation
To add a block with featured options of an attribute to a cms page, add the following code to the page:
Use the code of the needed attribute instead of “manufacturer” – the code can be found in “Attribute Code” column at the
Manage Attributes page.
To display a limited number of featured options, ‘limit’ parameter, to show them in random order use ‘random’ parameter
(it should be set to 1):
Here’s an example of a “featured” block with 3 random manufacturer attribute options:
It is possible to place several “featured” blocks on a page.
{{block type="amshopby/featured" attribute_code="manufacturer" template="amshopby/featured.phtml"}}
{block type="amshopby/featured" attribute_code="manufacturer" random="1" limit=“4“ template="amshopby/featured.phtml"}}
Copyright © 2011 amasty.com
Page 12
Support: http://amasty.com/support.html
User Guide: Improved Navigation
8. Add ‘price’ attribute filters to layered navigation
In addition to dropdown and multiple-select attributes, the extension also allows to add ‘price’ attributes to the layered
navigation. For example, you can add special price to the navigation.
For a ‘price’ attribute to be added
to the layered navigation please
go to edit the attribute in admin
panel -> Catalog -> Attributes ->
Manage Attributes and set the
‘Use in Layered Navigation’
setting to ‘Filterable’.
Please set this option to ‘Yes’ if you
would like the ‘price’ attribute also
to be available in layered navigation
on search results page.
Copyright © 2011 amasty.com
Page 13
Support: http://amasty.com/support.html
User Guide: Improved Navigation
9. Configuring ‘price’ attribute filters
Settings of ‘price’ attribute filters are
a bit different from regular filters.
For example, for display type you can
choose ‘Default’, ‘Dropdown’, ‘From-
To Only’ or ‘Slider’ option.
Copyright © 2011 amasty.com
Page 14
Support: http://amasty.com/support.html
User Guide: Improved Navigation
9. Configuring ‘price’ attribute filters
Also for such attributes you can
specify range step. If you indicate
50 like here, automatic ranges
with step 50 will be created, e.g.
0-50, 50-100. 100-150, etc.
These automatic ranges are used
only for display types ‘Dropdown’
and ‘Default’.
Copyright © 2011 amasty.com
Page 15
Support: http://amasty.com/support.html
User Guide: Improved Navigation
9. Configuring ‘price’ attribute filters
For ‘price’ attribute filters
there are the same SEO
options as for regular filters.
Also you can exclude
‘price’ attribute filters
from certain categories.
Copyright © 2011 amasty.com
Page 16
Support: http://amasty.com/support.html
User Guide: Improved Navigation
10. Creation of numeric attributes, e.g. width, height
Choose catalog input type ‘Price’ for
numeric attributes if you would like
to use sliders for them.
Also please don’t forget to set the ‘Use
in Layered Navigation’ option to
‘Filterable’ (see page 9).
If you use numeric attributes like width or height and would like to use slider for such attributes, please choose
catalog input type ‘Price’ for such attributes:
Copyright © 2011 amasty.com
Page 17
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Once you create the ‘price’
attributes please go to Catalog ->
Improved Navigation -> Filters
and click ‘Load’ button.
After that the numeric attributes
will appear in the list of filters.
10. Creation of numeric attributes, e.g. width, height
Copyright © 2011 amasty.com
Page 18
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Once you create the ‘price’
attributes please go to Catalog ->
Improved Navigation -> Filters
and click ‘Load’ button.
After that the numeric attributes
will appear in the list of filters.
10. Creation of numeric attributes, e.g. width, height
Copyright © 2011 amasty.com
Page 19
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Such filters have the same
settings as other ‘price’
attribute filters.
For numeric attributes you can
specify labels for measure units,
e.g. px (pixels), MB (megabytes),
ft (feet), etc. These labels will be
displayed in layered navigation
on front end.
10. Creation of numeric attributes, e.g. width, height
Copyright © 2011 amasty.com
Page 20
Support: http://amasty.com/support.html
Using just text for navigation can
confuse your site visitors, especially if
you have a lot of filters in the
navigation. Images and combinations
of images and labels let your
customers spot almost immediately
what they are looking for.
11. Improved Navigation examples
User Guide: Improved Navigation
Checkboxes make it easy for
customers to see what they’ve
already chosen and correct
their choices when needed.
You can add special price to
layered navigation, numeric
attributes like height, weight,
etc.
You can use sliders, ‘from-to’
and other display types for
numeric and price attributes.
Copyright © 2011 amasty.com
Page 21
Support: http://amasty.com/support.html
At the ‘Ranges’ page you can
add/delete ranges for price attribute.
The custom price ranges need to be
enabled in the ‘Settings’ section.
12. Custom Price Ranges
User Guide: Improved Navigation
Press ‘Add Range’ button
to add a new range.
Press ‘Save’ button
after you’ve entered
the range data.
Copyright © 2011 amasty.com
Page 22
Support: http://amasty.com/support.html
Click ‘Add Page’
button to add custom
meta tags for a page.
13. Custom Meta Tags for pages with selected attributes
User Guide: Improved Navigation
The module enables you to specify custom meta tags for pages with certain attribute
values selected. For example, if you select color ‘black’ and manufacturer ‘htc’, this page
will have only meta tags of the category page. With the module you can add custom
meta tags for page with such selections.
Please be aware that this feature works only when AJAX is disabled.
To create the custom meta tags
please go to Catalog ->
Improved Navigation -> Pages
Copyright © 2011 amasty.com
Page 23
Support: http://amasty.com/support.html
Please indicate the number of selections, for which you would like to specify
meta tags. In this case we specify meta tags for combination of two attribute
selections - color ‘black’ and manufacturer ‘HTC’. So we type 2 here.
If you would like to specify meta tags for 3 values of the same attribute (or 2
of one attribute and 1 of some other attribute), for example color ‘red’, ‘white’
and ‘green’, please type 3 in this field. When indicating a number here, please
count the total number of selections, not attributes (e.g. you may have 10
selections of the same attribute).
13. Custom Meta Tags for pages with selected attributes
User Guide: Improved Navigation
Having specified the number
of selections, click ‘Save and
Continue Edit’ button.
Copyright © 2011 amasty.com
Page 24
Support: http://amasty.com/support.html
You can choose whether custom
meta tags should be added to the
meta tags of the category page or
used instead of them.
13. Custom Meta Tags for pages with selected attributes
User Guide: Improved Navigation
It is possible to specify meta
title, meta description and
canonical URL for the page
with the selections.
Copyright © 2011 amasty.com
Page 25
Support: http://amasty.com/support.html
This title will be displayed on the
product list page once the
appropriate attribute values are
selected. If you would like to
display some CMS block at the
page, please specify the block
identifier in the ‘CMS block’ field.
13. Custom Meta Tags for pages with selected attributes
User Guide: Improved Navigation
Of course you can select the
attribute values to which the
meta tags should be applied.
We specified 2 at the
‘selections’ page, so now we
can choose 2 attribute values.
It is possible to choose 2
values of the same attribute.
Copyright © 2011 amasty.com
Page 26
Support: http://amasty.com/support.html
In the layered navigation we’ve
selected ‘HTC’ and ‘Black’. The page
title and CMS block are displayed as
specified. Please see the next page
for meta tags example.
14. Custom Meta Tags on front end
User Guide: Improved Navigation
Copyright © 2011 amasty.com
Page 27
Support: http://amasty.com/support.html
The custom meta tags
we’ve specified are added
to the category page meta
tags per out setup.
14. Custom Meta Tags on front end
User Guide: Improved Navigation
Canonical URL is
displayed as specified.
Copyright © 2011 amasty.com
Page 28
Support: http://amasty.com/support.html
15. Extension Settings
User Guide: Improved Navigation
At System -> Configuration -> Amasty
Extensions -> Improved Navigation you will
find a number of settings for the extension.
If you would like not to display
some categories in the layered
navigation, please specify IDs of
the categories in this field.
If you would like not to
display some of the attribute
filters on home page, please
list codes of the attributes
here, separated by commas.
You can choose position for
categories filter and display it for
example under price filter or at the
bottom of the navigation block. You
can remove the categories filter from
the layered navigation by typing ‘-1’.
Copyright © 2011 amasty.com
Page 29
Support: http://amasty.com/support.html
15. Extension Settings
User Guide: Improved Navigation
If you use custom
price ranges, set
this option to ‘Yes’.
You can use default display of
categories; show categories
together with subcategories; show
categories in a dropdown or just
have a static 2-level category tree.
Copyright © 2011 amasty.com
Page 30
Support: http://amasty.com/support.html
User Guide: Improved Navigation
In addition to predefined price ranges you can give your customers
opportunity to search by their own price range. They can fill in only
minimal or only maximal price margin. For example with ‘500’ as
maximum price as on the screen shot, the extension will find all
products below this price tag, in this case all products cheaper than
or equal to 500. If you would like to use only ‘From-To’ price option,
please set ‘Show Price As’ setting to ‘From-To only’.
15. Extension Settings
Copyright © 2011 amasty.com
Page 31
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Please set ‘Enable Filter
Collapsing to ‘Yes’ if you set
‘Collapsed’ setting to ‘Yes’ for any
of the filters and if you would like
to allow customers to fold filters
they are not interested in.
15. Extension Settings
Copyright © 2011 amasty.com
Page 32
Support: http://amasty.com/support.html
User Guide: Improved Navigation
In the ‘Blocks Display’ section you
can enable AJAX navigation. For
AJAX to work please make sure that
you’ve updated list.phtml file
according to the installation manual.
15. Extension Settings
‘State Block’ is the block, where
current navigation selections
are displayed. You can choose
whether to display it in the
sidebar (‘Left’) or in the middle
column (‘Top’) on front end.
The same display options are
available for category and price
blocks.
Copyright © 2011 amasty.com
Page 33
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Switch ‘Use SEO URLs’
setting to ‘Yes’, to
enable nice SEO urls.
15. Extension Settings
Copyright © 2011 amasty.com
Page 34
Support: http://amasty.com/support.html
User Guide: Improved Navigation
Our extension adds ‘shopby’ url
key to the url of pages generated
with the help of our extension
(e.g. brand pages). You can
change the key to any you like. It
is mandatory to have a key.
You can set structure of canonical urls for ‘key’-related (‘Canonical URL’ setting) and
category (‘Category Canonical URL’ setting) pages:
1. If you choose ‘Just Url Key’ option, canonical url for all ‘key’-related pages will be like this:
http://your_store.com/URL_Key/
For category pages it will be like this:
http://your_store.com/category.html
2. If you select ‘Current URL’ canonical url will be the actual url of the page both for ‘key’-
related and category pages.
3. With ‘First Attribute Value’ canonical url for ‘key’-related pages will be:
http://your_store.com/URL_Key/first_attribute_chosen_in_navigation.html
For category pages it will be like this:
http://your_store.com/category/URL_Key/first_attribute_chosen_in_navigation.html
15. Extension Settings
Special features section.
In this section you will find information on how to do the following:
- Create ‘All brands’ block and other alphabetic list blocks on analogy
- Add layered navigation to the home page
- Show attribute icons on category (product list) pages
- Show attribute images on product view pages
- Display layered navigation at product pages
I. To create alphabetic lists blocks, e.g. list of all brands, models, etc, use code of the kind:
When copying the above code to Magento admin panel, please make sure that there’s a space between ‘block’ and ‘type’ commands
so they are spelled in two words as ‘block type’ not in one word ‘blocktype’ (sometimes space may get deleted during copying).
Indicate code of the needed attribute instead of ‘manufacturer’, use ‘header’ parameter to indicate the name of the block and
‘column’ parameter to specify the number of columns in the block.
Important: after selecting a brand, customers can narrow down selection by any available attribute (price, color, etc)
Please see the next page for example of the block.
Copyright © 2011 amasty.com
Page 35
Support: http://amasty.com/support.html
16. ‘All brands’ page and other alphabetic lists
User Guide: Improved Navigation
{{block type="amshopby/list" attribute_code="manufacturer" header="All Brands" columns="2" template="amshopby/list.phtml"}}
Here’s an example of ‘All brands’ block:
Copyright © 2011 amasty.com
Page 36
Support: http://amasty.com/support.html
16. ‘All brands’ page and other alphabetic lists
User Guide: Improved Navigation
Copyright © 2011 amasty.com
Page 37
Support: http://amasty.com/support.html
17. How to add layered navigation to home page
User Guide: Improved Navigation
II. To add the layered navigation to the homepage, please do the following:
1) Open your home page in admin area (CMS > Static Pages)
2) switch to the "Custom Design" tab
3) set layout to "2 columns with left sidebar“
4) copy-paste these lines:
Please be aware that some or all of the existing Layout Update XML may be surrounded by the comment tags '<!--' and '-->'. If so,
please make sure that you paste the above lines outside of the comment tags.
5) save the page
6) set "is anchor" to "yes" for root category
7) If you would like to show horizontal navigation at the home page, add cms block to the content area
<reference name="left">
<block type=" amshopby/catalog_layer_view " name="amshopby.navleft" after="currency" template="catalog/layer/view.phtml"/>
</reference>
{{block type="amshopby/catalog_layer_view_top" name="amshopby.navtop" template="amshopby/view_top.phtml" }}
Copyright © 2011 amasty.com
Page 38
Support: http://amasty.com/support.html
18. Attribute images on product view pages
User Guide: Improved Navigation
III. To show attribute images with links on product page please use this code:
For Magento 1.3
Open app/design/frontend/default/default/template/catalog/product/view.phtml file and right after the </h3> tag add this code:
For Magento 1.4 and newer
paste the above code in the app\design\frontend\base\default\template\catalog\product\view.phtml file right after the:
Here’s an example:
Option icons make product pages
better to comprehend and more
attractive. Also they link to the lists of
products, utilizing the same options,
which makes it much easier to find
other products with similar qualities.
<?php echo Mage::helper('amshopby')->showLinks($_product) ?>
<?php echo Mage::helper('amshopby')->showLinks($_product) ?>
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
Copyright © 2011 amasty.com
Page 39
Support: http://amasty.com/support.html
19. How to show attribute icons on category pages
User Guide: Improved Navigation
IV. To show attribute icons on product list page (category page), follow these steps:
1) open app\design\frontend\base\default\template\catalog\product\list.phtml, where `base` is your current design package and `default` is
your current theme and add this code:
after the following:
$_helper = $this->helper('catalog/output');
2) add this line (2 times, one for grid mode and one for list mode)
after the product name code:
<h2 class="product-name"> … </h2>
Then log in to admin panel, browse to Catalog > Attributes, go to edit front end properties of the attribute, icons of which you would like to display,
and set "Used in Product Listing" setting to ‘Yes’:
That’s it.
Mage::helper('amshopby')->init($_productCollection);
<?php echo Mage::helper('amshopby')->showLinks($_product, $this->getMode()) ?>
V. To display layered navigation at product pages, open app\design\frontend\default\default\layout\amshopby.xml
file and comment out this code:
By default the navigation will be displayed in the right column. If you would like to move it to the left one, please change <reference
name="right"> code to <reference name=“left">
If you would like to use AJAX in navigation at product pages, wrap the products area as below:
<div class="amshopby-page-container">
....your current product list or cms blocks ....
<div style="display:none" class="amshopby-overlay"><img src="<?php echo $this->getSkinUrl('images/amshopby-overlay.gif')?>"
width="32" height="32"/></div>
</div>
Copyright © 2011 amasty.com
Page 40
Support: http://amasty.com/support.html
20. Layered navigation on product pages
User Guide: Improved Navigation
<!-- comment this out if you need the navigation on the product page
<catalog_product_view>
<reference name="right">
<block type="amshopby/catalog_layer_view" name="amshopby.navleft" after="currency"
template="catalog/layer/view.phtml"><action method="setIsProductPage"><flag>1</flag></action></block>
</reference>
</catalog_product_view>
-->
Copyright © 2011 amasty.com
Page 41
Support: http://amasty.com/support.html
21. Order of filters in layered navigation
User Guide: Improved Navigation
You can change order of filters in
the layered navigation. For this
please go to admin panel ->
Catalog -> Attributes -> Manage
Attributes. Then go to edit the
attribute which you would like to
display higher or lower in the
navigation and change the
attributes position either to
higher or to lower.
Copyright © 2011 amasty.com
Page 42
Support: http://amasty.com/support.html
22. Remove filters from layered navigation
User Guide: Improved Navigation
If you would like to remove a filter
from layered navigation please go
to admin panel -> Catalog ->
Attributes -> Manage Attributes.
Then go to edit the attribute which
you would like to remove from the
navigation and set ‘Use in Layered
Navigation’ option to ‘No’.
