Chapter 4 : Web Content Management (WCMS)
The Web Content Management module handles the website presentation. Its most prominent tool is SmartEdit, which allows users to edit web page content without html code. This chapter will explore the WCMS Module and its SmartEdit interface in detail.
Overview
The basic WCMS elements include page template, page, and component. These elements can be created and manipulated in backoffice to a degree, but are most effectively managed with the SmartEdit interface.
SmartEdit Basics
SmartEdit is a web content management tool (a tool that allows users to edit web page content without html code) that is integrated with the WCMS module. SmartEdit integrates with other SAP commerce Cloud modules and enables content managers to administer and publish content across different channels such as mobile or web. SmartEdit includes these key features.
- WYSIWYG content management tool (What-You-See-Is-What-You-Get)
- Create, edit, clone and delete fully responsive pages and components
- Drag and Drop components
- Add banners, images, and more to pages
- Creation of navigation nodes
- Different modes: Preview, Basic Edit, Advanced Edit, Personalize, Versioning
- Out of the box page templates for static and dynamic pages
- Restriction of entire pages or components
- Synchronization of single content components as well as whole websites
- Navigation management
- Multi-country site support
- By default, you can reach smart edit at the host url/smartedit
Smart edit features four standard modes with which to edit and manage web content for your store. Preview mode, Basic Edit mode, Advanced Edit mode, and Versioning mode. How to navigate these modes will be explored later. First we’ll explore page creation and the basic WCMS model.

The base store is the foundational level of an SAP operation. Each catalog (ex. powertools_staging, powertools_online, etc.) should be associated with one or more base stores (ex. powertools). The content catalog should belong to the product catalog, as it will need to reference the products. There should be no direct connection from the content catalog to the base store. Each base store will have a website.

Pages
SmartEdit allows you to create and edit category, content, and product pages. You can also add restrictions to pages to specify under which conditions pages are displayed to your customers.
- Catalog page: Displays the contents of a catalog or multiple catalogs (store choice splash page)
- Category page: Display the contents of a product category (lists, grids)
- Content page: Standard content page (Home page, help page, policy page etc.)
- Product page: Single product and all product related information
Templates define a web page’s structure/layout. Templates can be referenced by many pages and serve to define the position and name of content slots. Each content slot (container) is populated by components. Components applied to content slots appear in the content slot’s space on the template in vertical order. If a component is applied directly to the template, it will appear in all pages that use that template!

You will provide a name and label for each page you create. The page label should begin with a slash (/). Otherwise, technical teams will have to intervene to create a redirect. You will also create the title displayed for the page, along with its optional language variants.

SmartEdit Modes
Smart edit features four standard modes with which to edit and manage web content for your store.

Basic Edit mode
Basic edit mode allows you to edit existing components and add new components to the page. Components can include an image, internal/external links, and more. This mode will display the components of a page in easy to edit slots with drag-and-drop functionality. In basic edit mode, you can clone pages and apply restrictions.

Cloning pages and Restrictions
Restrictions personalize user experience by displaying a component at a specified time or under specified conditions. These restrictions include time, user, category, product, usergroup and more. SmartEdit users can apply a single restriction to any component. Technical teams can apply additional restrictions.
- Component restriction options are found under the visibility tab for each component.
- Page restriction options are found in the clone page
- By cloning a page (selecting clone components), the page can have modified components that appear in accordance with restrictions.
- Use this to create a holiday version of a page, for example.
- The page will share the same label (URL)
Cloning a page allows page wide restrictions. When cloning a page, you will choose the display condition “variation”. The content of a shared slot is not impacted when cloning a page. For selecting variation, you will be shown a restriction tab where you can add conditions under which this page variation will be shown instead of the source page.

Preview mode
Preview mode shows the page as it will appear to the user.
- You can navigate to the page you are interested in editing while in preview mode then switch the appropriate editing mode from there.
- By selecting the product catalog version in preview mode to test how a page will appear in different versions (online, staged, etc.)

