What is a home page?

This goes without saying — your home page 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.

Home page’s can be made up of the following elements:

• Banner carousel
• Sidebar
• Brands
• About Us
• Category List

How do I access my home page?

Every page on your website is a content page except for your checkout related pages, product and customer account (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 home page you simply need to navigate to /httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html on the fileserver. Learn how to connect to Maropost Commerce Cloud via FTP.

Anatomy of the default home page

Note: We experiment a lot with the layout for Skeletal theme. This may change 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 home page layout is good enough to start with but we encourage companies to utilise their own, or third-party, design services to specialise their home page.

The default home page features include:

Banner Carousel

By default, Skeletal theme home page features a banner carousel. This is a great place to upload banners to advertise sales, categories, new product lines or specific products. More information on adding banners to the carousel.

[%advert type:'text' template:'carousel' limit:'10' ad_group:''%]
    [%param *header%]
        <section id="homepageCarousel" class="carousel slide" data-ride="carousel" aria-label="Banner images">
            [%if [@total_showing@] > 1%]
                <ol class="carousel-indicators">
                    [%site_value id:'counter' type:'load'/%]
                </ol>
            [%/if%]
            <div class="carousel-inner">
    [%/param%]
    [%param *footer%]
            </div>
            [%if [@total_showing@] > 1%]
                <a class="carousel-control-prev" href="#homepageCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#homepageCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            [%/if%]
        </section>
    [%/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=1">
            Click to add a banner<br/>
        </a>
    [%/param%]
[%/advert%]

To remove the carousel banner, simply remove this code block from your home page template.

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.

To remove the sidebar, simply remove the following line of code from the home page template add replace it with a Bootstrap column div <div class="col-12">.

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

Home Page Content

The home page includes some basic home page content which is editable via the control panel.

Featured Products

The featured products on the home page are configurable through the control panel. More information on adding featured products to the home page.

[%advert type:'product' limit:'8' template:'' ad_group:''%]
    [%param *header%]
        <hr aria-hidden="true"/>
        <h2 class="sr-only">Featured products</h2>
        <section class="row products-row" aria-label="Featured products">
    [%/param%]
    [%param footer%]
        </section>
    [%/param%]
    [%param *ifempty%]
        [%random_products filter_category:'' template:'' limit:'8'%]
            [%param *header%]
                <hr aria-hidden="true"/>
                <h2 class="sr-only">Featured products</h2>
                <section class="row products-row" aria-label="Featured products">
            [%/param%]
            [%param *footer%]
                </section>
            [%/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@]