Editing the theme (template) JKassa

Written by: JKassa Support | Hits: 2688

This tutorial shows how to change the parameters of a JKassa theme (template) and the HTML code in its files.

When you create an online store, you can customize its appearance and the behavior of its elements. You can change the style according to your brand and add functionality or special information related to your business.

Grow your business

You can apply for support to our specialists to create a theme for your online store, which will allow you to focus on other important points of your business.

What are the JKassa component templates?

A component template is a collection of files that control the layout and appearance of the component and JKassa modules. The component template is not responsible for the overall appearance of your entire site, the main Joomla template is responsible for this. To achieve maximum effect, the component template must inherit and blend in with the Joomla core template styles.

Most component templates have built-in parameters that you can easily configure without changing the code for the template files. To make deeper changes to your theme or make changes that are not available in the template settings, you need to make changes to the code of its files using the built-in HTML editor.

Most of the files that make up the JKassa component template have the extension .tpl and contain the code for the language Liquid. In addition to the Liquid code, the template files also contain HTML, CSS and JavaScript code. Other files can have different extensions.

Beginning of work

The first step is to go to the template editing page in the administrative part of the JKassa component (Components → JKASSA → Tools → Design).

edit_template_01

After selecting a template, you can configure it in two ways:

  1. Change the built-in parameters for your theme by going to the "Options" tab.
  2. Change the code of your theme by selecting the desired file in the list of template files on the "Editor" tab.

Template options

Template options allow you to change the appearance of some elements of your theme. The Settings tab displays a list of options that you can change.

To make changes to certain types of pages in your store, change the required option and save the changes. For example, if you want to display the product quantity selection field on the product list page, select Show in the Field for Quantity box (1), then click the Save button (2) to save the changes to the template settings.

edit_template_02

Editing HTML/CSS and other files

On the "Editor" tab you can edit existing files and add new ones.

Select the desired file from the list of template files (1) to edit it directly in the browser, in a special HTML code editor (2). The HTML editor allows you to edit the code of the files that make up your theme.

edit_template_03

After saving the template file (1), a copy will be created with your changes (2), which will be used in the external interface of the store to display its elements. With all subsequent saving of the copy file, the copy will be changed, not the default file. This allows you not to lose changes in the files when updating the component template. Files that have been changed are marked with a pencil icon (3).

edit_template_04

You can store an unlimited number of copies, but use only one.

To create a new copy of the file, switch to the default file (1) and save it again. The previous copy of the file (2) will remain inactive, and a new copy (3) will be responsible for the design of your theme.

edit_template_05

You can freely switch between your copies or return to the default file.

To delete a previously created copy, click on the "Delete file" icon in the right side of the button. The file will be deleted without the ability to restore it.

edit_template_06

After making all the changes, close the template editing screen by clicking the "Undo" button on the toolbar.

Warning!

If you do not use the free JKassa template or template from the JKassa store, we will not be able to help you if you have any problems with the code or settings. This is beyond the scope of our support service. But you can always contact the support forum to discuss your question.

Follow Us



Dark Mode

Select your language

This site uses cookies to provide you with our services. By using our website, you confirm that you have read our Privacy Policy and Terms of Use. Your use of this site and JKassa products is subject to these policies and conditions.