Advanced Edit mode
Advanced edit mode offers additional options beyond those offered in basic edit mode.
- Can synchronize pages, slots, and components
- Can edit template level shared slot components (this will modify all pages utilizing this template)
- Can convert a shared slot to a non-shared slot. You can also revert a slot back to shared
- Can see the number of conditional components in a slot, marked with a slashed eye symbol, allowing you to see all potential versions of a component and edit each
Versioning mode
SmartEdit allows you to create versions of pages. A version is like a snapshot of the current content of a page. As you edit a page, you can create versions of the content. If you aren’t happy with a change or if you make a mistake, you can roll back to a previously saved version of the page and continue your editing from there. When you roll back to a version, SmartEdit loads the content of the saved version into the page you’re currently editing. SmartEdit doesn’t delete a version when you roll back to it. The version remains, so you can roll back to a version as often as you like. You must actively create the version before rollback is an option.
You must be in Versioning mode to roll back to a previous version of a page. Before loading the content of the version into the page, SmartEdit automatically creates a version of the page content in its current state. SmartEdit names it as auto-version-# and increments the number each time it creates a version.
If there are any shared components in the page, that is, a component that you use in another slot in the page or in another page, SmartEdit automatically clones those components in the current page.
You can delete a page version manually. However, to ensure that you don’t accumulate too many versions of the pages in your content catalogs, SAP Commerce provides a process to automatically clean up versions from your database based on the maximum number of versions to keep or the maximum number of days to keep them. SAP Commerce administrators can set this up in the Backoffice.
If you move a page to trash, all versions of the page are also moved to trash. If you restore a page from trash, all versions that exist for the page are also restored.
Navigation Nodes
Navigation nodes editing allows the user to manipulate the navigation bars. Each navigation item will have a name to display to the customer in the NavNode. The NavNode will have one or more NavNode entries, each with a name representing a subcategory. Each NavNodeEntry will contain a link, which ties it to a category, product, or content.
SmartEdit offers navigation and link management functionality through the use of WCMS components and navigation nodes.
Note: The navigation bar is not a one-to-one representation of the structure of Product Catalog. It’s a selection of the product categories that you configure to be displayed as the top-level navigation. The navigation bar is also not limited to just product categories.
The SmartEdit Navigation Management perspective (previously WCMS cockpit functionality) enables you to define the Navigation Node entries that help you organize the catalog content in a structured way. In the Navigation perspective you can:
- Add and remove navigation nodes
- Connect content pages, media, and links with the navigation nodes
- Edit properties of nodes
- Synchronize the navigation nodes to apply changes to the online catalog versions

WCMS Personalization
Before personalization, storefronts would present the products and structures of a catalog to all customers in the same way. Personalization is the use of Segments, Restrictions, and other Customizations to cater the view of the store to sets of users and even individual users.

Terminologies in SmartEdit Personalization
- A segment is a grouping of users. The segment has no intrinsic criteria; whoever adds the customer to a segment decides why they belong in that segment.
- Define a target group by triggering an action when the customer belongs to a segment. An action typically swaps one component for another.
- A collection of target groups is called a customization
- A customization may also include a personalized search profile and promotion.
Available personalization options
Restrictions
- Define at the page or component level
- Restrictions include date/time, category, product, and usergroup
- Example: During the holidays, show a festive banner instead of the regular banner on the home page
Segmentation
- Serve members of a segment custom content, personalized search profiles, and promotions
- Customers may be associated with one or more segments
- Example: Customer in SoneyCamLovers segment will see Sony products first in the search results
Custom
- Create custom strategies for providing personalization to customers
- Example: Customer who achieve Silver reward status will see a special homepage banner

When you select a customization group, the page will refresh. After that point, changes you make in the SmartEdit interface will only affect that customization group.
Customization action types:
- Change the look and feel
- Change the search results
- Change promotions
If a user belongs to multiple segmentation groups, the combined view option in smartEdit will allow you to select target groups (labeling each with a different letter) to see the relationship of the user and what promotions are displayed. They will be displayed in an ordered hierarchy on your display so that you can see what segmentation items compete with others. To change which customization will take priority over others for display, select the library tab. There you can drag and drop to order the customization categories.
Triggers
