Create a storefront in the Experience Editor

Abstract

How to access the Experience Editor and and edit items.

When you build and design your storefront, there are two main tools that you use: the Content Editor and the Experience Editor. You access both from the Sitecore Launchpad.

The Experience Editor is an interface that allows you to easily change the look and feel as well as the content of the storefront using the tools and commands available on the ribbon as well as the rendering components available in the Toolbox. You can edit all the items that are visible on the page (text, graphics, logos, links, and so on) in the Experience Editor.

Toolbox in the Experience Editor

When you are working in the Experience Editor, you can:

  • Edit catalog data directly on the page, for example, category titles, and product information except prices, inventory status, and stock count.

  • Edit the association of images to products in the related product item.

  • Edit most textual content on the page. Exceptions are hint text (placeholder or watermark text) and tooltips, which can be edited on the associated data item accessed from the floating toolbar.

  • Execute a search and see the search result.

  • Change the View mode from the selected theme to gray-scale using the button on the Experience Accelerator tab. The Storefront site template does not fully support Wireframe mode.

It is important to know that:

  • Most forms cannot be submitted, for example, Login and Registration. When you work in the Experience Editor, you are logged in as a Sitecore user and it does not make sense to authenticate or register. This also applies to editing the address and profile information.

  • It is not possible to add products to the shopping cart.

  • It is not possible to place an order or navigate the checkout using the regular buttons. You must manually select the items that represent the pages in the checkout process from the Experience Editor breadcrumb.

  • Renderings are always visible so you can select and edit them. An example is the Message Summary, which is not visible on the live storefront when it is empty.

  • Catalog renderings show actual catalog data when the context is valid and they show placeholder data when the context is not valid.

To edit an item in the Experience Editor:

  1. Log in to the Experience Editor and navigate to the page and the field that you want to edit. By default, you are editing the final layout, so make sure you select the relevant version and language of the page.

    If you want to edit the fields that are shared between different versions of a page, on the ribbon, on the Presentation tab, in the Layout group, click Final Layout, and then click Shared Layout. This loads the shared layout for the page and lets you edit the shared and unversioned content.

  2. Click the field that you want to edit and enter your content. Depending on which type of field you select, you have different options in the floating toolbar that appears. For example:

    • In a simple text field, you can only enter text. The field automatically expands to fit the text you enter.

    • In an image field, you can insert various types of media. These could be animations, film clips, sound files, and so on.

  3. When you have finished editing the field, click Save.