Get Started with the Site Management Tools (SMTs)

The site management tools (SMTs) provide an easy-to-use and powerful interface to manage content, add landing pages and enhance existing pages on your SCA site. We added SMTs in the Denali R2 release back in October 2015 and I know that there are some of you who have been interested in getting started.

In this article I've going to cover the basics. We're going to look at the types of thing you can do, what features we have that ease the change process, and where to go next. You'll need to be running Denali R2 in order to use the SMTs.

We have a lot of documentation on the SMTs.

Key Features

Before we dive in, let's go over what's included with the SMTs:

  1. Versioning — before you begin, you should know that when you use the SMTs you will have two different versions of your site. The first is the live site that your customers will see and use; the second is the unpublished version containing your changes. This allows you to work on a draft copy of your site without affecting the live site. This allows you to build up your changes and publish them all at once when you're ready.
  2. Multiple content types — the tools let you add images, text, merchandising zones, and custom HTML. These are the types of content we know website managers want to quickly add to their site without the aid of a developer or having to change code.
  3. SMT areas — an 'area' in this sense is a technical term to denote a location to which SMT content can be added. Within our templates, we include a number of these area by default but someone with some technical knowledge can add additional ones. These areas have varying scopes: some of your changes can be applied to a specific page, others to all pages of this kind, and others to all pages. This way, you can control the exposure of your message.
  4. Landing pages — as well as adding content to existing pages, you can also create separate landing pages. These are useful for static content pages (eg, contact us, about us, return policy, etc) and seasonal content (eg, pages for sales, competitions, members, etc).
  5. Enhanced pages — you can also 'enhance' a page by adding attributes or metadata to a page. The SMTs allow you to, for example, modify the homepage title and meta description for SEO purposes.
  6. Device preview — when you're testing how your changes look, you can preview them at different screen sizes to simulate how they'll look on different devices. As you've got a responsive site, this is vital testing.

Hopefully, you're now feeling bright eyed and bushy tailed about using the site management tools. Let's go.

Setup

You'll need to prepare your site first. This falls under two broad steps: installation and implementation, and setting up users. We have documentation on both, so I'll summarize both here while advising you read the docs.

Installation and Implementation

For this, refer to our installation and implementation documentation.

In short, you need to enable the features in the backend of your site:

  1. Go to Setup > Company > Enable Features
  2. Click the Web Presence subtab
  3. Check the Site Management Tools box
  4. Click Save

After that, you'll need to implement the SMTs on your site. If you're just using the shopping application on Denali R2 or newer, then you do not need to do anything. If you want to use it on a custom SSP application then you'll need to make use of the SMTs adapter. For this, talk to your NetSuite account representative for details.

Users and Roles

We've docs on this too, see the page on setting up users and roles.

To edit content using the SMTs, a user requires a valid NetSuite account and one of two roles: site administrator or store manager. You could also create or edit a custom role to include the permissions you require. To do this, go to Setup > Users/Roles > Manage Roles and add Website Management to the role you want to grant this permission to.

Once you've done that, you can go back to your website and press the Esc key to log in.

Let's Do Stuff

OK, everything is set up now and you're logged in. Let's go.

Text Content

Perhaps the most basic thing you can do is add in some text content. This is a good way to learn about area scope. When you've logged into the tools, navigate to a product detail page. Then click the Edit (pencil) icon at the top to go to the edit mode. Then click the Add (plus) icon. You'll see the page change dramatically, with highlighted areas to which you can add content.

So here you can see we have an illustration of three area scopes:

  1. All pages — for images and text, this means things like banners. Do you want to point people to a sale? How about a link to a competition? Put something in that appears at the top or bottom of every page?
  2. All pages of this type — or, in this example, all product detail pages. This is powerful for contextual announcements or banners. Perhaps this is where you tell people about a sale on a particular brand or provide a link to your returns policy.
  3. This page — perfect for things that apply specifically to this page. As we're looking at a particular product, this could mean a special promotion that only applies to this product. Maybe the product is specialist and you want to offer additional information about it.

