Shopify themes, liquid, logos, and UX
Good evening everyone,
I managed to duplicate the "Languages" button from the footer to the header.
However, I'd like to move it to the left of the 'search' icon and remove the 'languages' heading.
Can anyone tell me how to do this?
Thanks
site: www.bgbteam.shop (password: Apriliasxv550. with an ending dot)
Solved! Go to the solution
This is an accepted solution.
Hello @TEAMBGB ,
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<style>
.header__search localization-form h2.caption-large {
display: none;
}
.header__search localization-form > form {
padding: 0px !important;
}
.header__search localization-form > form .disclosure__button {
margin: 0px !important;
}
.header__search {
flex-direction: row-reverse;
}
</style>
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Hello @TEAMBGB
To remove the "Language" label from the Shopify DAWN theme header, you can follow these steps:
{% if settings.show_lang_picker %}
<div class="site-header__language site-header__icon--locale">
<span>{{ 'layout.header.language' | t }}</span>
{{ language_selector }}
</div>
{% endif %}
{% if settings.show_lang_picker %}
{{ language_selector }}
{% endif %}
.site-header__search {
order: 2;
}
.site-header__language {
order: 1;
}
This will move the "Languages" button to the left of the search icon.
I hope this helps!
Thanks, I tried and it was not working...
thanks anyway
Hi @TEAMBGB,
I am so glad that my solution can help.
Hi @TEAMBGB ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :
<style>
.header__search > localization-form > form> .no-js-hidden > h2#FooterLanguageLabel {
display: none;
}
details-modal.header__search {flex-direction: row-reverse;}
@media (min-width:767px){
form#FooterLanguageForm {
top: -22%;
position: relative;
}
}
</style>
Hope my answer will help you.
Best regards,
Victor | PageFly
This is an accepted solution.
Hello @TEAMBGB ,
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<style>
.header__search localization-form h2.caption-large {
display: none;
}
.header__search localization-form > form {
padding: 0px !important;
}
.header__search localization-form > form .disclosure__button {
margin: 0px !important;
}
.header__search {
flex-direction: row-reverse;
}
</style>
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Thanks a lot, exactly what i was looking for!
Hello @GemPages
I tried this and didn't work. Can you see mine please?
https://diversusoficialsite.myshopify.com/?_ab=0&_fd=0&_sc=1
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024