By default, the language switcher in Shopware (which manages the different shop languages) is displayed as a dropdown and is located at the very top of the header inside a <div> element with the class "top-bar". According to our design template, however, it needs to be placed in the main navigation and should look something like EN | DE.
For operations like these, it is always a good idea to have a local copy of the shop. This ensures that nothing is accidentally destroyed in the original version, and it also makes it easier to search for specific elements in the files.
First, to hide the language switcher and move it to the main menu, we search for elements containing „top-bar--language“.
In \themes\Frontend\Bare\frontend\index\topbar-navigation.tpl we hide (comment out) the code snippet {*action module=widgets controller=index action=shopMenu*} .
Under \themes\Frontend\Bare\widgets\index\shop_menu.tpl we change the "Select Element" to a "List".
In \themes\Frontend\Bare\frontend\index\main-navigation.tpl we add {action module=widgets controller=index action=shopMenu}.
We then style the new element in our .less file. To make this work, we modify the styling according to the following guide: https://jsfiddle.net/vivekkupadhyay/Lrxo62d7/.
We select the <input> elements by type (input[type="radio"]):
body nav.navigation-main .top-bar--language li input[type="checkbox"], body nav.navigation-main .top-bar--language li input[type="radio"] {
display: none;
font-size: 2em;
padding: .5rem .875rem .5rem .875rem;
z-index: 9999;
}
In the \themes\Frontend\Bare\widgets\index\shop_menu.tpl file, we assign for=““ attributes to the <label> elements (which correspond to the id=““ attributes of the respective <input> elements), allowing them to function as the radio buttons that have already been hidden. We then restyle the label elements:
body nav.navigation-main .top-bar--language li label {
font-weight: normal;
letter-spacing: 0.08rem;
color: #000;
}
Tested with Shopware 5.3.4!
