Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore Component Guide >

Promo Bar

Promo Bar

An important, usually time-sensitive message that is displayed at the top of a page below any Alert (MSU site only) and above the masthead. Visitors can opt out of future displays once the message is read.

promo-bar-example
Figure 1: Example of a website with two promo bar components.

Component Information

Benefits

  • Display timely messages to visitors at the top of a page above the masthead, outside of the page’s normal content area between Breadcrumb links and Footer.
  • Visitors can click to close the message once they’ve seen it.
  • Content authors can schedule when the promotion bar stops showing to visitors.

Example Use Cases

  • Provide a prominent message and optional text link to visitors.
  • Provide a message that visitors can choose to opt out of displaying.
  • Provide a message with an expiration date, on or after which the message no longer displays.

Frequently Asked Questions

No. You can manually place the same bar on multiple pages.

Create a Promo Bar by following the instructions below. In Content Editor, drag the Data item to the site’s Data node. Use this item for all pages that use the component.

Instructions for Use

In Page Builder:

  1. Select the page in the content tree.
  2. Click “+” button in the topmost placeholder area, above the masthead.
  3. Locate Promo Bar from the component list and drag it to the top of the page.
Note: You cannot add a Promo Bar below the masthead.
  1. In the Assign content item dialog box, expand the MSU node, expand the appropriate website, expand Home, expand the appropriate page and expand Data. Then skip to step 5, below.

Alternate method:

  1. Click Components tab at the top of the content tree.
  2. Locate Promo Bar and drag it from the left column Components list into the main area’s topmost placeholder above the masthead.
  3. In the Assign content item dialog box, expand MSU > site name > Home > page name > Data.

Assign data:

  1. Select Data and click “+” to the right of the Data item.
  2. Select Promo Bar and give it a name unique within the context of the page. For example, “Promo Bar 1.”
  3. Select the new component and click Assign.
  4. Choose Promo Bar options. See additional instructions below.

In Page Builder:

  1. Click Components tab at top of content tree.
  2. Locate Promo Bar and drag it from the left column Components list into the main area’s topmost placeholder above masthead, in the order in which multiple Promo Bars should display.
  3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.
  4. Select appropriate Promo Bar content and click Assign.
  5. The component can be renamed in Content Editor (right click on item to rename) or Page Builder (click the pencil icon on the assign content panel).
  6. Choose Promo Bar options — see instructions below

In Page Builder:

  1. Click the Promo Bar to display the toolbar.
  2. Click Select content item icon.
  3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.

  4. The component can be renamed in Content Editor (right click on item to rename) or Page Builder (click the pencil icon on the assign content panel).

    promo-bar-explorer-icon
    Figure 3: The Promo Bar toolbar. The Explorer icon is outlined in red.
  5. Choose Promo Bar options — see instructions below

In Page Builder:

  1. Click the Promo Bar.
  2. In the Promo Bar right side panel, click the Design tab and expand Styling:
    1. Set any styling as required. These settings are not generally needed.
  3. In the Promo Bar right side panel, click the Design tab and expand Advanced styling:
    1. Select Color — Gray or Green background
  4. In Promo Bar right side panel, click the Content tab and adjust content:
    1. Text — This is the text that displays in the Promo Bar. Click the field and type directly into the field. “[No text in field]” indicates that nothing will display in the Promotion Bar.
    2. Link — Click the field in the component or expand Link in the Content tab to edit. “[No text in field]” indicates that no link will display.
      1. Link Type — Choose Internal (a page in this website), External (a page or file on another website), Media (an asset in this site’s Media Library) or Email (opens an email client with a preloaded recipient address.)
      2. Path — This is the link destination. The method of assigning the URL depends on the type of link: Internal (use the page chooser), External (provide fully specified URL/path) or Media (use the Media Library chooser).
      3. Link text — This is the text that appears on the button.
      4. Open in new window — Check the box to have the link open in a new window.
      5. Click Clear link value to remove the CTA button.
    3. Expiration Date — Add a date on which the Promo Bar expires and no longer displays.
  5. Click Actions and Submit to send the page to the publishing workflow.

In Page Builder:

  1. Click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left.
  2. Select Content Editor.

In Content Editor:

  1. Locate the Promo Bar component in the content tree.
  2. Make necessary changes in each field.
  3. An existing Promo Bar can be duplicated and then changed as needed.
  4. Return to Page Builder.

In Page Builder:

  1. Refresh the canvas to see changes.
  2. View the page using Preview (eye icon in upper right).
  3. Click Actions and Submit to send the page to the publishing workflow.

Tool Use Guide

 

Documentation updated: June 11, 2026

Is there an issue with this documentation? Report it here.