To enable a custom Page Template:

1. Click + ADD NEW and select Page Template. The Add Page Template pop-up window opens.

   

2. In the pop-up, click the dropdown to select a template.

3. Click CREATE.

4. The Custom Content Editor reveals.

5. Assign a Name for the template.

6. Under HTML, add some testing text at the top of the code, like: "Hello World". This testing text will aid in discovering whether or not the page overrides successfully.

   

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

   Alternatively, you can publish the page 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 page. 

9. Click SAVE.

   If there are no errors, then the pop-up will close, and the page adds to the Pages and Components List under the Page Templates tab.

Testing the Page Template

Test if the page is overriding correctly by opening your eCommerce Shop and navigating to the page's URL.

For example, for the Products page, navigate to: {client_ID}.shop.directscale.com/{webalias}/Products

If you can see the testing text that you added, you have successfully overridden the page.

Back in the Custom Pages admin, under the Page Templates tab, click your page template 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. When modifying the code, keep the settings references. For example, in the HTML, a settings reference generally looks like this:

ng-if="commonSetting.isShowGlobal['menuRight']"

'menuRight' being the reference to the toggle in eCommerce Admin > Company Setting > Settings > Global.

Keeping these references in the code allows them to function correctly, and You can quickly turn elements on and off.

Once complete, click SAVE.