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.

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.
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 nothing happens when you attempt to drop the component, it cannot be placed at 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