Adding Text Editor widgets to the landing page layout

In this lesson, you add two Text Editor widgets to create banner ads across the top of your layout. In the Text Editor widget, you can add HTML code that displays as text in the banner ad.

About this task

The following screen capture shows the two text editor widgets that form the Free Shipping and Designer Sunglasses banner ads in the layouts:


Text Editor widgets

To learn more about the Text Editor widget, read the following topic:

Procedure

  1. In the Commerce Composer tool, ensure that you are on the Design Layout tab.
  2. In the wireframe, click slot 2.
  3. In the Filter by field, type Text.
  4. Click Text Editor Widget, and then click OK.
    The widget is created, and the editor is displayed under its properties.
  5. Enter
    In the editor, you can work in editor mode or source mode:
    • In editor mode, you can edit content with the features in the toolbar and view the changes as you make them.
    • In HTML source mode, you can write or paste HTML code. The code can contain inline styles that define the background color, font color and style, and text alignment. Your content might look different on your storefront than it does in the editor. The difference is that your store might use style sheets (CSS files) that can potentially override the base style that the editor uses. It is important to use store preview to check the display of your HTML content, even though the editor provides a WYSIWYG display.
  6. Type Free Shipping All This Month. Use the editing features in the toolbar to format and color the text.
    Alternatively, you can take a shortcut and paste HTML into the editor:
    1. Click Source.
    2. Paste the following HTML code into the editor: 
      <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#ff0000;font-size:15px;text-align:center;">
	<b>Free Shipping</b> All This Month!</div>
    3. Click Source again.
      The editor displays a WYSIWYG version of the widget content:
      Text Editor widget example
  7. Click OK.
  8. In the wireframe, click slot 3.
  9. In the Filter by field, type Text.
  10. Click Text Editor Widget, and then click OK.
    The widget is created, and the editor is displayed under its properties.
  11. Click Source.
  12. Paste the following HTML code into the editor: 
    <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#003366;font-size:15px;text-align:center;">
	<b>Designer Sunglasses</b> 50% Off</div>
  13. Click Source again.
    The editor displays a WYSIWYG version of the widget content:
    Text Editor widget example 2
  14. Click OK.
  15. Click Save and Preview.

    Your layout now contains three widgets, as shown here:


    Text Editor widget result

Results

In this lesson, you added two Text Editor widgets to display banner ads in the layout. In the next lesson, you will add a Content Recommendation widget that displays the hero ad for the layout.