All Collections
Look and Feel
Theme Tweaker (X-Cart 5.4.x and earlier)
Adding Custom Elements to a Template (X-Cart 5.4.x and earlier)
Adding Custom Elements to a Template (X-Cart 5.4.x and earlier)

Learn how to add a custom element to a template with the help of the Template Editor tool.

Olga Tereshina avatar
Written by Olga Tereshina
Updated over a week ago

DISCLAIMER: The primary purpose of this article is to demonstrate how the Template Editor tool can help you find a template for editing, but not to describe all possible code alterations. HTML skills are required to customize the code.

In addition to changing the existing layout elements, the Template Editor tool allows creating new ones.

We will consider adding a country flag unit as a sample. The code responsible for adding a country flag is as follows:

<img src="{{ this.currentLanguage.flagURL }}" alt="" />

To add custom code to a template:

  1. Open the Template Editor tool in the tools bar at the bottom of any storefront page.


  2. Make sure you turn on the "Pick templates from page" toggle.


    To see the elements you can customize highlighted on the page, hover a mouse over them.

  3. Choose the appropriate template by navigating through the page elements.

    When you find the place where you want a country flag to display, click on it, and the Template Editor tool will show you the relevant code.
    In our sample, we will add a country flag to the header bar (crisp_white/customer/layout/header/


  4. Add the country flag code to the chosen template.
    In our sample, it will look as follows:


  5. Save the changes.


The changed template will be automatically renamed from crisp_white/customer/layout/header/ to theme_tweaker/customer/layout/header/ and will be listed on the Edited Templates page of your store Admin area (Look & Feel -> Edited Templates).

Related pages:

Did this answer your question?