Customize text before the language selector

[InnoTier]

There was a currency selector before language selector, I hided it and now I want to add customized text(like: HK SAR - CHINA) just before the language selector. Is that possible? and how to do it?

https://innotier.com/

[rajweb]

Hi @InnoTier ,

Yes, it’s possible to add customized text (like “HK SAR - CHINA”) before the language selector on your Shopify store. Here’s how you can do it:

Follow these steps:

1. In your Shopify admin, go to Online Store > Themes.

2. Click on Actions > Edit Code.

Locate the File with the Language Selector:

1. You need to find the file where the language selector is located. This could be in the header.liquid file or within a specific snippet like language-picker.liquid or localization.liquid.

2. Check inside the Sections or Snippets folder for files related to the language selector.

Insert Customized Text:

1. Once you find the location of the language selector, you can add your custom text before it.

2. For example, if the language selector looks something like this:

{{ form | language_selector }}

3. You can add your customized text like this:

HK SAR - CHINA
{{ form | language_selector }}

Style the Text (Optional):

• You can add custom CSS to style the text if needed. For example:

HK SAR - CHINA
​

Save and Preview:

• After making the changes, click Save and preview your store to ensure the text appears as desired.
• If I managed to help you then, don’t forget to Like it and Mark it as Solution!

[InnoTier]

I add the code here and the text shows on the top to language selector.

Could you tell me where should I add the code? Thank you

[rajweb]

To add the customized text (“HK SAR - CHINA”) before the language selector in your Shopify store
Find the Language Selector Code:

1. Inside the header.liquid file, search for the language selector code. You can look for the following:

{{ form | language_selector }}

2. The language selector code might be wrapped inside a form or located within a list item
3. under the navigation.

Insert Customized Text:

1. Once you find the line with the language selector code, add your custom text directly above it. For example, you can insert:

HK SAR - CHINA
{{ form | language_selector }}

Example of Modified Code:

1. Your modified code in the header.liquid file should look something like this:

  HK SAR - CHINA
  {{ form | language_selector }}

You can wrap the text and selector in a

for better styling control.

[InnoTier]

What should I do if I want to add the customized text on the left of search?

https://innotier.com/

[rajweb]

Hi @InnoTier ,

Follow these steps:

1. go to Online Store > Themes.

2. and click Actions > Edit code.

3. In the left-hand side of the code editor, locate the header.liquid

4. Find the code for the search icon. It is typically wrapped inside a

   or

5. Add your custom text before the search icon, like so:

  HK SAR - CHINA
  {{ form | language_selector }}