Editing Subcategory Links on Category pages

Editing Links on the category pages of subcategories is relatively straightforward – but may require some getting used to.  I have covered most of an explanation of the code and how to edit the links / titles but have also included the same text below.

To edit category box links, go to CATALOG > CATEGORIES and click on the relevant category you want to edit / add / remove a link from.

You will see a bunch of code in the ‘description’ field in the general tab.   You will notice that it’s a continuation of code that start with a ‘<!–start cat box –> and then an ‘<! end cat box>.  These simply delineate that the code within this is a box.


So for each box on the category page, this code is the make-up of it:

<!– START cat BOX –>
<div class=”catpage-box”>
<div class=”catpage-box-text”><a href=”{{store direct_url=’lasers/grade-lasers.html’}}”>Grade Laser Levels</a></div>
<!– END cat BOX –>

There are 12 boxes – so there are 12 repetitions of the above.

All boxes with no title/link look like this:

<!– START cat BOX –>
<div class=”catpage-box”>
<div class=”catpage-box-text”></div>
<!– END cat BOX –>

The line:

<a href=”{{store direct_url=’lasers/grade-lasers.html’}}”>Grade Laser Levels</a>

has been removed and this just needs to be added with the url and title adjusted.

Similarly to remove / adjust a title or url, just adjust the title or url or remove the line .

Below are step by step instructions of how to go about this.

The first thing to do before making any edits to this field is to put your cursor somewhere in the box, press CTRL and A (to mark everything), then CTRL and C (to copy everything) and the CTRL and V into a text editing program (NOT microsoft word or similar program) – a text editor is a program such as ‘notepad’ which comes with all windows computers as standard.

The reason you are copying this is because in case you make an edit and make a mistake, you always have the original code to copy back in, in case something goes wrong.

the <div> simply stands for ‘Division’ or Section.   The ‘class’ generally means that a pre-defined attribute has been added to this ‘division’.  So say whenever the ‘class’ is called for in the above code, it pulls up a box in the background.

The ‘a href={{‘ code stands for – ‘Anchor Hypertext Reference’ which in laymans terms means ‘link it to this page’.  So whenever it says ‘a href’ you are linking the referenced text or image to some other web page.

In the above case, the linked text is the title ‘Level & Survey Books’.  So all you need to do is
a. adjust the title of the new category

b. adjust the url link (ie change levels/level-survey-books.html with the new url)

One important thing is to make sure all the dots and t’s are included – including all the symbols (such as ‘ – ” and {‘s).  If they are not included or in the wrong place, then something can go wrong.  But just copy what has already been done and just adjust the title and the relative url.

If you have any questions, just let me know.

Google Rating
Based on 25 reviews