Name: Navigating SmartEdit
Uploaded: 2024-11-6
Duration: 364 s
Description: In this video, you'll follow Laura as she navigates through her webshop to give you a first look at the user interface of SmartEdit. This video explores what the main functionalities are and where to locate them.

<p>about your learning experience to help us improve.</p>

You've completed

cleanFiles/bookmap_SAP_Commerce_Business_User_Online_Training_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2025-02-27T06:18:30.000Z

Introducing SmartEdit

<div id="content"><div class="parentsection"><div class="section"><div tabindex="0"><h3>What Is SmartEdit?</h3></div><p tabindex="0">SmartEdit is SAP Commerce Cloud’s content management tool, which gives a useful and intuitive interface for nontechnical employees, such as Web Content Managers.</p><p tabindex="0">It's an overlay on the actual Web site. As such, it always makes sure that the Web site is up-to-date, with structural changes made to page templates.</p><p tabindex="0">Laura, the WCMS manager, who controls what appears on the Web site, performs most of her tasks in SmartEdit, and only sometimes relies on Backoffice.</p><p tabindex="0">Technically speaking, SmartEdit mirrors the storefront, giving a truly "What You See Is What You Get" editing experience. In other words, it shows changes exactly the way they would look on the customer storefront, on any device, from mobile to wide screen. It allows the creation of pages based on existing templates. Pages can be populated with various components, from banners to product carousels.</p></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>SmartEdit Functionality</h3></div><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="This image shows the SmartEdit functionality." alt="This image shows the SmartEdit functionality." src="/service/media/C4H323B_2501_en-US_media/C4H323B_2501_en-US_images/U2L1SmartEdit_image.png" tabindex="0"></div></div><div class="parentsection"><div class="section"><p tabindex="0"></p><p tabindex="0">The screenshot above shows that the SmartEdit interface provides four tabs:</p><ol><li tabindex="0">Navigation – Allowing the management of the site navigation structure defined for the site. (Covered in a later lesson.)</li><li tabindex="0">Pages - List of all pages defined for the site, including search and management options for individual pages.</li><li tabindex="0">Storefront - Shows the storefront, starting on the home page.</li><li tabindex="0">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.</li></ol><p tabindex="0">Other important elements in the SmartEdit header:</p><ul style="list-style-type:disc"><li tabindex="0">SmartEdit 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 that are also seen by customers, so she uses the online version of the Product Catalog.</li><li tabindex="0">The inflection point selector shows the Web site as it would appear on different devices, from mobile tablet to widescreen.</li></ul></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>Navigating SmartEdit</h3></div><div class="formalblock"></div><div class="kalturaVideoLessonWrapper"><div aria-label="" class="kalturaVideoLessonContainer" data-testid="video" id="1_wq29m9co"></div></div></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>Previewing the Storefront</h3></div><p tabindex="0"></p></div></div><div class="parentsection"><div class="section"><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="Image showing an example of the Preview mode and the Inflection Point Selector" alt="Image showing an example of the Preview mode and the Inflection Point Selector" src="/service/media/C4H323B_2501_en-US_media/C4H323B_2501_en-US_images/U2L1Preview_image.png" tabindex="0"></div></div><div class="parentsection"><div class="section"><p tabindex="0"></p><p tabindex="0">There are different modes available to edit and personalize the storefront.</p><p tabindex="0">When Laura first logs in, <strong>Preview mode</strong> 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 affect the user experience.</p><p tabindex="0">Preview mode allows web content managers to:</p><ul style="list-style-type:disc"><li tabindex="0">Preview components (such as a product carousel).</li><li tabindex="0">Navigate to a page that they wish to edit using the Web site navigation, and once there, switch to Basic or Advanced Edit mode to modify the page. This way is often faster rather than looking up a page by name in the Pages tab.</li></ul><p tabindex="0">Preview mode doesn't allow for any editing of the site’s content.</p></div></div><div class="parentsection"><div class="section"><p tabindex="0"></p><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="Image showing how Laura can preview the catalog using different the Inflection Point Selector and how to preview the catalog in different versions using the corresponding drop-downs." alt="Image showing how Laura can preview the catalog using different the Inflection Point Selector and how to preview the catalog in different versions using the corresponding drop-downs." src="/service/media/C4H323B_2501_en-US_media/C4H323B_2501_en-US_images/U2L1InflectionPoint_image.png" tabindex="0"></div></div></div>

