Creating the custom section
The first thing we need to do is go to the "App_Plugins" folder and we will create a new folder inside it called "MyCustomProduct" and then create a "package.manifest" which will handle our configuration and custom views later on.
Register the custom section
To register our custom section there are two ways on how we can handle them.
• via package.manifest
• via c#
In this guide, we will implement it using c# for us to gain more control.
Create a new class called "MyCustomProductSection" that implements "ISection"
public class MyCustomProductSection : ISection
public string Alias => "myCustomProduct";
public string Name => "My Custom Product";
then we need to add this to the composer section pool by creating a new class called "MyCustomProductSectionComposer" that implements "IUserComposer".
public class MyCustomProductSectionComposer : IUserComposer
public void Compose(IUmbracoBuilder builder)
the snippet above will append the "MyCustomProductSection" after the "MediaSection" in the backoffice. then for us to see the custom section that we have implemented we need to assign it to a certain user first by going to the "Users" section and select your account then edit in the "Assign Access" tab. https://bit.ly/3BCSFNT
then add our custom section. https://bit.ly/2Wf8wSt,
after hitting save then refresh the page - we can now see our custom section! https://bit.ly/3zBRgW8
Creating the language translation
If you have noticed that there's a square bracket in our custom section [myCustomProduct] we need to create a language translation for this one.
Under "App_Plugins/MyCustomProduct" create a folder called "lang" and let's create an xml file called "en-us.xml" then copy the snippet below:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en" intName="English (US)" localName="English (US)" lcid="" culture="en-US">
<key alias="myCustomProduct">My Custom Product</key>
In the next part, we will create the tree nodes for our custom section, see you!