DISCLAIMER: The main purpose of this article is to show how the Template Editor tool can help you find a template for editing, but not to describe all possible code alterations. You should be skilled in .html to customize the code.

In addition to changing the existing layout elements, the Template Editor tool allows adding completely new elements. 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.

541-template-editor-on.png

2. Make sure the “Pick templates from page” toggle is turned on.

541-pick-templates-from-page-on.png

This will allow you to see the elements that can be customized highlighted on the page when hovering a mouse over them.

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

When you find the place you want a country flag to display at, 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/header.bar.twig):

541-template-editor-header-bar-twig.png

4. Add the country flag code to the chosen template.

In our sample, it will look as follows:

541-header-bar-twig-custom.png

5. Save the changes.

541-template-editor-save.png


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


Did this answer your question?