Solved

Remove "Language" label from DAWN theme header

TEAMBGB
New Member
5 0 0

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) 

 

Screenshot 2023-02-24 alle 00.03.10.png

Accepted Solution (1)

GemPages
Shopify Partner
5588 1261 1207

This is an accepted solution.

Hello @TEAMBGB ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1678329980101.png

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>

GemPages_2-1678330060467.png

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

Mubashir_H
Shopify Expert
84 4 13

Hello @TEAMBGB 

 

To remove the "Language" label from the Shopify DAWN theme header, you can follow these steps:

  • Go to your Shopify Admin panel and click on "Online Store" from the left-hand menu.
  • Click on "Themes" and then click on "Actions" > "Edit code" next to the DAWN theme.
  • From the left-hand menu, click on "Sections" and then click on "header.liquid" to open the file.
  • Locate the following code:

{% if settings.show_lang_picker %}
<div class="site-header__language site-header__icon--locale">
<span>{{ 'layout.header.language' | t }}</span>
{{ language_selector }}
</div>
{% endif %}

  • Replace the code with the following:

{% if settings.show_lang_picker %}
{{ language_selector }}
{% endif %}

  • Save the file and preview your store to ensure that the "Language" label has been removed from the header.
  • To move the "Languages" button to the left of the search icon, you will need to adjust the CSS styling for the header. You can do this by adding the following code to the "theme.scss.liquid" file:

.site-header__search {
order: 2;
}

.site-header__language {
order: 1;
}

This will move the "Languages" button to the left of the search icon.

  • Save the file and preview your store to ensure that the "Languages" button has been moved to the left of the search icon and the "Language" label has been removed.

I hope this helps!

SEO pro | speed Optimization expert | SEO content writer

Drop me a message on Whatsapp for Free consultation.
Hire me at Shopify Experts Marketplace

TEAMBGB
New Member
5 0 0

Thanks, I tried and it was not working...

 

thanks anyway

GemPages
Shopify Partner
5588 1261 1207

Hi @TEAMBGB,

 

I am so glad that my solution can help.  

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1785 3056

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

 

 

 

GemPages
Shopify Partner
5588 1261 1207

This is an accepted solution.

Hello @TEAMBGB ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1678329980101.png

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>

GemPages_2-1678330060467.png

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
TEAMBGB
New Member
5 0 0

Thanks a lot, exactly what i was looking for!

HELDERWRLD
Explorer
105 0 6

Hello @GemPages 
I tried this and didn't work. Can you see mine please?

https://diversusoficialsite.myshopify.com/?_ab=0&_fd=0&_sc=1