Adding a Menu to your store

So you've started using one of the Printfection Themes for your store, Youve read the Rough Guides (Part 1 and Part 2) and now you would like to go deeper and find out how to add a menu that points to some external links or maybe even a featured product. How do you then make it look the same as the Store Categories or Shop by Price menu? Keep reading, it is really simple to do.

Tops or Tails?

The first thing you need to decide is where on the sidebar you want the extra menu to go above the current menu or below. Lets have a look at the standard menu column HTML:

<TD id=menucol vAlign=top>
Put the new menu code here for on top

##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
Put the new menu code here for down low

<DIV id=prop></DIV></TD>

 

Make sure you dont delete any of the other tags around these areas. In this demo, I will add the menu to the bottom.

Adding the Title

OK , now we need to add a title for our menu. It can be whatever you want. For this, I will call it "Links". All I need to add to my menu column is a H4 heading as below, good ole CSS does the rest.

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<H4>Links: </H4>
<DIV id=prop></DIV></TD>

 

What's on the Table?

The standard Printfection menus that get generated by the server for categories end up as a table. So for us to keep things simple and let CSS work for us, all we need do is create our own table full of links with the right IDs and classes. Some very simple HTML is all we need.


<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<H4>Links: </H4>
<table width=100% cellpadding=0 style='border-collapse:collapse' class='menuTable'>
</table> 
<DIV id=prop></DIV></TD>

 

Row your Menu Home

So now you have an empty table ready to add links to. Each link needs to be in its own cell (td) on its own row (tr).

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<H4>Links: </H4>
<table width=100% cellpadding=0 style='border-collapse:collapse' class='menuTable'>
<tr><td><a href="http://teeplates.australele.com" class="menuLink menuLevel1">TeePlates by Australele</a></td></tr>
</table> 
<DIV id=prop></DIV></TD>

If you are not familiar with HTML, all you need to do to change where the links go to is to change the href= to where you want to go.
For more links, just add more rows.

Open Links Externally

If your links are for external sites, away from your store, you may want them to open in a new window. Just add a target to the link:

<a href="http://teeplates.australele.com" class="menuLink menuLevel1" target= "_blank">TeePlates by Australele</a>

This will open the link in a new browser window and keep your store open in the background for your visitor.

 

15.07.2007. 06:00

Lynn on 18.08.2008. 13:15

Thankyou, This worked great!

Thomas on 20.05.2009. 01:21

Thank you Gavin. I was looking for this. I know a little HTML and CSS but it looks different on Printfection than on my website :)