SuiteCommerce Congifuration
To begin with, we need to ensure that things are configured correctly. So, we're going to navigate to Commerce > Websites > Configuration.
We will click on the website we're using, and then we need to check the Site Management Tools configuration to ensure we have SMT turned on for our account.
So on the SuiteCommerce Configuration record, we'll navigate to the Integrations tab, then go to Site Management Tools, and from there, check the 'Use Site Management Tools' checkbox.
From this page, you have the option to disable access to Site Management Tools directly through the website using the ESC key by checking the 'Disable ESC Key to Login' box. However, we like to leave this unchecked to enable quicker access.
Logging into SMT
If managing the design of your SuiteComerce website is one of your primary tasks, and you expect to be using Site Management Tools on a daily basis, you'll want a quick way to gain access. There are a couple of quick ways to log in to SMT.
Access Using ESC Key
As was briefly mentioned above, you can access SMT using the escape key if you have that setting enabled. Simply navigate to any page of your SuiteCommerce website and press the ESC key. This opens up a page where the user is prompted to enter their NetSuite login credentials.
Keep in mind that not everyone who has access to the NetSuite user interface can also access Site Management Tools. Contact your administrator about gaining access if you cannot log in to SMT.
Want to learn more about NetSuite user access limits? Check out this tutorial on NetSuite User Roles & Permissions.
Access Through the SMT Links Portlet
If you would prefer to open up Site Management tools from the NetSuite UI instead of navigating to the website each time, you can set up the SMT Links portlet on your NetSuite dashboard. This keeps the SMT login link at your fingertips in NetSuite so you can easily access it throughout the day.
Want to learn more about using portlets for quick navigation? Check out our tutorial article on Customizing NetSuite Dashboards.
SMT Navigation
After a successful login, we're now in Site Management Tools. From here, you can use drag-and-drop components to customize the design of your website.
View Mode
When you first log in to Site Management Tools, you'll notice it starts you in view mode. From here, you can see and navigate through your website, wile having some additional tools available to you.
For example, you can see how a page of your website looks now, or view how it will appear on another date based on content visibility rules (which we will address in more detail later in this tutorial).
There are four primary modes in Site Management Tools:
- Overview Mode
- View Mode
- Edit Mode
- Review and Publish Changes
SMT Overview Mode
Overview mode is where you can see the different categories, pages, blog posts, published content, and expired content on your website. Each of these areas is organized into it's own dedicated tab.
Overview: Categories Tab
The Category tab allows you to look at the commerce categories you have set up for this website.
From here, you can expand each category to see any subcategories it contains. You can also view the number of items in each category and even associate items with commerce categories directly from this tab.
Overview: Blog Tab
If the blog extension is enabled, then you'll have the ability to create blog posts for your SuiteCommerce site from within SMT as well. As you begin to use this feature, you will manage all of your blog posts from the blog tab. We won't cover blog posts in this tutorial, but you can check out our article on Publishing a Blog Post on Your SuiteCommerce Site to learn more.
Overview: Published Content Tab
This is where you can view all of the content published on your SuiteCommerce Site. It's a handy place to go when you are looking for a specific piece of published content since you can quickly search by visibility, content type, path, or tag.
You also can edit content visibility and edit tags directly from this published content tab.
Overview: Expired Content Tab
This is the tab where you can find any content that was previously published and has since expired. You likely won't visit this tab much to start, but as you work more with content visibility dates, this tab comes in quite handy.
For example, you may design a holiday promo element for your site that you set to expire on a certain date. After the content element has expired, you can find it on this expired content tab, make any necessary edits, and re-use it for your next promo rather than building a whole new promo element from scratch each time.
Drag and Drop Components
Next, let's look at a handful of elements in Site Management Tools to give you an introduction to what's possible. To begin with, we need to go into edit mode and click on the blue plus icon in the upper right corner.
This will open up a menu of drag-and-drop components. You'll notice that the page view now has a shadow overlay, and there are light boxes indicating content areas appearing with visibility designations.
Available drag-and-drop elements display as blue icons in the content menu on the right-hand side of the screen. If certain content elements are they're disabled or hidden, this means that the extension is not activated for this specific domain. If you don't have that extension available, you'll have to download and set up the bundle.
Need a Refresher on Activating Bundles? Check out our tutorial on How to Search and Install Bundles in NetSuite!
Custom Content Types
If you don't have a drag-and-drop content piece that you wish was there, our NetSuite Developers can develop custom content types for you! We build an extension for a custom content type that is a unique component specific to your business and how you want it to look and feel, including the different elements you want to be configurable. So there is an ability to create additional components beyond what is out of the box if you want something more than what's offered natively.
Drag and Drop Text Box Element
Now let's drag and drop in an element. I'm going to drag and drop a CMS text element.
Remember to check the area you are dragging and dropping an element into to make sure that the theme component will display on the pages you want it to. In our case, this CMS text element will display in the header on all pages, but there are several locations across the page with different designations, such as 'This Page'. So, let's go ahead and drag and drop a text area to all pages.
Additional Theme Components
We can add additional theme components to drag and drop in other locations. It's a single line of code that we drop into the theme, so if you want additional areas to drop in, ask our team to support you by adding more of these along your implementation. Whether for all pages, this page, or whatever you want that to be by default, the theme has a good amount of these areas, but we can add as many as you want.
Component Settings
After dragging and dropping in a component like the CMS Text element, a menu will display on the right-hand side of the screen where you can establish some settings.
We recommend giving each component an easily identifiable name so you can easily locate the component later in SMT. For this example, we're going to say "Cyber Monday deal 2022".
In this example, we're using this text element to create a header note about a time-bound promo code. We don't want this message displaying after the promotion is over, but we also don't want someone from our company to have to manually remove the element at a certain date and time. Instead we can easily manage this by establishing a visibility timeline around this element that matches the time window of our promo code. Let's say we want it to end at 5:00 PM on the 30th.
Want to learn more about working with SuiteCommerce promo codes? Check our our tutorial on SuitePromotions to learn more!
Now we just need to type the text we want to display, in this case that is "Cyber Monday deal 2022 - 75% Off Total All Orders". Then I'm going to click 'Save', and you'll see that that text shows up.
If I go into the view-only mode, it'll also show up there. We can add an HTML area and style this even further, but for demonstration purposes, we're just going to use plain text.
Publishing a Site Element on an Existing Page
Now, this element we just created is not yet live on the website; I'm still within the CMS tool. If I go back to the regular website in my browser and navigate to this page, the information is not showing:
So let's go back to site management tools, and go into the Review and Publish Changes. We'll select the text component that we just created and click 'Publish'.
Now if we navigate back to the live site, the text will be visible.
Previewing Site As Of Specific Dates
Setting visibility dates as we did above is handy because you don't have to go in and manually publish/delete elements at specific times. When working with visibility dates, you have the ability to preview what a page will look like at specific dates and times by using the "View Site As Of" menu at the top of the page in SMT view mode.
This is a nice tool, especially if you have elements that will be appearing/disappearing from your site in overlapping time frames. You can use this preview feature to see how the page will look on different dates to understand how your different time-bound elements will look when appearing together on a page.
Adding Code to Header
Another example of something you could do with site management tools is adding things to the website <head> element, like a live chat feature that you want to integrate. Let's take that as our example here.
It's best to add this information directly on the home page to stay consistent. So we're going to open up the website home page in edit mode within site management tools, click on the menu option in the top right corner of the screen, and then click on 'Edit Page Settings'.
We will copy the script tag that was provided for integrating the live chat, go to the Advanced tab in the page settings menu and paste the code into the Add to <head> field.
After pasting in the code we're going to click 'Save' to keep the changes to this element. Then we're ready to publish the element by going into Review and Publish Changes, selecting the element, and clicking 'Publish'.
Now if I navigate back to the live version of the website and press Control + Shift + R to refresh my browser, the live chat button I just added will show up.
This doesn't mean it's integrated with the ERP, all we did was add this chat feature to our website using the integration script they provided.
Item Data Management
The next thing to address in an overview of SMT is that it has item management capabilities. It's a good idea to develop good practices for managing your information via SMT versus the ERP early on.
Even though there's the option to manage categories and items directly from site management tools, it's better to manage that information directly out of NetSuite on the item records or the commerce category level as a general rule of thumb.
Need a refresher on managing items and categories in NetSuite? Check out our article on Working with Commerce Categories!
Remember, while there are several tools in SMT that you already have processes for within the NetSuite UI, site management tools are required and much more manageable in certain use cases, such as when creating landing pages.
Creating a Landing Page
Let's go ahead and create a new landing page. So I will go back to Site Management Tool and click on the Overview icon. Then I will navigate to Pages and click 'New Page'.
This will open up a new landing page in edit mode with those areas outlined for dragging and dropping different content elements.
Landing Page Settings: General Tab
I'm going to work on the settings first. For the visibility timeframe, I am going to select Always Visible. This is going to be an about us page, so I'll type that in as the page title, and it will auto-fill the URL.
Then we're going to look at the metadata deata. This title and the meta description are what will show up on page previews and in search results. You can add meta keywords here on this tab as well.
Then we can add some advanced information should we want to, but we'll skip that for now since we just looked at that with the chat feature example. As soon as you are ready, you can click Save.
So saving the settings we described in this section creates a new URL, but then we still need to add content to it.
Editing a Page in SMT
Now, I'll show you one more way you can navigate to a page to edit it and build it out further with drag-and-drop elements. If you want to edit a page you already created, you can go to Overview mode, click on the Pages tab, locate the page, and click the 'Edit' option in the drop-down menu.
This will open up the page in edit mode, where you can click on the blue plus icon and drag and drop different components onto this landing page.
Key Takeaways
In summary, site management tools are handy as a drag-and-drop method for customizing your SuiteCommerce website. It's not the best tool out there for CMS-only solutions, but site management tools allows you to bridge the gap for basic things you need to add to the website. SMT enables you to do more on your own without reaching out to a developer.
Certain changes don't need to be built within the core architecture of your item structure or commerce category. Other times you may have one-off scenarios in which you want to show this particular piece of information for this specific product detail page and no other product pages. Those are the primary use cases for site management tools and scheduling content; otherwise, you should be able to use commerce categories and item records to control almost everything else.
Well, that's it for now! Hopefully, this post gives you something to work with while trying to understand NetSuite and what it can do for your business. If you have any questions and want some free consulting advice, feel free to contact our team at Anchor Group.
Get stuck in a step during this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!