Customizing Header and Footer of WSO2 API Manager Store

If you want to customize the header and footer of WSO2 API Manager Store application, this blog post will be explaining how to do that by adding a subtheme. 

Adding a Subtheme

1). Navigate to "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\subthemes" directory.

2). Create a directory with the name of your subtheme. Here I am going to create a subtheme called "test"

3). Edit "repository\deployment\server\jaggeryapps\store\site\conf\site.json" file as below. This makes your sub theme as the default theme.

"theme" : {

        "base" : "fancy",

  "subtheme" : "test"

    },

Customize Header:

As an example, Here I am going to remove theme selection menu item from store header (theme selection will be appearing after user login into the store).

1). Create a directory called "templates" inside your subtheme directory.

2). Copy "template.jag" located in "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\templates\user\login" 

into your new "templates" directory with the same "templates\user\login" directory structure.

3). To remove theme selection menu item, remove "<li class="dropdown settingsSection">...</li>" HTML tag section from the "template.jag". 

Customize Footer:

Here I am going to Remove documentation hyperlinks available in the API Store footer

1). Create a directory called "templates" inside your subtheme directory. Ignore this step if you have already done with the "Header customization"

2). Copy "template.jag" located in "\repository\deployment\server\jaggeryapps\store\site\themes\fancy\templates\page\base" 

 into your new "templates" directory with same "templates\page\base" directory structure.

3). To remove Docs link, you can find them inside the "row-fluid" div tag. Customize them according to your requirements.