Content Editing

This section covers content editing in the Design View by providing step-by-step instructions and practical use cases.

To help you efficiently manage and update your shop content, you will learn how to update content, such as teaser banners, texts, and images, to reflect seasonal campaigns, product launches, or localized promotions – without needing developer support.

Note:
To be able to view changes immediately, disable the page cache in Intershop Commerce Management (ICM). For details, refer to Managing Page Cache in the Intershop Commerce Management user manual.

Editing a Component

To edit a component:
  1. Navigate to the page with the component to be edited.
  2. Select the component to be edited:
    Hover over the content components and click the Pencil icon (Pencil icon), or click on the component name in the content structure panel to edit a specific component.
    Note:
    You can only edit the last (deepest) level of components. For example, if a slider component contains multiple teasers, you can edit the teasers but not the slider container itself.
  3. Edit the component.
    Depending on the component, you can, for example:
    • Replace images (e.g., in a teaser)
    • Replace products (e.g., in a product carousel)
    • Adjust texts, such as main heading, subheading (e.g., in a teaser)
    • Configure call to action buttons (e.g., in a teaser)
  4. Click the Save button.

Managing Images

The image management in the Content Management Center allows you to:

  • Upload images
  • Browse and search images in all folders
  • Manage and assign images to configuration parameters
  • Reuse shared folders and images (Shared icon) from different parent domains
  • Select a folder to browse its images
  • Delete images

Uploading Images

To upload an image:

  1. Select the component to be edited:
    Hover over the content components and click the Pencil icon (Pencil icon), or click on the component name in the content structure panel to edit a specific component.
    The editing panel is shown.
  2. Click Select for the image to be uploaded, for example, Image LG.
    The media assets dialog opens.
  3. Drag and drop your image or click browse.
    You can click on a certain folder to upload your image there. Media assets dialog
    The supported formats are determined by ICM.
    Note:
    It is not possible to upload images to folders that are shared. They are marked with a Shared icon (Shared icon).
    Uploaded images are immediately available in the chosen folder and can be selected for being assigned to a component.

Deleting Images

Note:

Deletion removes the image from all configurations. This means that it will also be removed from all components in which it is used.

It is not possible to delete images that are shared. They are marked with a Shared icon (Shared icon).

To delete an image:
  1. In the media assets dialog, navigate to the image in question. If necessary, click the folder it is located in. You can also search for the image by its name in the respective folder.
  2. Click the Delete icon (Delete icon) at the image.
    This opens a confirmation dialog.
  3. Click the Delete button (or discard this process by clicking the Cancel button).
    The dialog closes and a confirmation message appears.

Use Case: Updating a Teaser Banner

For this use case, we assume that you want to update a teaser banner on your homepage to promote an upcoming autumn sale for notebooks. You will change the image, add new text, set a call-to-action button linking to the notebooks category, and adjust the start and end dates for the teaser display.

To update a teaser banner:
  1. Navigate to the homepage (if not already displayed in the Design View).
  2. Hover over the teaser you want to edit and click the Pencil icon (Pencil icon), or click on the component name in the content structure panel.
  3. Select a new banner image.
    1. Click Select for the image to be uploaded, in this case Image LG.
    2. Browse for your image and click Apply.
  4. Provide a Main Heading and a Sub Heading.
    For this example, we use:
    • Main Heading: Autumn Sale
    • Sub Heading: 10% Discount on all notebooks!
  5. Set a Call To Action Target:
    1. Click Select.
    2. Select the category or subcategory to be linked, Notebooks for this example.
    3. Click Apply.
  6. Provide a text for the Call to Action Button, for example: Learn More.
  7. Click the Save button.
    The result may look like this:
    Figure 1. Updated teaser banner for an autumn sale
    Updated teaser banner for an autumn sale

Moving Components on the Page

Moving components allows you to adjust the layout of your page by changing the order or placement of components. Only certain components can be moved, and visual cues indicate which components are movable.

