News and Tips

Homepage Basics

20 January 2015

What is the homepage?

This goes without saying — your homepage is the first page customers see when they visit your website. This page is extremely important as on this page you have the responsibility to direct your customers where you want them to go. Do you market a small amount of specific products with professionally written blog posts? Well you better make sure you direct your customers straight to those blog posts.

Do you sell a large quantity of small, almost indistinguishable machine or car parts? Nuts and bolts? You’ll need to feature a great search function or compatibility selector.

How do I access my homepage?

Every page on your website is a content page except for your cart (checkout related pages), product and customer (change password/register/login etc) pages. This means all of your categories, your homepage, your blog posts and your about us pages are all just content pages with custom templates.

To access the template for the homepage 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 Homepage

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, this homepage layout is good enough to start with but we encourage companies to utilise our own, or third-party design services to specialise their homepage.

The default homepage features include:

Sidebar

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.

We use the sidebar as the homepage’s primary category navigation for two reasons:

  1. We can’t list the categories in the nav bar across the top because it only has room for a very small amount of top-level categories and also needs to fit informational and account links.
  2. We cannot list out the categories as thumbnails on the homepage as a majority of customers do not have images to represent their categories.

Code

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

How to Remove the Sidebar

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

[%load_template file:"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">

Carousel Banner

The default Skeletal homepage also features a carousel scroller. This is a great place to upload banners to advertise sales, categories, new product lines or specific products.

Code

[%advert type:'text' template:'carousel' limit:'10' ad_group:''%]
[%param *header%]
<div id="mycarouselbanner" class="carousel slide">
<ol class="carousel-indicators">
[%site_value id:'counter' type:'load'/%]
</ol>
<div class="carousel-inner">
[%/param%]
[%param *footer%]
</div>
<a class="left carousel-control" href="#mycarouselbanner" data-slide="prev">
<span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarouselbanner" data-slide="next">
<span class="fa fa-chevron-right"></span>
</a>
</div>
[%/param%]
[%param *ifempty%]
<a class="neto-placeholder neto-placeholder-rotator btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" href="[@config:home_url@]/_cpanel?item=adw&page=view&id=new&plan_id=4">
click to add a banner<br/>
</a>
[%/param%]
[%/advert%]

How to Remove the Carousel Banner

To remove the carousel banner simply completely remove the following code block from your the homepage template:

[%advert type:'text' template:'carousel' limit:'10' ad_group:''%]
[%param *header%]
<div id="mycarouselbanner" class="carousel slide">
<ol class="carousel-indicators">
[%site_value id:'counter' type:'load'/%]
</ol>
<div class="carousel-inner">
[%/param%]
[%param *footer%]
</div>
<a class="left carousel-control" href="#mycarouselbanner" data-slide="prev">
<span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarouselbanner" data-slide="next">
<span class="fa fa-chevron-right"></span>
</a>
</div>
[%/param%]
[%param *ifempty%]
<a class="neto-placeholder neto-placeholder-rotator btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" href="[@config:home_url@]/_cpanel?item=adw&page=view&id=new&plan_id=4">
click to add a banner<br/>
</a>
[%/param%]
[%/advert%]
Marketing How to add slides to your advert carousel

Homepage Content

The homepage includes some basic homepage content which is editable via the control panel. You can remove this, but we highly recommend that you do not — this content is important for SEO purposes.

Code

<div id="homepage-content">[@page_content@]</div>

How to Remove

Simply remove this code

<div id="homepage-content">[@page_content@]</div>

Featured Products

There are some featured products on the homepage! These are configurable through our advertising manager.

Marketing How to add a featured product advert

Code

[%advert type:'product' limit:'8' template:'' ad_group:''%]
[%param *header%]
<hr />
<div class="row">
[%/param%]
[%param footer%]
</div>
[%/param%]
[%param *ifempty%]
[%random_products category:'0' template:'' limit:'8'%]
[%param *header%]
<hr />
<div class="row">
[%/param%]
[%param *footer%]
</div>
[%/param%]
[%/random_products%]
[%/param%]
[%/advert%]

How to Remove

[%advert type:'product' limit:'8' template:'' ad_group:''%]
[%param *header%]
<hr />
<div class="row">
[%/param%]
[%param footer%]
</div>
[%/param%]
[%param *ifempty%]
[%random_products category:'0' template:'' limit:'8'%]
[%param *header%]
<hr />
<div class="row">
[%/param%]
[%param *footer%]
</div>
[%/param%]
[%/random_products%]
[%/param%]
[%/advert%]

Available Data Tags

[@access_control@]
[@ccat_id@]
[@compat_id@]
[@compat_list_id@]
[@compatcat_description@]
[@compatcat_description2@]
[@compatcat_fullname@]
[@compatcat_name@]
[@compatcat_ref@]
[@content@]
[@content_allow_reviews@]
[@content_author@]
[@content_compatibility_code@]
[@content_description1@]
[@content_description2@]
[@content_description3@]
[@content_external_ref1@]
[@content_external_ref2@]
[@content_external_ref3@]
[@content_external_src@]
[@content_fullpath@]
[@content_id@]
[@content_level@]
[@content_module@]
[@content_name@]
[@content_ref@]
[@content_short_description1@]
[@content_short_description2@]
[@content_short_description3@]
[@content_type_code@]
[@content_type_id@]
[@content_type_name@]
[@date_posted@]
[@date_updated@]
[@gp_restriction@]
[@page_editor@]
[@page_type@]
[@parent_content_id@]
[@parent_id@]
[@rating@]
[@reviews@]
[@sortorder@]
[@templatebody@]
[@templatefoot@]
[@templatehead@]
[@templatesearch@]
[@thumb_content_type_id@]
[@timestamp@]
[@title@]