Skip to main content

Template Customization

Customizing the theme in ECTOR can be easily managed whether you are using a local development environment or working on a remote web server.

Accessing Theme Files​

  • Local Development: If you have used the local development method, the themes folder is already linked to your local machine in the project's themes directory. You can access and modify the theme files directly from there.
  • Remote Development: If you are developing on a remote web server, all theme files are already available in your remote development environment without any additional configuration.

Creating a Child Theme​

To work on theme file customization, it is recommended to use the standard method of extending themes by creating a child theme. This approach offers several advantages:

  • Continuity of Changes: Customizations will be preserved even if the base theme is updated.
  • Maintainability: Improves code management by keeping modifications separate from the base theme.

Steps to Create a Child Theme​

  1. Create a Folder for the Child Theme: In the themes directory, create a new folder for your child theme. For example, if the base theme is ecwear, you might name the new folder ecwear-child.

  2. Add the Configuration File: Inside the child theme folder, create a config/theme.yml file with the following content:

    name: ecwear-child
    parent: ecwear

  3. Include Modified Files: Copy only the files you want to modify from the base theme to the child theme folder, maintaining the same directory structure. For example, to modify the header.tpl file, copy themes/ecwear/templates/_partials/header.tpl to themes/ecwear-child/templates/_partials/header.tpl and make the necessary changes.

  4. Activate the Child Theme: Access the Prestashop back office, go to the Design > Theme & Logo section, and select your child theme as the active theme.

Customization Tips​

  • Use Overrides: Use Prestashop's override functionality to customize files without directly modifying the base theme files.
  • Maintain a Clear Structure: Organize files within the child theme logically and consistently with the base theme structure.
  • Test Modifications: After each modification, test the site to ensure everything works correctly and that there are no compatibility issues.

Conclusion​

By following these steps, you can efficiently and safely extend and modify the ECTOR theme, maintaining the continuity of your customizations even through updates to the base theme.