Feature Pack 7 or later

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 use CKEditor to add HTML code that displays the 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 properties for the widget open.
  5. Above the Display text field, click Pencil. CKEditor opens in a new window.
    In CKEditor, 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 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 CKEditor. The difference is that your store might use style sheets (CSS files) that can potentially override the base style that CKEditor uses. It is important to use store preview to check the display of your HTML content, even though CKEditor 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 CKEditor:
      <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.
  11. Above the Display text field, click Pencil.
  12. Click Source.
  13. Paste the following HTML code into CKEditor:
    <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>
  14. Click Source again.
    The editor displays a WYSIWYG version of the widget content:
    Text Editor widget example 2
  15. Click OK.
  16. 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.