If you are working with SXA, you may have come to situation where you had to create your own MVC layout because you couldn’t use default SXA MVC layout.

When you have created your own MVC layout and set it on your Page template that is shared within your tenant, you have probably seen standard SXA placeholders – header, main and footer but also body-top placeholder:

NewSXALayout00

You have maybe asked yourself, where is this (body-top) placeholder coming from if the default SXA MVC Layout looks like this:

NewSXALayout05

No body-top placeholder, just expected header, main and footer placeholders.

Those special placeholders are coming from layout itself:

NewSXALayout06

Quick and dirty solution would be of course to remove highlighted lines from your custom layout file itself. Would that be good enough solution? Definitely no!

Two follow up questions would be:

Why are these placeholders hidden in default layout but propagated in your custom layout?

Is this magic?

It is not!

SXA uses body-top and other hidden placeholders (namely head and body-bottom) for it’s own functionality and hides these from default SXA MVC layout in Experience Editor.

Below is solution for this problem but first let’s describe the problem more in detail.

Problem definition

Let’s first take a look on how to create your own custom layout with SXA.

I have created my shiny new Sxa layout by copying default SxaLayout.cshtml. For sake of this post, I have named this file as “ShinyNewSxaLayout.cshtml” and placed it to the same location where is the original SXA layout:

NewSXALayout01

I have also created Layout item where I have defined path to my view file in Path field:

NewSXALayout02

Then, I have navigated to Templates/Project/name of my tenant/ Page/__Standard Values and set my custom layout item as Layout:

NewSXALayout03

After this, when I opened any page on that tenant, it had body-top placeholder visible:

NewSXALayout00

Problem solution

Solution is on configuration level where you need to set hidden placeholders for your new layout. Unfortunately, this feature is not documented in official SXA documentation.

Create config file to patch properly Sitecore config.

I have created ShinyNewLayout.config under App_Config/Include/Foundation folder under my Sitecore webroot.

File contains this content:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
 <sitecore>
  <experienceAccelerator>
   <mvc>
    <!-- List of placeholders which should be hidden. -->
    <hiddenPlaceholders>
     <layout id="$Insert_Your_Layout_ID_here$">
      <placeholder name="head"/>
      <placeholder name="body-bottom"/>
      <placeholder name="body-top"/>
     </layout>
    </hiddenPlaceholders>
   </mvc>
  </experienceAccelerator>
 </sitecore>
</configuration>

Where I have replaced $Insert_Your_Layout_ID_here$ with id of my custom layout item. In my case it was {3F0CD196-54BF-4E11-A428-032CE3E1DFBA}

NewSXALayout04

Refresh page and all “system” placeholders are gone 🙂 Placeholders are hidden (not exposed in Experience Editor) now!

NewSXALayout05

SXA all the things!