Category Page Basics

What are Category Pages?

In terms of ecommerce, product categories are the simplest unit for the sorting of products. Do you sell shirts and pants? Well if you only have two of each, you probably don't need to use categories. But if you have two-hundred of each, it is probably best to separate them into two categories: pants and shirts.

In the example above, Shirts and Pants would be distinct from each other by having totally separated pages — this is called a category page.

When it comes to Neto, category pages are simply content pages, therefore in Neto the only difference between a category page and a blog post is the design template they use and the content type they fall under.

How do I access the category page template?

By default all categories use the CMS template category.template.html To access the template you simply need to navigate to /cms/home.template.html on the fileserver.

How to connect to Neto via FTP

The Anatomy of the Default Category Page

Note: We experiment a LOT with the default layout for Skeletal. This may change a bit over time and be slightly out of sync with this document, but the value of this section is not in the specific layout: rather the features utilised.

Skeletal has an intentionally unspecialised and industry-agnostic layout. This is because Skeletal is designed to be a suitable starting point for any ecommerce website. For most companies, the default layout is good enough to start with but we encourage companies to utilise our own, or third-party design services to specialise their design.

The default category page features include:

The default sidebar is utilised on various pages throughout Skeletal, namely the category pages and homepage. This sidebar contains a standard multi-level category menu and some information links. It also conditionally features product filters when on category pages.

All About the "product_filter" Tag


[%load_template file:"cms/includes/sidebar.template.html"/%]

How to Remove the Sidebar

To remove the sidebar, simply remove this line from the code:

[%load_template file:"cms/includes/sidebar.template.html"/%]

Add in a new col-xs-12 grid column in the place of the [%load_template%] tag to replace the one usually kept in the sidebar include:

<div class="col-xs-12">


The primary purpose of any category page is to list out the products its category contains. This is done with the [%thumb_list%] function tag.

All about the 'thumb_list' tag.


[%thumb_list type:'products' limit:'[@config:thumb_limit@]'%]<br>    [%param template%][%viewby type:'products' default:'[@templatethumb@]'/%][%/param%]<br>    [%param *header%]<br>    ...

Sort Controls

By default customers have a little control over the way category pages display. They can change the thumb-style (list or gallery) and the sort order (most popular, name, price).


<div class="row sort_container"><br>        <div class="col-xs-4 col-sm-7 col-md-4"><br>            <form method="get" name="viewform" action="[@config:current_url@]" class="hidden"><br>                <input name="rf" type="hidden" value="[%filter_code/%]"><br>                <input name="viewby" type="hidden" value=""/><br>            </form><br>            <div class="viewby btn-group"><br>                <a href="javascript:viewtype('');" class="btn btn-default [%viewby type:'products' if:'ne' value:'list' if_true:'active' if_false:''/%]" rel="nofollow"><br>                    <i class="fa fa-th"></i><br>                </a><br>                <a href="javascript:viewtype('list');" class="btn btn-default [%viewby type:'products' if:'eq' value:'list' if_true:'active' if_false:''/%]" rel="nofollow"><br>                    <i class="fa fa-th-list"></i><br>                </a><br>            </div><br>        </div><br>        <div class="col-md-4 hidden-xs hidden-sm"><br>            <div class="btn-text"><br>                <strong>[@total_results@]</strong> products found<br>            </div><br>        </div><br>        <div class="col-xs-8 col-sm-5 col-md-4"><br>            <form method="get" class="form-horizontal" action="[@config:current_url@]"><br>                <input name="rf" type="hidden" value="[%filter_code/%]"><br>                <div class="form-group"><br>                    <label class="control-label col-xs-2">sort</label><br>                    <div class="col-xs-10"><br>                        <select name="sortby" onchange="return this.form.submit();" class="form-control"><br>                            <option value="popular" [%sortby type:'products' if:'eq' value:'popular'%]selected[%/sortby%]><br>                                Most Popular<br>                            </option><br>                            <option value="name" [%sortby type:'products' if:'eq' value:'name'%]selected[%/sortby%]><br>                                Name<br>                            </option><br>                            <option value="SKU" [%sortby type:'products' if:'eq' value:'SKU'%]selected[%/sortby%]><br>                                SKU<br>                            </option><br>                            <option value="lowest_price" [%sortby type:'products' if:'eq' value:'lowest_price'%]selected[%/sortby%]><br>                                Lowest Price<br>                            </option><br>                            <option value="highest_price" [%sortby type:'products' if:'eq' value:'highest_price'%]selected[%/sortby%]><br>                                Highest Price<br>                            </option><br>                        </select><br>                    </div><br>                </div><br>            </form><br>        </div><br>    </div>

Available Data Tags


Was this article useful?

Be notified when this page is updated. Optional.