Viewing and updating a UI template of a Customer Store page

To view and edit a UI template:

  1. Go to Storefront (see Navigation). The General tab of the Customer Store Control Panel is displayed (see Customer Store general settings).
  2. Go to the UI Templates tab. The list of UI templates page is displayed.
  3. Click the name of the required UI template. The UI template details page is displayed. The page includes the following elements:
    • Template name — the read-only name of the UI template.
    • Template body — the HTML code of the UI template.

      To add information about a reseller, product, product category, or to create a navigation element, use placeholders (see Using placeholders of Customer Store).

      If necessary, switch to the full-screen mode by clicking Fullscreen On in the top right corner of the Template body section. Click Fullscreen Off in the top right corner of the page to exit full-screen mode.

      To use tags in placeholders, add | safe after the placeholder.

      For example, for the product benefits in the Product showpage UI template:

      <p>{{ benefit.description }}</p>

      specify

      <p>{{ benefit.description | safe }}</p>


  4. If it is necessary to edit the UI template:
    1. In the Template body field, make the required changes in the HTML code of the UI template.
    2. Click Update.