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!
User | RANK |
---|---|
196 | |
155 | |
78 | |
69 | |
66 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023