Web Site Manager

Creating and Configuring Web Content for SAP Commerce Cloud

<div><div><div>In this video, you'll follow Laura as she navigates through her webshop to give you a first look at the user interface of SmartEdit. This video explores what the main functionalities are and where to locate them. </div></div></div>

Navigating SmartEdit

Today we’ll be following Laura,  a Web Content Manager  going through her daily tasks  of managing a storefront  with SAP Commerce Cloud.  The goal of this short video  is to follow Laura as she navigates through  her webshop and give you  a first look at the user interface of SmartEdit. Without going too deep,  you'll see what the main functionalities are  and where to find them.  In about 5 minutes you'll know how to:  - Navigate through SmartEdit.   - Choose the content that you want to work on.   - Localize and personalize your SmartEdit appearance.   - And add new pages to your storefront  Now that you know what to expect, let’s dive in.   Once Laura has signed in,  she finds herself on the SmartEdit landing page.  From here she can make some basic changes  to her account,  such as choosing language settings  or changing interface styles.   If necessary, she could also send SAP feedback  on SmartEdit from here, too. You're probably already aware  of the power of SAP Commerce Cloud  and that many storefronts  can be managed from one UI tool.  Laura takes care of many storefronts  that her company runs  based on a product and  a content catalog version per storefront.  This is where she can choose the  Web shop she wants to work on.   SmartEdit will now display the  content catalog versions providing the  selected storefront with content.  Your setup may be a bit different,  depending on your user rights and  your company’s catalog structure.  But in Laura’s case,  she has access to an  online and a staged catalog version,  serving her live storefront  and for her editing work,  respectively.   It’s time for Laura to get to work.  Her first task is to set up  a new page on her storefront.   She opens the Pages link.   All pages are handled here.  She could go to a particular page.  But Laura wants to create a new page.  So, she launches the page  creation wizard by clicking  the Create Page button.  The wizard offers a choice  of four types of pages.  A category page is  used to display the list of products  in a category.  A product page displays  what the customer needs to  know about a product.  Laura could use an Email page  to generate emails to her customers.  But right now,  she wants the simplest kind of page,  a content page.   Every page is based on a template,  and a list of available templates  is now offered.  Laura picks the Content Page 1 Template.    Laura now has to decide if  the page will stand on its own,  or whether she’s creating a  variation of an existing page.  If she selects Variation here,  she’ll have to define a restriction  telling the site under what conditions  the page should be displayed.  But in this case,  she wants the page to stand on its own,  so she’ll pick Primary.  She doesn’t want her page  to be the home page.  Now she enters the details of the page.  She names her page ‘quote’,  enters “Today’s pearl of wisdom”  as the description,  and “Quote of the Day” as the page title. Then she provides a page label.  When it follows the site’s base URL,  the label will lead to this new page.  She enters /quote as the label.   Clicking the Save button creates the page.    Her new page appears.  In one of her edit modes,  she can see the content slots defined  by her page template.  However, looking at these modes is  a out of scope for this video.  Laura switches to Preview mode,  to see the appearance of her page.  To synchronize the page,  Laura can return to the Sites tab.  This tab will return her  to where we started this video. This button  synchronizes the entire  staged catalog version to the online version.  However, other synchronization options are  more efficient and usually more appropriate.  You’ll get to see those  methods as you dive into  SmartEdit more deeply.   Now Laura wants to see  the rest of her web shop.  She can access the homepage  using the Homepage link.  The storefront displayed to  Laura here in SmartEdit will look  and behave just the same  as her actual storefront,  making editing intuitive.  In other words, what you see is what you get.  As such she can navigate through the site as if  she were a user on a public site.  She can jump into product pages  or for example,  get back to her home page  by clicking on the company logo.   by clicking on the company logo.   To give her users great experiences  on the storefront,  Laura must of course be able to see how  customers will have the site  presented on different devices.  Instead of resizing the browser,  she can do this by using different  inflection points mimicking various screen sizes.  Now, Laura knows exactly  what a mobile or tablet user would see when  visiting the webshop.  To check where the content  for her storefront is being sourced,  Laura can use the Preview Selector  to see the product and content catalog versions  currently being referenced.  There are also different contexts  in which she can view the site.  For example, seeing the storefront  at specific times or seeing unpublished changes  in the staged catalog versions.  Laura can now take a quick break.  We have seen her, personalize SmartEdit  to her liking,  create a new page,  and navigate through her site.