Theme Page Structure

Pages are individual text files that are rendered in a web browser to produce the storefront display. A given theme can contain many different types of pages. At a minimum, your theme must include a Home page, listing page, and profile page template (see Required files) in the appropriate folders within the theme.

A page uses HTML and the Nunjucks templating features to specify what is to be displayed in the browser. Most pages use the base layout (theme/content/layout/base.html) as a foundation, extending it to include blocks for data and for content. A page may refer to different assets such as banner images or CSS stylesheets, import macros and other templates, and use page objects and components.

See the Modify your first page video tutorial for a quick demonstration how to customize your theme, using the home page as an example, and Custom pages and profile page overrides for a demonstration of how to create custom pages and use custom data.

About the Home page

Your Home page is the first page that opens when customers visit your marketplace. It is the home.html file in the themes/themeName/content/pages/home/ folder of your theme.

In the marketplace, the Home page displays the Featured Applications tab by default, and can also include the All Applications tab. Your Home page can include banners, featured and popular applications, a list of categories that organize your products, and so on.

Basic structure of a Plaza Home page

The following example shows the basic structure of a sample Home page based on the Plaza theme:

{% extends "/layout/base.html" %}
{% block data %}
    <data type="navigator" />
{% endblock %}

{% block content %}
    <PageOrderableContainer name="PageOrderableContainer" 
id="PageOrderableContainer1"></PageOrderableContainer>
{% endblock %}

The simple data block and content block demonstrate the power of the Plaza theme's component-based approach.

Basic structure of a classic Home page

The following example shows the basic structure of a sample Home page based on the classic theme:

{% extends "/layout/base.html" %}
{% from "/macros/slider.html" import slider %}
    
{% block content %}
    {% include "/includes/search.html" %}
    <div id="mainRegion" class="adb-page--footer_helper adb-page--footer_unpopper">
            <div class="adb-layout-default">
                <div class="sap-header__primary_container">
                    {{ slider("Popular Apps", productLists.popularapps) }}
                    {{ slider("Staff Picks", productLists.staffpicks) }}
                </div>
            </div>
        </div>
    </div>
</div>
        
{% endblock %}

The following line of code structures the main layout for this page:

{% extends "/layout/base.html" %}

The Home page has a small number of block sections that extend the main layout. To change the layout of the Home page, change the HTML structure of /layout/base.html. If you do not plan to reuse the Home page layout, move it into home.html. See Template engine features for details.

The following line of code is an imported macro (or component) that is used later in the template:

{% from "/macros/slider.html" import slider %}

Your main content appears after block content and before endblock:

{% block content %}
...
{% endblock %}

The content in this section overrides the content block in /layout/base.html.

A static section is included to provide a search widget:

{% include "/includes/search.html" %}

The slider macro links to the data (or content) that you want to appear on your Home page. For example, the Popular Apps section appears on this marketplace's Home page:

    {{ slider("Popular Apps", productLists.popularapps) }}

See Create the header and footer to continue building your theme.