Introducing SmartEdit

SmartEdit is SAP Commerce Cloud’s content management tool, which provides a useful and intuitive interface for non-technical employees, such as web content managers.

It represents the actual website with staged and online components.

As such, it always makes sure that the website is up-to-date: All updates to pages and components are made to the staged version of the web catalog and synchronized to the online version after review.

Laura, the WCMS manager, controls what appears on the website. She performs most of her tasks in SmartEdit and only sometimes relies on Backoffice.

Technically speaking, SmartEdit simply mirrors the storefront, giving a truly "What You See Is What You Get" editing experience. In other words, it shows changes exactly as they would appear on the customer storefront, on any device, from mobile to wide-screen. It allows creating pages from existing templates. Pages can be populated with a range of simple and complex components, from banners to product carousels.

The previous screenshot shows that the SmartEdit interface provides four tabs:

1. Navigation – Allowing the management of the site navigation structure defined for the site.
2. Pages - List of all pages defined for the site, including search options and further details for individual pages. Pages can be created, cloned, deleted, and synchronized here.
3. Storefront - Shows the storefront, starting on the home page.
4. Sites - If more than one site is available in the SAP Commerce Cloud installation, the Sites tab allows selection among them. The wanted catalog version can also be chosen here.

   Other important elements in the SmartEdit header:

5. The Preview Selector shows the content and product catalog version being worked on and also gives the option to change them. The currently selected version of the product catalog is used by pages showing product data. In most cases, Laura wants to see the products as a customer would, so she uses the online version of the Product Catalog.
6. The Help Button provides instant access to relevant help pages for a better user experience.
7. The Inflection Point Selector shows how the website would appear on different devices, from widescreen to mobile, and across different orientations.

There are different modes available for editing and personalizing the storefront.

When Laura first logs in, Preview mode is selected by default. This mode displays content and product information exactly as it would appear to users on the storefront. Laura can easily see how her changes will affect the user experience.

Preview mode allows web content managers to:

• Preview components (such as a product carousel).
• Navigate to the page they wish to edit using the website navigation, then switch to Basic or Advanced Edit mode to modify it. This way is often faster than looking up a page by name in the Pages tab.

Preview mode doesn't allow for any editing of the site’s content.