customize the shape and size of the language selector

[AhsenZa]

Hello!
I am trying to customize the size and shape of the language selector. I am currently using theme Pipeline and language selector is from the app Hextom (app doesn't let me customize such details). This is the link of my website: Kream.ch 

Currently the selector looks like this:

However it is way too bulky, dropdown arros is also too far from letters, I am looking for something more discrete, as example picture below.

 

Thank you in advance!

[Moeed · Accepted solution]

Hey @AhsenZa 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.ht-tms-option__text.ht-tms-dropdown__list-item__label {
    width: 20px !important;
}
.ht-tms-option__item.ht-tms-dropdown__list-item.ht-tms-dropdown__flag-off {
    padding: 2px 24px 1px 7px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed · Accepted solution]

Hey @AhsenZa 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.ht-tms-option__text.ht-tms-dropdown__list-item__label {
    width: 20px !important;
}
.ht-tms-option__item.ht-tms-dropdown__list-item.ht-tms-dropdown__flag-off {
    padding: 2px 24px 1px 7px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AhsenZa]

Hi @Moeed,

Thank you for your solution and quick reply, works perfectly.
I have noticed tho that the selector on mobile becomes too small, is it possible to apply the code above only to the web version and leave the normal size for the mobile version? Thank you very much

[Moeed · Accepted solution]

Hey @AhsenZa 

Remove the previous code and add this new code with the same steps mentioned above.

<style>
@media screen and (min-width: 768px) {
.ht-tms-option__text.ht-tms-dropdown__list-item__label {
    width: 20px !important;
}
.ht-tms-option__item.ht-tms-dropdown__list-item.ht-tms-dropdown__flag-off {
    padding: 2px 24px 1px 7px !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AhsenZa]

Works!

Thanks a lot!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.