How Of Change Header Logo And Menu For Specific Market In Shopify

How Of Change Header Logo And Menu For Specific Market In Shopify

Customizing store logo and menu to reflect local culture, language, or symbols can make store more appealing to a specific market. This helps customers to feel more connected, increasing trust and engagement.

Customizing headers, logos, and menu for each market allows to use region-specific keywords, titles, and descriptions. This can improve store's ranking in local search results and attract more organic traffic.

1. Upload Logo

Code implementetion details

  • Navigate to Online Store > Themes.
  • Under your current theme, click on customization.
  • Add the section named custom liquid.
  • Paste the given code.


<style>
<!--{% if localization.market.handle == "china" %}

 a.header__heading-link {

 background: url(https://cdn.shopify.com/s/files/1/0515/6595/3190/files/techgig-logo-280823.png?v=1692528750) no-repeat center;

 background-size: contain; 

 display: block;

 width: 100px;

 height: 50px; 

 }

 a.header__heading-link img, 

 a.header__heading-link span, 

 a.header__heading-link .link--text, 

 a.header__heading-link .focus-inset { 

 visibility: hidden;

 }

 {% endif %}
--></style>
  • In the code there is url option paste the  url of your logo  that you want to show . 

url(https://cdn.shopify.com/s/files/1/0515/6595/3190/files/techgig-logo-280823.png?v=1692528750)

  • Save the changes

2. Update Menu

  • Navigate to Online Store > Themes.
  • Under your current theme, click on edit code .

Step1: Find header-drawer.liquid on your Theme code editor 

Step2: Copy the code at the top of the file header-drawer.liquid 


{% if localization.market.handle == "china" %}

   {% assign _new_menu = linklists.new-menu.links %}

  

{% else %}

   {% assign _new_menu = section.settings.menu.links %}

{% endif %}

 

Make sure to your menu handle

Step3: Replace Loop Itration Object With _new_menu


{%- for link in _new_menu -%}

Step4: Follow Same Step For header-dropdown-menu.liquid and header-mega-menu.liquid 

  • After save the all changes .

    •  

    Changing Menu and Logo Based on Market:

    • The default header and menu can be changed according to the selected market. For example, switching the market to China will change the header logo and menu items accordingly. This allows customization based on geographic regions.

    Creating a Custom Menu:

    • The first step is to create a custom menu by adding new items such as “Trending” and “Arrival.” This new menu is created in the website's navigation settings.

    Editing Code for Customization:

    • To customize the header and menu, you need to access the website’s code editor. The user is instructed to search for three specific files: header.liquid, header-dropdown, and header-mega.liquid.
    • Once located, a specific code must be pasted at the top of each file. Afterward, in the code loop, you must replace the existing menu name with the custom menu name created earlier. This change should be done in all three files.

    Customizing Header for Multiple Markets:

    • To display different headers for different markets, additional conditions (else conditions) are added to the code, allowing you to specify which header appears for each market.

    Changing the Logo for Different Markets:

    • To customize the logo for different markets, the user is directed to use a “custom liquid” option and paste specific code. By adding the URL of the logo for each market into this code, the logo will update accordingly.

    Final Steps:

    • After making all these changes, the user can return to the website’s customization page and check the results by switching between different markets.
    Back to blog
    null