Accessing a Component Template

1. Click + ADD NEW and select Component Template. The Add Component Template configuration opens.

2. Click the dropdown to select Header.

3. Click CREATE.

4. The Custom Content Editor reveals.

5. Assign a Name for the template.

   For example, custom-Header

6. Under the CSS tab, make a minor change (such as the background color (around line 226)). This change will help test that the header has overridden successfully.

   

   CSS

   md-toolbar:not(.md-menu-toolbar) {
    background-color: var(--color1) !important;
    color: rgba(0, 0, 0, 1);
   }
   

   For testing purposes, you can change background-color: var(--color1) !important; to background-color: var(--color2) !important;. This changes the header's background color from Main Color to Accent Color #1. These colors are configured in the Branding page.

7. Click the Published toggle to publish the header component now after saving the configuration.

   Alternatively, you can publish the header component from the Pages and Components List by clicking the Publish icon.

8. Under the MFC tab, you'll find the Multi-Faceted Configuration (MFC) settings. Enter your specific configurations on who can view the header.

9. Click SAVE. If there are no errors, then the pop-up will close, and the header component adds to the Pages and Components List under the Component Templates tab.

Testing the Component

Test if the header is overriding correctly by opening your eCommerce Shop.

Customizing the Component

Back in the Custom Pages admin page, under the Component Templates tab, click your header name to expand the section, then click the Edit icon to reopen the configuration pop-up.

You can now make any customization to the HTML, JAVASCRIPT, and CSS code in the pop-up. Once complete, click SAVE.

📘Note

If you need answers, ideas, or consulting from an expert, see the DirectScale Marketplace.