So let's add something to this page; let's talk about our returns policy. In edit mode, I'm going to drag and drop the text from the side panel into the page type content area at the bottom of my PDP. I'm then going to add some text, linking to a landing page (which we'll create later) about the returns policy. Note how the rich text editor allows you to add simple styling changes as well as create hyperlinks. I'm going to write "Free returns on this product. See our returns policy for details." And then highlight "returns policy", click the link button, and add a link to /returns-policy — later, we'll use this URL when creating a landing page. Click Save.

Note a couple of things here. Firstly, our change appears in context where we dragged it to appear, so we can get a sense of what it will look like when it's published. Secondly, in the top left of the SMTs interface you'll see that a number has appeared next to the site name — this indicates how many unpublished changes we have made. Great stuff! Now let's look at landing pages.

Landing Pages

As previously mentioned, landing pages are a great and easy way to display static or seasonal content. A returns policy is a prime example of static content that an ecommerce site will have, so let's add one.

In edit mode, go to add a landing page in the side panel. Fill out the fields in the General and Metadata tabs. If you enter "Returns Policy" as the name then it'll autocomplete the others with suggestions; you'll note that it sets the heading and path to the values we want, so that's good. When you're done, click Add Landing Page. On the next page, the side panel changes to the familiar one for adding content. You'll also notice that your new landing page has highlighted regions like when we were editing the PDP.

Drag a text element and drop it onto the area for the page only. In it, put your returns policy. As I'm not a real retailer, I'm just going to put some lorem ipsum text in. Click Save and, again, your changes are enumerated in the top left. I think this means we're ready to go.

Publishing

Now that we've made our changes, it's time to push them live. However, before we do that, let's take a look at a neat feature that we can do to test how it'll look at different responsive views.

Next to the Add button in the top right corner is the Preview Screen Sizes button. First click the Preview button and then the Preview Screen Sizes. The top row of buttons will be replaced with icons for different screen sizes: fit (ie, full screen), small screen, small tablet and small phone. Clicking each one will force the preview window to resize to that resolution. This feature helps you to see what will happen when your users preview your content on different devices.

We've only created text content, so it's very unlikely that these changes will break the layout of the site. But for other things, like images, you'll want to make use of this tool. When you're done, click the X to close the preview.

Now, in the top menu, click the button to go to the review and publish mode, which summarizes your changes. Click Publish to go the next step, which is where you decide whether to publish the changes immediately or schedule them for a later time. You may want to schedule your changes if, for example, they are tied to the start of a sale or if you want to push them live at a time when there is low traffic, so you can test them out later. For now, I'm going to push my changes live.

When that's done, visit your site in another tab. Go see your content in action! If you followed me, then that means that you now have a link to your returns policy on your PDPs (only), a landing page with all the extra information, and the knowledge that you did this without having to edit your site's code!

Image Content

Image content works in a similar way to text content: drag and drop the element into the area you want and then upload an image.

It's great for things like banners on the homepage or in the header to advertise certain parts of your site, or highlight a sale.

I won't go into detail about it here because I've already got it covered in the customize your homepage article I wrote a few months ago. This is the product of what I did:

This article also goes into the technical side of the SMTs, specifically making modifications to your templates so that you can add in extra zones for SMT content. We're going to into that some more below, too.

Product Merchandising and Merchandising Zones

This is perhaps the most powerful part of the SMTs. In order to take advantage of it, you'll need the product merchandising SuiteApp (and I'd recommend reading the documentation on the subject too).

Product merchandising displays complementary, cross-sell and up-sell products in specified areas. For example, if a user is looking at men's pants, then you could have a merchandising zone that displays accessories, such as belts. What products are shown is governed by what rule has been applied to the area.

Setting up product merchandising typically requires technical input from a developer, with the workflow going as follows:

  1. The developer and merchandiser work together to figure out the selection criteria for the products to display. These are based on available facets and sort options.
  2. The developer adds areas to templates where the merchandising zones will be.
  3. The developer provides the merchandiser with IDs of the template areas to be used when setting up merchandising rules.
  4. The merchandiser sets up the rules using the IDs.

However, it should be pointed out that you may not need developer input if your site templates already contain the areas you want to add content to. In other words, if you're using the reference application and modifications to your site hasn't removed these areas, then you won't need to engage them. The SMTs effectively remove this dependency, to minimize the involvement of technical staff.

So let's do this.

Add a Merchandising Zone to the Homepage

If you've read some of my previous articles, you may notice that I've covered this, briefly, in another article on how to customize your homepage. But let's look at this in a little more detail.

Firstly, I'm going to assume that a conversation has already taken place and you know what you want to add to your site. After that, you need to create a merchandising rule to be used on your site. The merchandising rule is what determines what products to show, and they can be quite clever, depending on how complex you want to make it.

In my imaginary conversation, it was decided that we want to show all of the items on the site that are discounted. On my site, I use a custom field to mark products that are on sale, which makes filtering them easy.

To set up the rule, go to Setup > SuiteCommerce Advanced > Merchandising Rules and then click New Merchandising Rule. Then you need to follow the steps in the doc on creating a merchandising rule. Here's what the merchandising zone in home.tpl looks like on my site:

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

So, as you can see, my ID is home_bottom so I'm going to put that into the Merchandising ID. As for the field set, you can create your own one especially for merchandising or you could use an existing one. I'm going to use the one I use for searching, though an optimized, custom-made one for this specific use would perform slightly better.

To get my rule to only show discounted items, I need to use the Filter tab. I'm going to add a new filter and select my Discounted custom field, select is Checked and apply it to the current selections.

