Editing Client Panel Templates

The template editor allows you to customize client-facing views such as the Client Panel dashboard, login page, order page, thanks page etc. Templates are built using basic HTML as well as variables and functions in { curly braces }.

For an in-depth documentation on the template language used in SPP, check out Twig.

SPP Template Editor

The main template file in each folder is the layout.html file as it contains most of the page structure. The rest of the files are merely blocks extending the main layout.

Let’s look at some of the ways you could use the editor to customize your panel.

Changing the style of an element

First determine the element you want to edit by right clicking on it and choosing Inspect Element in your browser. In clients/layout.html or public/layout.html add your custom CSS rule just before the closing </head> tag. You can also add a link to an externally hosted stylesheet.

Adding custom information to the Client Panel homepage.

Edit clients/dashboard.html and add your text formatted as HTML anywhere in the content block.

Changing a text line

For translation purposes text in templates is displayed using the language function. Here’s an example of how that might look:

<button>{{ lang('login') }}</button>

To change, it simply replace the language function with your text:

<button>Sign In</button>

As always, feel free to contact us if you have any questions about the editor, or if you need help making a specific change.

Blank page after editing a template

That means there’s an error somewhere in your HTML. You can go back in the editor and try to fix it, or reset the template back to original. To reset a template, simply click the Reset link at the lower right corner of the editor.

Errors can be caused by code outside of the content block tags so add your code between {% block content %} and {% endblock %}. This doesn’t apply to layout.html files, which you can edit fully.

As always, feel free to contact us if you need any help with this.

Was this helpful? Give us a thumbs up…


Related Articles