Create the header and footer

The header and footer of your theme are universal and encapsulated, which means that they apply not only to the storefront, but to the entire AppDirect user interface—including administration pages. Because of this, some special rules apply:

• HTML and CSS are encapsulated—Every rule is encapsulated post processing, and you cannot use any styles that come from your base theme.
• The header and footer have their own components—You cannot modify these components, but you can style them using CSS classes.
• Only use HTML, CSS, or JavaScript—Template utilities (macros, filters, and so on) are not available.

See the Manage headers and footers video for a quick overview of the unique templating system for headers and footers, and how to customize them.

Caution

Use caution when modifying header or footer position or display properties, because such changes can interact with page elements across the platform beyond the storefront, such as login modals, in unexpected ways. Ensure that you test your changes thoroughly.

HTML theme files

The header and footer are a series of HTML files in your theme. After you open your project in a text editor, the following templates are available for the header and footer in themes/_themeName_/header-footer:

• logged-out.html—The header shown when the user is not logged in to the marketplace.
• logged-in.html—The header shown when the user is logged in to the marketplace.
• checkout.html—The header shown when the user is in the checkout flow. Note that only the logo of your marketplace appears.
• sso.html—The header shown when in any authorization flow (for example, logging in or two-factor authentication). Note that only the logo of your marketplace appears.
• footer.html—The footer shown on all pages in the marketplace.

tip

You can add a font file (it must be named header.woff) to your header-footer directory at themes/_themeName_/header-footer to customize the font of your header and footer.

The following code is an example of the logged-in.html template, which contains components that use brackets nomenclature, {{_componentName_}}. These components are internal to the platform. For a full list of available components, see Available header and footer tags.

<header id="">
    <div class="ad-uniheader">
        <div class="adb-layout-default">
            <div class="ad-uniheader__container">
                <nav aria-label="Marketplace Menu" class="ad-uniheader__container--section">
                    <h2 id="marketplace-menu-label" class="not-visible">Marketplace Menu</h2>
                    <ul class="ad-uniheader__container--section-left">
                        {{MPLOGO-COMPONENT}}
                        {{MYAPPS-DROPDOWN-COMPONENT}}
                        {{ICON-HOME-COMPONENT}}
                        {{ICON-APPWISE-COMPONENT}}
                        {{ICON-APPINSIGHT-COMPONENT}}
                        {{ICON-MARKETPLACE-COMPONENT}}
                    </ul>
                </nav>
 
                <div aria-label="Universal Search Bar" class="adsearch-universal">{{SEARCH_BOX}}</div>
 
                <nav aria-label="User Menu">
                    <h2 id="user-menu-label" class="not-visible">User Menu</h2>                
                    <ul class="ad-uniheader__container--section ad-uniheader__container--section-right">
                        {{COMPANY_DROPDOWN}}
                        {{MANAGE_DROPDOWN}}
                        <li class="ad-component_list--item ad-component_dropdown user-dropdown js-primary-nav-user-menu">
                            <a class="ad-component--link ad-component_dropdown--trigger" href="javascript:;">
                                {{ICON_USER_IMG}} {{USER_FIRSTNAME}}
                            </a>
                            {{USER_LIST}}
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

CSS theme files

The CSS for the header and footer are located in themes/_themeName_/header-footer/css. You can either modify the base CSS with the styling in SASS (header-index.scss) or you can create a new one. The header-index.css file is required for API calls.

note

If you do not want to style in SASS, ensure that only the header-index.css file exists in themes/_themeName_/header-footer/css. Remove the header-index.scss file.

Test the logged-in header with an access token

When you preview your theme in a browser, the logged-out header appears by default.

The developer toolbar does provide a simulated logged-in header view (see Header Views). For a more accurate changes to your logged-in header, you can obtain an access token from an active session on your production environment and enter it in the box. To do so, you must create an API client in the marketplace.

The access token is only used by the header. You have access to a limited amount of data from your account for security reasons.

To obtain an access token

📝 Note: If the AppDirect logo appears in the upper-left corner of the page, when Manage > Marketplace appears in this topic, click the grid icon > Switch to | Store, instead.

1. Log in to your marketplace.

2. Go to Manage > Marketplace > Settings > Integration | API Clients. The API Clients page opens.

3. Click Create API Client. The API Client Settings dialog opens.

4. Configure the API client as follows:

   1. Enter a name for the API client.
   2. Under Client Type, select Single page web application from the drop-down list.
   3. In the Redirect URL(s) box, enter the marketplace URL in the following format:

   https://_marketplaceUrl_/home

   where marketplaceUrl is your marketplace URL. For example:

   https://example.com/home  
   4. Under OpenID Connect scopes, select both options.
   5. Under User Level scopes, select all options.
   6. Make sure that the Persistent SSO checkbox is unchecked, and the Allowed IP addresses box is blank.

5. Click Save Settings. The client is created, and a message appears that includes the API client secret.

6. Record the secret from the confirmation message, and the Consumer Key of the API you created from the API client table.
   It is particularly important to note the secret, since this is the only time it is displayed. If you forget it, you will have to generate a new secret instead.

7. In a new browser tab, enter the following URL in the address bar:

https://_marketplaceUrl_.com/oauth2/authorize?client_id=_clientId_&client_secret=_clientSecret_&response_type=token&redirect_uri=https://_marketplaceUrl_.com/home&scope=ROLE_CHANNEL_ADMIN  

where marketplaceUrl is your marketplace URL, clientId is the Consumer Key from the API client table, and clientSecret is the secret from the confirmation message. For example:

https://example.com/oauth2/authorize?client_id=IBEBOshmJi&client_secret=ctO3zBU9aMMopAzFbpAi&response_type=token&redirect_uri=https://example.com/home&scope=ROLE_CHANNEL_ADMIN

8. Press Enter. The marketplace home page opens, and the URL contains the access token. For example:

https://example.com/home#access_token=**eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImRmNTV...4JfyrQymzQ**&token_type=bearer&expires_in=43199&scope=ROLE_BILLING_ADMIN%20ROLE_CORPORATE_ADMIN%20ROLE_CHANNEL_SUPPORT%20ROLE_DEVELOPER%20ROLE_USER%20ROLE_CHANNEL_ADMIN%20profile%20ROLE_CHANNEL_PRODUCT_SUPPORT%20ROLE_SALES_SUPPORT%20company%20ROLE_SYS_ADMIN%20email

9. Ensure that the Storefront Toolkit server is running. See Start the Toolkit.
10. Open a new browser and go to http://localhost:3555/en-US/home. The storefront opens and the developer tool appears on the right side of the page.
11. Expand the developer tool and click Header Views.
12. Under Logged-In, paste the value of the access_token in the Access Token box and click Go. The storefront is reloaded, and the header appears logged in to your marketplace.

Style HTML components

You can view the HTML structure of the component when it is rendered in the browser. Find each element by inspecting your browser and use your CSS knowledge to style the elements. The following image shows an example of the header structure of the My Profile drop-down component.