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:
Open the Template Editor tool in the tools bar at the bottom of any storefront page.
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.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/header.bar.twig):
Add the country flag code to the chosen template.
In our sample, it will look as follows:
Save the changes.
The changed template will be automatically renamed from crisp_white/customer/layout/header/header.bar.twig to theme_tweaker/customer/layout/header/header.bar.twig and will be listed on the Edited Templates page of your store Admin area (Look & Feel -> Edited Templates).
Related pages: