Sitecore Insiders

Sitecore SXA Overlay

A complete guide about setting up the Sitecore SXA Overlay feature.

A complete guide about setting up the Sitecore SXA Overlay feature.

The official documentation here: https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/create-an-overlay-link.html

Create an Overlay Page

Insert Overlay Content

In the Overlay Properties, you can define the size of your pop-up in the fields Height and Width in pixels, in case you want to use Percentage click on the check-box “Use Percentage”

Overlay Page dimensions

This type of page has a Layout defined so you can edit it in the Experience Editor.
There you can add any component to be displayed on your pop-up, except for Sitecore Forms that won’t work out-of-the-box inside these Overlay pages.

Edit overlay in Experience Editor

To open this Overlay page on your pages…

Link component

Add a Link component and link it to the overlay page.

Add Link component

Next add the style “Links Shown in overlay” in component properties.

Link Shown in Overlay

In the Rich Text

First click on “Insert Sitecore Link” and link to an Overlay page.

Insert Sitecore Link

Then add the style “Open in Overlay” by clicking on “Hyperlink Manager”

Hiperlink Manager

Note: If you do not have this checkbox option follow the steps bellow.

Add missing “Open in Overlay” checkbox

First open the file in [website root]\sitecore\shell\Controls\Rich Text Editor\EditorPage.aspx

Then add the following attribute inside <telerik:radeditor ID="Editor" runat="server"

ExternalDialogsPath="~/sitecore/shell/controls/rich text editor/Dialogs/"

Provided from Harsh Baid’s article: https://www.harshbaid.in/2019/07/17/sitecore-sxa-open-in-overlay-checkbox-missing/

Files used by Overlay feature

The Overlay feature uses the following files:

  • xa.js
  • xaquery.js
  • mediaelement-and-player.js ( it’s used by component-overlay.js to check for media players inside the overlay)
  • component-overlay.js
SXA Overlay Feature

Jorge Pimenta

Certified Sitecore Devoloper since 2017
Sitecore Hackathon 2019 winner in the Best Sitecore Experience Accelerator Module (Team Noesis)
Always seeking to do things more practical and smarter rather than harder.

Add comment