Shopify - Design - How can I customize the button (with CSS rules) ; Advanced
In this article, you'll find how to customize your Weglot button using CSS rules.
1. Drop down button
You can find in that image, the HTML simplified structure of the Weglot button:
a. wg-notranslate is an attribute which is used to prevent the Weglot button from being translated into the translated web page.
b. onclick="openClose(this);" allows to scroll the list or retract it.
c. wg-flags refers to an HTML class which manage some rules common to all the flags in the same sort
d. flag-3 refers to the type of flags
e. ::before refers to the flag corresponding to the language contained in the link.
f. ::after refers to the arrow on the button
Here are several examples to customize your Weglot button:
|Move the Weglot button:|| Remove the arrow on the button:
| Change the background of the list:
|| Add a scroll bar in the list:
|Remove the border on the button:||Add some padding/margin in the menu (see below):|
To add these CSS rules, go to your website back office > Weglot settings > Override CSS and paste them in the box. Click on "Save" to forward this modifications on your live website.
2. Languages icons
You can find in that second image, the HTML simplified structure of the Weglot list when it's directly as languages icons:
(See the description above for specific class)