Customize Your Homepage

One of the most important pages on your site is the homepage. It is what your customers see when they visit your site; it is the store front; it is the face of your brand. It's crucial, therefore, that you get it right.

There's no shortage of discussion on the internet about what you should and shouldn't include on your homepage; I'm not going to talk about those here. Instead, I'm going to talk about how you go about making changes and what tools are available to you, so you're prepared when it comes to translating your designs into reality.

If you've just started, your homepage will look something like the following:

So now we'll look at the elements that make up this page.

Global Styles

First and foremost, there's styling applied to the homepage that isn't specific to the homepage itself. Rather, this styling is applied to every page to ensure consistency.

If you're familiar with my earlier articles, you'll know that I've talked about global styling, for example in part four of the series on building your first module and overriding a module to make a color change. In short, as part of your site's customization process, you should always keep your changes separate from the code provided by the NetSuite bundle. This ensures that when a new bundle is released, you are able to upgrade the modules quickly and easily.

Refer to those guides to get an idea about how to make those modifications.

Finally, remember that when customizing your site, you should never modify the source code directly. Instead you should create an override for templates and Sass files, see Overriding a Template File and Extending A Sass File.

Home Module

So, the main part of the homepage is contained within the Home module, which can be found under Modules > suitecommerce.

There isn't anything too special about this module compared to others, but note the view that contains:

  • Support for a carousel / banner slider, which are common on many ecommerce sites as a way to highlight particular brands or offers.
  • Support for the new site management tools introduced in Denali 2. For example, when you make modifications through the CXM interface, the windowResizeHandler and destroy functions are invoked.
  • Support for product merchandising zones that, unlike the slider, can load live product data based on your backend setup.

As well as an associated view, there's home.tpl — the template used to render the frontend. As the homepage is unique on your site, you can take some liberties with the design aspects of it. Perhaps, for example, you will write the template to be more like a traditional landing page. The reference template is quite simple, so you have basic scaffolding in place to do what you want to it.

Use a Slider

Although once very popular, many sites are now eschewing sliders. Perhaps chief among the reasoning is that they simply do not achieve what they set out to, namely: get click throughs and conversions. The Useful Usability site says that click-through may be below 0.1%. Indeed, if you step back and consider your own online browsing habits you may find that your own experience conforms with this research too.

However, this doesn't mean that you shouldn't use them but rather consider carefully what you are trying to achieve. Also, keep in mind, that most people are generally just going to look at / interact with the first slide. If you want people to go further you need to ensure that you have a compelling reason for them to do so. In other words, talk to the person requesting the carousel and ensure that there is strategy and content in place for the slides.

SuiteCommerce Advanced includes a customized version of the bxSlider jQuery plugin, which is fully responsive, featureful, and supports touch devices. You can test this for yourself to see how it responds by adjusting the size of your browser window or visiting the site on your phone.

It's shimmed into jQuery in distro.json, which means that you only need to invoke jQuery in your view to use it. There are three additional modules that are important for getting the carousel to work:

  1. Utilities > Utils.js
  2. SCA > SC.Configuration.js
  3. ShoppingApplication > SC.Shopping.Configuration.js

Utils.js

In Home.View.js you'll see that we include the Utils module as dependency. One of the uses is the SCA implementation of bxSlider binds a function called initBxSlider in this module:

It isn't much to look at but we use it in the initialize function in the view to load the carousel functionality and bind it to a particular element in the template. In the case of the homepage we use the data-slider attribute.

SC.Configuration.js

The contains configuration for the plugin itself, specifically the bxSlider defaults. So, for example, you'll see that the default elements for the previous and next buttons are included here but that in the view we override them.

Modifying these aren't so important. Also, keep in mind that these are the global defaults so will affect all carousels on your site.

SC.Shopping.Configuration.js

This is the configuration file specific to the Shopping application, to which the homepage belongs. About half way down this file, you will see the homePage object that contains two nested objects: carouselImages and bottomBannerImages.

If you've familiarized yourself with Home.View.js, you'll note that these objects are in the getContext function. Essentially, these objects are used to specify the URLs for the images to be included in the carousel. Using getContext, we can pass these URLs through to home.tpl.

Modify the Slider

So, to use the slider, you need to look in home.tpl at the code contained within the element that has the data-slider parameter on it:

The two outer div tags act as containers. Then, within the unordered list element, you can see that we use #each to iterate through the carouselImages object to create list items for each of the images. What you put into the list items is up to you — bxSlider works by interpreting each list item as a new slide.

What you do next depends on the level of customization that you want to go to. The reference implementation treats each slide the same without prejudice, but this won't work, for example, if you want each slide to contain different text or link. For the sake of brevity, I'm going to discuss how to modify the functionality for maximum customization and control.

Firstly, I'm going to suggest removing the dependency on SC.Shopping.Configuration.js. As mentioned, this module contains a homePage object and there is no necessity that it's here; after all, it's only used on the homepage (as the name suggests). Copy the objects from this file to Home.View.js, putting them in the relevant variables. For example, my getContext object now looks like this:

