Can I get button samples ?

In this article, you'll find different examples of Weglot button display and you'll get tricks to improve yours.

1. Feel free to inspire!

2. How to define a button design (WP/Shopify)

Visit your WP/Shopify Dashboard > Language Button Appearance and select what suits your website.

Get more information here. 
WPHow can I change the Weglot button position?
ShopifyHow can I change the Weglot button position?

3. Add CSS rules 

Go to your  WP/Shopify Dashboard > Override CSS and enter the rules that suit your button.

Add a scroll down button: ul {
    display: block;
    max-height: 300px;
    overflow-y: auto;

Make a transparent button with no border and white writing: {
    background-color: transparent!important;
} .wgcurrent {
    border: none!important;
} ul {
    background-color: transparent!important;
    border: none!important;
.country-selector a {
    color: white!important;

Add capital letters and change the font of your languages (here 'CustomFont'):

.country-selector a {
    text-transform: uppercase;
    font-family: CustomFont, sans-serif;

  Remove the arrow from the button and change the color of the arrow to white: .wgcurrent:after {
    display: none!important;
} .wgcurrent:after {
    filter: invert(100%)!important; 

Still need help? Contact Us Contact Us