Applying Customization to the Storefront to Personalize the User Experience

Objective

After completing this lesson, you will be able to create and manage visual customizations using SmartEdit.

Personalization Mode in SmartEdit

SmartEdit offers a Personalization mode (shown in the following figure) with the tools to manage targeted personalized content on any given page of your site.

It allows you to manage personalized content and also to preview how that content appears on the Web site for a selected target group before publishing it. This allows you to fine-tune the personalized experience.

SmartEdit also comes with the Combined View:

Allowing the selection of multiple target groups in multiple customizations to simulate how the personalized content would appear on the Web site for a user belonging to these target groups. The user-friendly interface simplifies the management and visualization of multiple content variations.

The image displays a screenshot of SAP SmartEdit Personalization mode, highlighting Personalization, Customize, Combined View, and Library. The options are explained in the following text.

Explanation of the numbered arrows on the preceding image:

  1. Enable Personalized mode:

    Select "Personalization" from the dropdown menu for modes to have access to personalization features.

  2. Use the Customize tab:

    Lists all customizations with their target groups. After selecting a specific target group inside available customization, SmartEdit shows an editable preview of the current page for that group with personalized components. It also allows you to define alternate components to be displayed to members of that target group.

  3. Use Library tab:

    Create or manage customizations and their target groups.

  4. Use Combined View:

    Visualizing the effect of Personalization. You can select one or multiple target groups which are applied (at most one target group per customization).

The following video shows you how Laura creates a customization from scratch and how it changes the user experience for targeted users:

Let’s summarize the steps of the previous video how Laura would typically create and preview a customization:

  1. Laura switches to the Personalization mode and opens the Library tab to create a new customization.

  2. Within the customization, she creates a single target group based on two segments. In our example, a user needs to belong to both segments to belong to that target group.

  3. Laura then opens the Customize tab and selects her newly created target group inside her customization. SmartEdit shows an editable preview of the current page for that group, currently with zero personalized components.

  4. Laura exchanges one "standard" component with a new created one especially for the selected target group. The preview nicely visualizes how the storefront would look like for a user belonging to the selected target group, but it lacks the storefront visualization for a user belonging to different target groups in different customizations at the same time.

  5. For that purpose, Laura switches to the Combined View and selects all applicable target groups she wants to preview at once. The Combined View not only allows the preview of the personalization effects, but it also labels each personalized UI component based on its triggering target group, making the understanding of the related entities more intuitive.

Visualize Customization Effects through Combined View

Combined View simulates personalization effects when multiple target groups, each from a different customization, apply. It allows you to visualize the effects of multiple target groups affecting a single page.

Each target group selected is assigned a letter which is then overlaid on the image variations displayed by that target group. The existing ordering of customizations and of target groups inside these customizations determine which image variation is displayed when more than one applies. If there are conflicts, Combined View allows Laura to see the final result and to verify whether her personalization expectations were met or not.

Note

If there are two target groups affecting the same component, only one action of a variation is seen and the other is not seen. The ordering is done in the Customization Library.

The following image demonstrates the personalization effects of two applicable target groups labeled A and B from two different customizations:

Example: Apparel Store

The image shows three banners in Combined View. Two banners are highlighted to show that they've been altered for specific target groups, which are displayed in the top right.

Combined View also provides multi-country/region site support by allowing Laura to select customizations from the current, all or parent catalogs.

Parent catalog customizations are marked with a globe symbol; they’re visible, but not editable while the current catalog is selected.

The following image demonstrates the personalization effects of two applicable target groups. They are labeled A and B, but this time A is from the current and B from the parent catalog. Therefore, it is also labeled with the globe symbol:

Example: Electronic Store

The image illustrates configuring promotional content based on geographic and category-specific customizations. It shows Combined View when selecting target groups and highlights a globe icon, indicating a parent catalog.

Log in to track your progress & complete quizzes