,    getContext: function()
    {
        return {
            // @class Home.View.Context
            // @property {String} imageResizeId
            imageHomeSize: Utils.getViewportWidth() < 768 ? 'homeslider' : 'main'
            // @property {String} imageHomeSizeBottom
        ,   imageHomeSizeBottom: Utils.getViewportWidth() < 768 ? 'homecell' : 'main'
            // @property {Array} carouselImages
        ,   carouselImages: [
                _.getAbsoluteUrl('img/carousel-home-1.jpg')
            ,   _.getAbsoluteUrl('img/carousel-home-2.jpg')
            ,   _.getAbsoluteUrl('img/carousel-home-3.jpg')
            ]
            // @property {Array} bottomBannerImages
        ,   bottomBannerImages: [
                _.getAbsoluteUrl('img/banner-bottom-home-1.jpg')
            ,   _.getAbsoluteUrl('img/banner-bottom-home-2.jpg')
            ,   _.getAbsoluteUrl('img/banner-bottom-home-3.jpg')
            ]
        };
    }

Note, therefore, I've also removed the variable declaration that references the configuration file. As this was the only use of that module in this one, we no longer need it as a dependency and can remove it from the top of the file. Make sure you also remove the associated parameter from the function.

Run gulp local and spin up the local homepage. It should still work as normal.

Next we need to extend the data for each of the slides to, for example, also contain a link, headline and description text. Let's expand carouselImages to the following:

, carouselImages: [
        {
        image: _.getAbsoluteUrl('img/carousel-home-1.jpg')
        , link: '/search'
        , headline: 'New Jackets'
        , description: 'New for this season!'
        }
    ,   {
        image: _.getAbsoluteUrl('img/carousel-home-2.jpg')
        , link: '/search'
        , headline: 'New Tops'
        , description: 'Keep warm out there!'
        }
    ,   {
        image: _.getAbsoluteUrl('img/carousel-home-3.jpg')
        , link: '/search'
        , headline: 'Amazing Bags'
        , description: 'Carry loads of stuff!'
        }
    ]