The rule is ready. Now we need to go back to the SMTs and put a merchandising zone in. Go back to the homepage, enter the SMT interface, and then to edit mode. Drag the merchandising zone to the area and choose your new merchandising rule. Save your changes and publish.

In my experience, it can sometimes take some time before the merchandising zone appears on the frontend. So keep refreshing the page now and then until it does. But when it does, take a look. Is it what you expected?

Customizing How the Merchandising Zone Looks

When I first put a merchandising zone up, it didn't look like I expected it to. The products were there, but the design didn't look right. But that's OK because it's possible to change the template.

Unfortunately, however, the template isn't included with the SCA distribution and it cannot, therefore, be deployed like other template changes. Another difference to note is that it does not use the Handlebars templating engine; instead it uses Underscore. With that in mind, it won't be too difficult to modify.

The template can be found by going through to the file cabinet and going to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. - CMS > CMS > Development > Published > Templates. Download merchzone_default.txt to your SCA source directory. Open it in your text editor.

Underscore templating is pretty simple, and by taking a look at the template you'll be able to work out what's happening. Here are the important bits:

  1. <% ... %> is used to execute arbitrary bits of JavaScript. So, for example, we declare variables at the start of the template that we're going to use later on.
  2. <%= ... %> is used to render a JavaScript variable.
  3. <%- ... %> is used to render a JavaScript variable and have it HTML-escaped.

From here you can make modifications. So, for me, one of the problems I have is that the CSS class that determines how wide the blocks for each product should be isn't working: it says span<%= grid_columns %> (which translates, by default, into span3) but we don't have that class, so it doesn't do anything. We do, however, have a similarly named class that does the same thing: col-sm-3. This is a basic class included with Bootstrap as part of their grid system that essentially sets the element to be 25% wide. There are classes for other widths, which can be used by changing the number.

In short, make the following change:

<!-- Replace this -->
<div class="span<%= grid_columns %>">

<!-- With this -->
<div class="col-sm-<%= grid_columns %>">

This is a little lazy: we should really extend the class rather than use it directly. If you plan on doing extensive modifications to the template, I'd recommend creating a custom module and using it to store the Sass for it; alternatively, you could attach it to an existing Sass file for your site.

Another modification we need to make is to do with this:

<a href="<%= item_url %>"><%= item.name %></a>

As you'll note, it's not displaying the product name. This is to do with a change in the value needed: instead of item.name, it should be item.displayname. Make this change now and save the template.

Tab back to the file cabinet so we can upload the modified template, then:

  1. Click Add File and select the template. Click OK to accept it overwriting the existing template.
  2. Click Edit next to the file in the list. Enter "merchzone_default_tmpl" in to the Tags field to associate the file with the merchandising zone functionality. If you don't do this, you'll get a console warning on the frontend ("No merchzone template found") and it the merchandising zone won't load.

  3. Click Save.

When you've done that, return to your homepage and refresh. You should see your products neatly formatted with their product names showing. This is what mine looks like:

(I don't really like orange shirts, which is why I put them on sale.)

HTML and SEO Content

I'm not going to go into detail about adding HTML and SEO content: these are both features that you should only use if you know why you use them.

You can use the HTML content feature if you need to include things like:

  1. Forms (eg competition entry, contact us, etc)
  2. Embedded videos (eg if you host product demos on YouTube)
  3. Social media widgets

As these things are technical, I would probably say it was better to put them in the hands of yours developers, but I know that not everyone has those. I suppose my advice is to keep in mind things like performance as loading external resources can slow down or block a page; where possible, use asychronous loading.

Refer to our documentation on HTML content for more information.

As for SEO content, this is something you should do to improve all the other content you add via the SMTs. In short, we have an SEO generator that ensures that your site pages are readable by search engine robots that visit your site. By adding and optimizing your SEO content, you ensure that the text, image and merchandising content you add is correctly indexed by search engines.

Again, I point you to our detailed documentation on content and SEO for information on this.

Summary

In this article we've looked at the site management tools. This useful addition to the SCA offering enables all users to add content to their site without having to make complicated changes to their site's code.

We include ways to add text, images and merchandising zones simply and easily, and allowing you to make the content available on your site at a time that suits you.

Perhaps the most powerful aspect of it are the merchandising zones. By setting up merchandising rules in the backend, you can translate these to visible products on the frontend which can be used to fill gaps or promote particular products. With a little bit of templating work, you can make these products look exactly how you want them to.

One additional use for merchandising zones, which I've not yet mentioned, is that they can be used on your error pages. After explaining what went wrong and apologizing, why not offer your customers a selection of products? As these pages are usually quite scant, it could provide a way of putting maximum focus on your products and provide another valuable way for your shoppers to get off a page they were never meant to see.

Further Reading

We have a lot of documentation on this stuff, so the ones listed below are really just jumping-off points.