Adding a Content Recommendation widget to the landing page layout

In this lesson, you add the hero ad to your layout by using a Content Recommendation widget.

About this task

The following screen capture shows the Summer by Design hero ad:
Content Recommendation widget

For the Summer by Design ad, all of the images are uploaded to Management Center and ready for use. In this lesson, you create marketing content to display in the Content Recommendation widget. The marketing content contains static HTML that renders the Summer by Design ad.

To learn more about the Content Recommendation 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 image, click slot 4.
  3. In the Filter by field, type Content.
  4. Click Content Recommendation Widget, and then click OK.
    The properties for the widget open.
  5. In the Widget Properties section, to the right of each field, hover over the information icon and read the tooltip. For this widget, all of the default property settings are appropriate, so do not change the default settings.
  6. In the Widget Content section, notice the two options for populating the widget:
    • Specify existing content or create new content
    • Use web activities to recommend content
    A number of Commerce Composer widgets support web activities as an alternative to specifying content directly in the widget. Web activities offer these advantages:
    • You can use targets in web activities to personalize the widget content for different customers.
    • You can schedule web activities. For example, if the layout is scheduled for the month of May, you might schedule a different web activity to run each week.
    • You can run multiple web activities in the widget and assign a different priority to each web activity.

    If your goal is to display the same content to all customers while this layout is in use on the storefront, you probably do not need a web activity.

    For this widget, instead of running a web activity, you create marketing content directly in the widget.

  7. Above the Content table, click Create New ContentCreate New Content.
    The properties view for new content is displayed.
  8. In the Name field, type Ad for summer designers
  9. In the Content type field, select Text for store page display
  10. In the Text field, click Pencil. CKEditor opens in a new window.
  11. Click Source.
  12. Paste the following HTML code into CKEditor:
    <link href="/wcsstore/Aurora/rwdWebAssets/summerEssentials/styles.css" rel="stylesheet" />
<div class="container" dir="ltr" id="albiniCollect">
	<div id="albiniCollect-bkgrd">
		<div>
		</div>
	</div>
	<div class="background">
		<div class="gradient">
			<div class="espotCont">
				<div class="multiImgCont2">
					<div id="girl3">
						<div>
						</div>
					</div>
					<div id="girl2">
						<!--[if IE 8]>        <img src="/wcsstore/Aurora/rwdWebAssets/summerEssentials/girl1.png"></img>      <![endif]--><!--[if gte IE 9]><!-->
						<div>
						</div>
						<!--<![endif]--></div>
				</div>
				<div class="titleCont">
					<div class="title">
						Summer by Design</div>
					<div class="title4">
						Shop the hottest designer looks of the season</div>
				</div>
				<div class="multiImgCont">
					<div id="bag1">
						<!--[if IE 8]>        <img src="/wcsstore/Aurora/rwdWebAssets/summerEssentials/bag1.png"></img>      <![endif]--><!--[if gte IE 9]><!-->
						<div>
						</div>
						<!--<![endif]--></div>
					<div id="bag2">
						<div>
						</div>
					</div>
					<div id="belts">
						<div>
						</div>
					</div>
					<div id="heels">
						<!--[if IE 8]>        <img src="/wcsstore/Aurora/rwdWebAssets/summerEssentials/heels.png"></img>      <![endif]--><!--[if gte IE 9]><!-->
						<div>
						</div>
						<!--<![endif]--></div>
				</div>
				<div class="clearFloat">
				</div>
			</div>
			<div class="clearFloat">
			</div>
		</div>
	</div>
</div>
  13. Click Source again.
    The editor displays a WYSIWYG version of the widget content:
    Content Recommendation widget example
  14. To close CKEditor, click OK.
  15. To save your marketing content, click Save, and then click Close.
    The properties view for the widget is displayed. Notice that the marketing content is now included in the Content table:
    Content table
  16. Click Save and Preview.
    Your layout now has four widgets:
    A layout with four widgets

Results

In this lesson, you added a Content Recommendation widget to display the hero ad for the layout. In the next lesson, you will add another Content Recommendation widget that shows the designer brands as images with click actions.