So as you can see we've modified the array to contain objects. For ease, I've kept the image URLs and links the same as the reference onces, but you can change these to suit your site (put your images in the module's images folder).

After this, you just need to modify home.tpl to use the new expressions. We're going to keep the #each loop but then swap out the hardcoded headline, description and links. In Handlebars, when you're in the context of a loop you can reference a value simply by using its key wrapped in double curly braces, e.g., {{image}}. With that in mind, change the carouselImages loop to the following:

{{#each carouselImages}}
    <li>
        <div class="home-slide-main-container">
            <a href="{{link}}">
                <img src="{{resizeImage image ../imageHomeSize}}" alt="" />
            </a>
            <div class="home-slide-caption">
                <h2 class="home-slide-caption-title">{{headline}}</h2>
                <p>{{description}}</p>
                <div class="home-slide-caption-button-container">
                    <a href="{{link}}" class="home-slide-caption-button">Shop Now</a>
                </div>
            </div>
        </div>
    </li>
{{/each}}

Refresh your local site and you should see something like the following:

You should get the idea from here, you can repeat similar actions on the boxes/banners below the slider. Note that we also have also have Sass in _home.scss that affects the slider, so you can also make some modifications there (but just be careful to keep in mind all of your site's breakpoints).

One anticipatory question: what if you wanted each slide to be completely different and not use the same structure for each? Well, Handlebars, by description, is logicless and while it contains some basic operators it doesn't really allow you to add logic to specify what to do in each scenario. In this case, I would simply recommend splitting up the array into separate variables and call those individually in the template.

Site Management Tools

New in Denali release 2, we added tools to support content management. There are a few benefits in using the SMTs over regular web development, namely:

  1. Versioning — content is saved on NetSuite so that you can keep track of revisions.
  2. Scheduling — something marketing people like is the ability to push content live (and take it down) at certain times. This is particularly useful if you're creating content relevant to a certain promotion or season. You can also make some changes but save them as drafts, where they remain unpublished until you say so.
  3. WYSIWYG — you get to see your changes live, in context with the page you're viewing. It also features things like a drag-and-drop interface, which is useful for less-technical members of the team.

You can read more about the benefits and features in the site management tools overview. What I want to talk about is how you can use this tool on your site. For example, a simple thing you can do is use the SMTs to include a banner image. If you think about the benefits listed above, you may prefer to take this approach. After all, if you have a marketing team you can give them a level of autonomy by doing the coding in the template to allow them to change promotional imagery without having to get you (i.e., a developer) involved.

How the SMTs Work

The SMTs work by putting a element in a template file with a specific data attribute on it. Then you mark it with another specific data attribute tag to tell the SMTs what scope that area is.

To visualize an example of this, take a look at home_cms.tpl, included in the Home module (copied below):

<div class="home-cms">
    <!-- Top header banner -->
    <section class="home-cms-page-banner-top">
        {{translate 'Use promo code <span class="highlight">SCADEMO</span> for <span class="highlight">30%</span> off your purchase'}}
    </section>

    <!--Main Banner -->
    <section class="home-cms-page-main" data-cms-area="home_main" data-cms-area-filters="path"></section>

    <!--Banner / Promo-->
    <section class="home-cms-page-banner-bottom-content">
        <div class="home-cms-page-banner-bottom" data-cms-area="home_banner_1" data-cms-area-filters="path"></div>

        <div class="home-cms-page-banner-bottom" data-cms-area="home_banner_2" data-cms-area-filters="path"></div>

        <div class="home-cms-page-banner-bottom" data-cms-area="home_banner_3" data-cms-area-filters="path"></div>

        <div class="home-cms-page-banner-bottom-main" data-cms-area="item_list_banner_bottom" data-cms-area-filters="path"></div>
    </section>

    <!--Merchandising zone-->
    <section class="home-cms-page-merchandising" data-cms-area="home_bottom" data-cms-area-filters="path"></section>
</div>

You can see that, by default, it looks extremely similar to normal template as there are areas for a header banner, main banner, promo areas and then a merchandising zone. But the point, as mentioned, is that you can see all the data attributes attached to the elements. I strongly recommend that you read the documentation on SMT areas to get a broader idea about these.

Add a Banner

Note that to do this on your site, you will need the functionality installed. Refer to the installation and implementantion documentation on how to do this.

Once you've done that, let's go and add a banner to the site. I've prepared my banner, which contains the text already super-imposed on it so I just need to edit my template. At the top of home.tpl, there is a div where we have some text about promotional discounts. Replace that with the following:

<div class="home-banner-top" data-cms-area="home_banner_top" data-cms-area-filters="path"></div>

The data-cms-area can be anything we want it to be (it's for our benefit) so choose what you want, but I recommend keeping to the naming convention of the file, i.e., like you would if you were giving it a class. The "path" value for data-cms-area-filters tells the SMTs that the scope of the area is specific to this page (and not, otherwise, scoped to the page type or all pages).

Now, if you save the file and deploy it to your local site, you can now use the SMTs to add the banner to your area. Open and log in to the SMTs (press Esc) and go into edit mode. If you go to add something to the page, you'll see a number of areas highlighted: while there'll be areas for all pages, you'll see your new area available:

Using the interface, drag and drop the image icon into the 'this page' area, and then select the file from your computer. Add the URL for the page you want to link it to (for testing, you can just do "/search") and some alternate text.

When you're happy with how your change looks, click on the Review & Publish button and publish your changes. On the subsequent screen, click the option to publish the changes now. Revisit your site again and you'll see your changes live.

SMTs Summary

As you can see, this is pretty powerful. As the documentation says, you can use this functionality not just on single pages but also on types of pages and also globally on your site. Something like this could be a strong alternative to a carousel, which requires a developer to make a change or, at least, someone with sufficient HTML knowledge and access to the developer tools. Furthermore, it's not just images but HTML snippets, text, and, as we're about to come to, merchandising zones.

Merchandising Zones

The final area of customization that I want to broach is merchandising zones. This allows you to offer a list of products to the shopper, which could be things like sale items or a collection of seasonal/promotional items.

These are growing increasingly popular on ecommerce sites 'below the fold', i.e., on a part of the screen that requires the shopper to scroll down and see them. A lot of content marketers like them and you'll likely have to work with them to get the optimal results, and you'll likely have to edit templates to get them to appear in the right areas.

As with the SMT section, I strongly recommend reading the documentation on product merchandising, particularly the page on setting up a merchandising rule.

Modify the Template

As with banner image, to use this functionality you need to use the SMTs; therefore, you'll need to do some template work first.

And, again, you can rely on home_cms.tpl to provide an outline on the type of code to include. For now, edit home.tpl and replace the merchandising section with the following code:

<section class="home-cms-page-merchandising" data-cms-area="home_bottom" data-cms-area-filters="path"></section>

As you can see, it follows the same simple guidelines as the banner: data attributes to mark up the element so that the SMTs recognize it and enable us to use it.

Add the Zone

As before, log in to the SMTs and go to edit mode, then drag and drop a merchandising zone. Select from the dropdown your configured merchandising rule, and publish it. You should see something like the following:

Customizing the Template

As you can see, it's rather simple but you can customize this template (or create your own). It's not included as part of the SuiteCommerce Advanced bundle, so you can't edit it using the local developer tools. However, you can access the template through the file manager, see our doc on the merchandising zone template for information.

Summary

In this article we covered three main ways you can customize your homepage:

  1. Using a banner slider / carousel
  2. Using the site management tools to add a banner
  3. Using the site management tools to add a merchandising zone

There are lot of things to consider when modifiying your homepage: not only things like user experience and design, but also performance. To achieve a great homepage, you'll need to keep in mind the needs of your shoppers and what your goals are. Consider the tools in SCA and how they could help or hinder those needs and goals.

Further Reading