Note:
  • Components that can be moved are indicated with a drag handle (Drag handle).
  • Only the last (deepest) level components in the structure can be moved. Parent or container components cannot be repositioned.
  • Components marked with a Lock icon (Lock icon) are shared assignments from a parent domain and cannot be moved.
To move a component:
  1. Open the content structure panel by clicking the first icon (Content structure toggle) in the sidebar.
  2. Drag and drop the component to the desired position using the drag handle (Drag handle).
    Note:
    If the Not allowed cursor (Not allowed icon) appears when you try to drop the component, you cannot place the component in that location. Try a different position.
  3. Review your changes and ensure that the component appears in the correct location. Adjust as necessary.

Publishing or Hiding Components

Components can either be published or hidden. This allows you to control when and where components are visible to end users. You can temporarily hide content in a specific context or publish it globally across all uses. Managing local and global visibility facilitates content scheduling, testing, and campaign rollouts.

Components can either be published or hidden. The differences are as follows:

  • Visibility (Hidden):

    Hiding a component affects only the current context (the specific page or location where this component is used). The component remains visible in other contexts where it is assigned.

  • Publishing:

    Publishing a component has a global effect. It changes the visibility across all pages or contexts where this component is used.

Components display visual cues in the content structure panel:

  • Components that are explicitly hidden are grayed out and display an eye icon with a line through it. Example:
    Example of a hidden component
  • Components that are not visible because they are unpublished or their parent is hidden are grayed out but do not display the eye icon with a line through it. Example:
    Example of an unpublished component

Publishing Components

To publish a component:

  1. Open the content structure panel by clicking the first icon (Content structure toggle) in the sidebar.
  2. Select the component you want to publish.
    Note:
    Unpublished components appear grayed out.
  3. Open Settings in the component editor panel.
  4. Toggle the component to Published (or set timeframes).
  5. Click Submit to save your changes.
    This updates the component globally across all pages or contexts.

Hiding Components

To hide a component:

  1. Open the content structure panel by clicking the first icon (Content structure toggle icon) in the sidebar.
  2. Hover over the component you want to hide and click the eye icon (Eye icon) to toggle the visibility.
    This hides the component only in the current context.

Assigning Components to Customer Segments

Assigning components to customer segments allows you to display tailored content to specific audiences.

Note:
Components that are part of shared content have restricted customer assignment.
To assign content to a specific audience:
  1. Navigate to the page with the component to be edited.
  2. Select the component to be edited: Hover over the content components and click the Pencil icon (Pencil icon), or click on the component name in the content structure panel to edit a specific component.
  3. Open Settings in the component editor panel.
  4. Select one or more customer segments.
    Note:
    You cannot remove customer segments for shared components, but new segments can be added.
  5. Click the Save button.
    The component is displayed to all customers in the selected customer segments.

Use Case: Reorganizing and Targeting a Promotional Banner

For this use case, you are updating the home page of your Progressive Web App to highlight a new seasonal promotion.
Figure 2. Initial state on the homepage
Initial state on the homepage
You need to:
  • Move the promotional banner to a more prominent position
  • Hide an outdated component temporarily
  • Assign the new banner to a specific customer segment
To update the new seasonal promotion banner:
  1. Navigate to the home page (if not already displayed in the Design View).
  2. Open the content structure panel by clicking the first icon (Content structure toggle icon) in the sidebar.
  3. Select the teaser in the content structure panel.
  4. Drag and drop the teaser component to a more prominent position.
  5. Hover over the outdated component in the content structure panel.
  6. Click the eye icon (Eye icon) to toggle the visibility to hidden.
  7. Select the first teaser again.
  8. Open Settings in the component editor panel.
  9. Select Registered Customers as customer segment.
  10. Click the Save button.
    The result for logged in customers may look like this:
    Figure 3. Reorganized and targeted promotional banner
    Reorganized and targeted promotional banner