Button Gallery

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


1. Feel free to copy!


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 in your  WP/Shopify Dashboard > Override CSS and enter the rules that suits your button.

Add a scroll down button:

.wg-drop.country-selector:not(.closed) ul {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

Make a transparent button with no border and white writing:

.wg-drop.country-selector .wgcurrent {
    background-color: transparent!important;
    border: none!important;
}
.wg-drop.country-selector:not(.closed) 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:

.wg-drop.country-selector .wgcurrent:after {
    display: none!important;
}
		
.wg-drop.country-selector .wgcurrent:after {
    filter: invert(100%)!important; 
}
		

Still need help? Contact Us Contact Us