Site Management Tools (SuiteCommerce CMS)
Find out how to effectively use Site Management Tools (SuiteCommerce CMS) to customize your website's design!
SuiteCommerce Training | Site Management Tools (CMS)
SuiteCommerce Training | Site Management Tools (CMS)
In this article, we will demonstrate SuiteCommerce and its CMS tool known as Site Management Tools.
SuiteCommerce Setup
Initially, it’s important to make sure everything is set up correctly. Let’s start by navigating to Commerce > Websites > Configuration.
Next, click on the website you’re using and verify the Site Management Tools setup to confirm that SMT is enabled for your account.
On the SuiteCommerce Configuration record, head over to the Integrations tab, then select Site Management Tools and check the 'Use Site Management Tools' option.
Here, you can tick the 'Disable ESC Key to Login' box to restrict access to Site Management Tools via the ESC key from the website. However, we recommend leaving this unchecked for faster access.
Accessing SMT
If managing your SuiteCommerce website's design is a frequent task, you’ll want a speedy way to log into SMT. There are a few quick methods to access SMT.
Log in Using ESC Key
As mentioned before, you can log into SMT with the escape key if your settings allow it. Just navigate to any page of your SuiteCommerce website and press the ESC key. This brings up a login prompt for your NetSuite credentials.
Keep in mind that not everyone with access to the NetSuite interface can log into Site Management Tools. If you can’t access SMT, please reach out to your administrator for permission.
Access Through the SMT Links Portlet
If you prefer opening Site Management Tools through the NetSuite UI rather than the website each time, consider setting up the SMT Links portlet on your NetSuite dashboard. This keeps the SMT login link readily accessible throughout your day.
Navigating SMT
Once you’ve logged in successfully, you’ll find yourself in the Site Management Tools interface. Here, you can utilize drag-and-drop components to adjust your website’s design.
View Mode
Upon first logging into Site Management Tools, you’ll start in view mode. In this mode, you can observe and navigate through your website while having some extra tools at your disposal.
For instance, you can examine how your webpage looks now or see a future version based on content visibility rules that we'll discuss further down in this tutorial.
There are four key modes available in Site Management Tools:
Overview Mode
View Mode
Edit Mode
Review and Publish Changes
Overview Mode in SMT
In Overview Mode, you can view various categories, pages, blog posts, published content, and expired content on your website. Each section is neatly organized into its own tab.
Categories Tab Overview
The Categories tab provides insight into the commerce categories established for your website.
Here, you can expand each category to see its subcategories. You can also check the number of items within each category and even link items to commerce categories directly from this tab.
Blog Tab Overview
If the blog feature is activated, you can also create blog posts for your SuiteCommerce site within SMT. You will manage all your blog entries from this tab. Although we won't delve into blog posts in this guide, you can check out our article on Publishing a Blog Post on Your SuiteCommerce Site for more information.
Published Content Tab Overview
This tab displays all the content that is currently available on your SuiteCommerce site. It serves as a practical resource for finding specific published content since you can search quickly by visibility, content type, path, or tag.
From this tab, you can also modify content visibility and tags directly.
Expired Content Tab Overview
This tab shows any previously published content that has since expired. While you may not visit this section often at first, it becomes useful as you manage content visibility dates.
For example, if you've set up a holiday promo element to expire on a specific date, once it has expired, you can find it here, make any necessary adjustments, and reuse it for your next promotion instead of starting from scratch.
Exploring Drag-and-Drop Components
Now, let’s look closely at a few elements in Site Management Tools to illustrate what’s possible. First, we need to switch to edit mode and click the blue plus icon in the upper right corner.
This will open a menu featuring drag-and-drop components. You will see that the page view now has a shadow overlay, and light boxes containing content areas appear with visibility designations.
The available drag-and-drop components show as blue icons in the content menu on the right side of the screen. If specific content elements are disabled or hidden, it likely means the extension isn’t activated for this domain. If you don't have that extension available, you will need to download and configure the bundle.
Customized Content Types
If there’s a drag-and-drop content piece you wish to have that isn’t available, our NetSuite Developers can create custom content types for you. We can develop an extension for a unique content type tailored to your business’s needs and aesthetic.
Adding a Drag-and-Drop Text Box Element
Now, let’s proceed and drag in a CMS text element.
Be sure to check the area where you are placing the element to confirm that the theme component will display on the intended pages. In this case, the CMS text element will appear in the header across all pages, but there are various locations throughout the page with different designations, such as 'This Page'. Therefore, let's drag and drop a text area where it will display on all pages.
Additional Theme Components
We can incorporate more theme components into other areas as needed. It's a simple line of code that’s added to the theme, so if you wish for more drop-in locations, please ask our team to assist with including these during your implementation. This could be for all pages, specific pages, or any setup you prefer as a default.
Component Settings
After dragging in a component like the CMS text element, a settings menu will appear on the right-hand side of the screen.
We suggest giving each component a clear name for easy identification later in SMT. For this demonstration, let’s name it "Cyber Monday deal 2022."
In this instance, we use this text element to create a header notice about a time-sensitive promo code. We prefer this message not to show after the promotional period, avoiding the need for someone to manually remove the element when the time arrives. Instead, we can efficiently control this through setting a visibility timeline that aligns with our promo code’s active period. For instance, we want it to conclude at 5:00 PM on the 30th.
Now, we just need to type the message we intend to display. In this case, it reads, "Cyber Monday deal 2022 - 75% Off Total All Orders." After that, select 'Save,' and you'll see that the text appears.
If you switch to view-only mode, it will show there as well. We can add an HTML element for further styling, but for now, we’ll use plain text.
Publishing a Site Element on a Current Page
The element we just created isn’t live on the website yet; we are still operating within the CMS tool. If we return to the live website in our browser, we won’t see the information displayed.
Let’s go back to Site Management Tools and select Review and Publish Changes. We will choose the text element we just created and click 'Publish.'
Now, that text will be visible when we return to the live site.
Previewing the Site for Specific Dates
Setting visibility dates, as demonstrated earlier, is useful because it negates the need for manual publishing or deleting elements at specific times. When working with visibility dates, you can use the "View Site As Of" feature at the top of the page in SMT view mode to preview how a page will look on certain dates and times.
This functionality is particularly beneficial for pages with elements that appear and disappear within overlapping timeframes. You can leverage this preview option to see how the page will look on different dates and comprehend how various time-sensitive elements work together on a page.
Adding Code to the Header
Another capability of Site Management Tools is adding elements to the website's
section, such as a live chat feature integration. Let’s use that as our example.
To ensure uniformity, it’s preferable to add this information directly on the home page. For this, we will open the website’s home page in edit mode within the site management tools, click the menu option in the upper right corner, and then select 'Edit Page Settings.'
We will copy the script code provided for the live chat integration, navigate to the Advanced tab in the page settings menu, and paste the code into the Add to
section.
After pasting the script, we’ll select 'Save' to keep the changes. Then, we will go to Review and Publish Changes, select the added element, and click 'Publish' to make it live.
Now, if we refresh the live website using Control + Shift + R, the live chat button we added will appear.
This does not imply it’s integrated with the ERP; we only added this chat functionality to our website using the integration code provided.
Managing Item Data
The next topic is item management capabilities within SMT. It’s advisable to establish good practices for managing your information via SMT compared to the ERP early on.
Although you can manage categories and items directly through Site Management Tools, it is generally more effective to handle that information within NetSuite via item records or the commerce category level.
Creating a Landing Page
Let's create a new landing page. I will return to Site Management Tools, click on the Overview icon, navigate to Pages, and select 'New Page.'
This action opens a new landing page in edit mode, showing areas designated for dragging and dropping various content elements.
Landing Page Settings: General Tab
I’ll start by adjusting the settings. For visibility, I will opt for Always Visible. This will be our About Us page, which I’ll title as such, and it will automatically generate the URL.
Next, we will examine the metadata. The title and meta description will display on page previews and in search results, and there's an option to add meta keywords in this section.
We can also include advanced details, yet we will skip that since we already discussed it regarding the chat feature. Once you’re ready, click Save.
Thus, saving the settings creates a new URL, but we must still add content.
Editing a Page within SMT
Now, I’ll show you yet another method to access and edit a page. To modify a page you've already created, go to Overview mode, click the Pages tab, find the page you wish to edit, and select the 'Edit' option from the drop-down menu.
This will open the page for editing in the edit mode, where you can click the blue plus icon and drag and drop various components onto the landing page.
Key Takeaways
In conclusion, Site Management Tools serve as a user-friendly drag-and-drop method for customizing your SuiteCommerce website. While it's not the ultimate solution for CMS-only tasks, SMT enables you to carry out basic functions independently without needing a developer’s assistance.
Certain modifications do not require integration within your item structure or commerce category. Occasionally, you may run into specific situations where you want to display distinct information solely on a particular product detail page, and that's where Site Management Tools and content scheduling prove essential. Otherwise, you should rely on commerce categories and item records for managing nearly everything else.
That's all for now! We hope this guide aids your understanding of NetSuite and its potential for your business!
