Language choose in the header

[LAC1993]

hello my website is 

www.lateliercommerce.com 

password : Lac1234

due to design wants we removed the the footer from the home page therefore we don't have an the language  selector. 

i would like to put the language selector in the header next to the cart. 

thanks  

[topnewyork]

Hi @LAC1993 , kindly checkout the below given videos:

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[LAC1993]

in the video he is showing how to implement a flag into the header i would like to take the corrects language selector 

[namphan]

Hi @LAC1993,

Please send me the code of header.liquid and footer.liquid file, I will check and guide it for you

[namphan]

Hi @LAC1993,

Please send me the code for these 2 files, I will help you check it

[LAC1993]

{% comment %} Settings {% endcomment %}
{%- liquid
assign header_sticky = section.settings.header_sticky
assign header_transparent = section.settings.header_transparent
assign text_color = section.settings.text_color
assign style = section.settings.style
assign shop_name = shop.name | escape
assign cart_item_count = cart.item_count
if cart_item_count > 9
assign cart_item_count = '9+'
endif

assign header_position = 'relative'

capture header_class
echo 'site-header header--is-standard '
echo 'header--' | append: style

if header_transparent
echo ' header--transparent'
endif

if header_sticky
echo ' header--sticky'
assign header_position = 'absolute'
endif

unless logo_default or logo_transparent
echo ' header--no-logo'
endunless
endcapture
-%}

{%- comment -%} Check if there is only one logo set and show it always {%- endcomment -%}
{%- liquid
assign logo = section.settings.logo
assign logo_transparent = section.settings.logo_transparent
assign logo_height_small = 40
assign logo_width = section.settings.logo_max_width
assign logo_width_x2 = logo_width | times: 2
assign sizes = logo_width | append: 'px'
assign alt = logo.alt | default: shop.name | strip_html | escape
assign width = logo_width_x2
assign has_logo_image = false
assign single_logo = false

if logo and logo_transparent == blank
assign single_logo = true
elsif logo == blank and logo_transparent
assign single_logo = true
endif
-%}

{%- capture logo_default -%}
{%- if logo != blank -%}
{%- liquid
assign logo_classes = 'logo__image logo__image--default'
if single_logo
assign logo_classes = logo_classes | append: ' logo__image--single'
endif

assign logo_height = logo_width | divided_by: logo.aspect_ratio | round
if logo_height < 40
assign logo_height_small = logo_height
endif
assign logo_width_small = logo_height_small | times: logo.aspect_ratio | round
assign widths = logo_width_small | append: ', ' | append: logo_width | append: ', ' | append: logo_width_x2

render 'image' image: logo, loading: 'eager', width: width, widths: widths, sizes: sizes, alt: alt, modifier: logo_classes, show_backfill: false
-%}

{%- style -%}
.logo__image--default { width: {{ logo_width }}px; }
.header--has-scrolled .logo__image--default { width: {{ logo_width_small }}px; }
{%- endstyle -%}
{%- endif -%}
{%- endcapture -%}

{%- capture logo_transparent -%}
{%- if logo_transparent != blank -%}
{%- liquid
assign logo_classes = 'logo__image logo__image--transparent'
if single_logo
assign logo_classes = logo_classes | append: ' logo__image--single'
endif

assign logo_height = logo_width | divided_by: logo_transparent.aspect_ratio | round
if logo_height < 40
assign logo_height_small = logo_height
endif
assign logo_width_small = logo_height_small | times: logo_transparent.aspect_ratio | round
assign widths = logo_width_small | append: ', ' | append: logo_width | append: ', ' | append: logo_width_x2

render 'image' image: logo_transparent, loading: 'eager', width: width, widths: widths, sizes: sizes, alt: alt, modifier: logo_classes, show_backfill: false
-%}

{%- style -%}
.logo__image--transparent { width: {{ logo_width }}px; }
.header--has-scrolled .logo__image--transparent { width: {{ logo_width_small }}px; }
{%- endstyle -%}
{%- endif -%}
{%- endcapture -%}

{%- if logo_default != blank or logo_transparent != blank -%}
{%- assign has_logo_image = true -%}
{%- endif -%}

{%- style -%}
:root { --header-position: {{ header_position }}; }

{%- if text_color != 'rgba(0,0,0,0)' and text_color != blank -%}
.header--transparent.site-header { --text: {{ text_color }} }
{%- endif -%}

{%- unless header_transparent -%}
@media screen and (max-width: 479px) {
.shopify-section:first-child .banner--transparent-header,
.template-page .banner--transparent-header { --header-initial-height: 25px; }
}
{%- endunless -%}
{%- endstyle -%}

{%- capture search_popdown -%}
<header-search-popdown>
<details>
<summary class="search-popdown-bar" aria-haspopup="dialog" data-popdown-toggle title="{{ 'search.search' | t }}">
{%- render 'icon-search' -%}
<span class="visually-hidden">{{ 'search.search' | t }}</span>
</summary>

{%- render 'header-search-popdown' -%}

<span class="drawer__underlay" data-popdown-underlay></span>
</details>
</header-search-popdown>
{%- endcapture -%}

<header
class="{{ header_class }}"
data-section-id="{{ section.id }}"
data-section-type="header"
data-transparent="{{ header_transparent }}"
data-header
data-header-height
data-scroll-lock-fill-gap>
<div class="container">
<div class="row">
<h1 class="nav-item logo{% unless has_logo_image %} logo--text-only{% endunless %}{% if settings.type_nav_caps %} caps{% endif %}">
{%- if has_logo_image -%}
<a href="{{ routes.root_url }}" class="logo__image-link visible-nav-link" data-width="{{ section.settings.logo_max_width }}" aria-label="{{ shop_name }}" data-logo-image>
{%- if logo_transparent != blank -%}
{{- logo_transparent -}}
{%- endif -%}

{%- if logo_default != blank -%}
{{- logo_default -}}
{%- endif -%}
</a>

{%- else -%}
<a id="shopName" class="logo__text" href="{{ routes.root_url }}" data-logo-text>{{ shop_name }}</a>
{%- endif -%}
</h1>

<div class="header-fix-cont">
<div class="header-fix-cont-inner">
<nav class="nav-standard nav-main{% if settings.type_nav_caps %} caps{% endif %}" data-nav-main>
{%- render 'navigation', is_hamburger_nav: false -%}
</nav>

<div class="header__icons" data-header-icons>
<a href="#menu" class="menuToggle" data-target="nav" aria-expanded="false" aria-label="{{ 'general.accessibility.menu_toggle' | t }}" data-menu-toggle>
<div id="hamburger-menu" class="icon-menu" data-hamburger-icon>
<div class="diamond-bar"></div>
<div id="hamburger-bar" class="icon-bar"></div>
</div>
</a>

{%- if shop.customer_accounts_enabled -%}
<a href="{{ routes.account_url }}" class="nav-item nav-account-link{% unless settings.show_search %} nav-account-link--no-search{% endunless %}" aria-label="{{ 'general.accessibility.account' | t }}">
{%- render 'icon-user' -%}
</a>
{%- endif -%}

{%- if settings.show_search -%}
{{ search_popdown }}
{%- endif -%}

<a id="cartTotal" href="{{ routes.cart_url }}" class="nav-item cartToggle{% if settings.cart_icon == 'circle' %} cartToggle--circle{% endif %}{% if cart.item_count == 0 %} cartToggle--empty{% endif %}" data-cart-toggle aria-expanded="false" aria-label="{{ 'general.accessibility.cart' | t }}">
{%- if settings.cart_icon == 'cart' -%}
{%- render 'icon-cart' -%}
{%- else -%}
{%- render 'icon-circle' -%}
<div class="cartToggle-items" data-cart-items-count>{{ cart_item_count }}</div>
{%- endif -%}
</a>
</div>
</div>
</div>
</div>
</div>

<div class="header-cartPopover" data-popover></div>

<template data-popover-template>
<div class="popover-inner">
<div class="popover-item-heading" data-popover-heading>{{ 'cart.labels.items_added' | t }}</div>
<div class="popover-item-thumb">
<div class="image-wrapper lazy-image" style="--aspect-ratio: 1;" data-popover-image></div>
</div>
<div class="popover-item-info">
<span class="popover-item-title" data-popover-title></span>
<span class="popover-item-variant" data-popover-variant></span>
<span class="popover-item-selling-plan" data-popover-selling-plan></span>
<div class="popover-item-properties" data-popover-item-props></div>
<span class="popover-item-price" data-popover-item-price></span>
<span class="popover-item-unit-price" data-popover-unit-price></span>
</div>
</div>
</template>
</header>

{% comment %} Site Navigation {% endcomment %}
<nav class="nav-hamburger nav-main{% if settings.type_nav_caps %} caps{% endif %}" data-nav-main>
<button class="nav-mobile-close" aria-expanded="false" aria-label="{{ 'general.accessibility.menu_toggle' | t }}" data-menu-toggle>
{%- render 'icon-close' -%}
</button>
<div class="nav-inner" data-hamburger-scrollable>
<div class="nav-inner-wrapper">
{%- render 'navigation', is_hamburger_nav: true -%}
</div>
</div>
</nav>

<div class="overlay"></div>

{%- if template != 'cart' and settings.enable_ajax_cart -%}
<div class="cart-drawer">
{%- render 'site-cart' -%}
</div>
{%- endif -%}

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{%- if section.settings.logo or section.settings.logo_transparent -%}
{%- if section.settings.logo -%}
{%- assign logo = section.settings.logo -%}
{%- elsif section.settings.logo_transparent -%}
{%- assign logo = section.settings.logo_transparent -%}
{%- endif -%}
{%- assign image_size = logo.width | append:'x' -%}

"logo": {{ logo | img_url: image_size | prepend: "https:" | json }},
{%- endif -%}
"sameAs": [
{{ settings.instagram_link | json }},
{{ settings.facebook_link | json }},
{{ settings.twitter_link | json }},
{{ settings.youtube_link | json }},
{{ settings.vimeo_link | json }},
{{ settings.pinterest_link | json }},
{{ settings.tumblr_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{%- if template.name == 'index' -%}
{%- assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" -%}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{%- endif -%}

{% schema %}
{
"name": "Header",
"class": "shopify-section-header",
"settings": [
{
"type": "checkbox",
"id": "header_sticky",
"label": "Enable sticky header",
"default": true
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "Used on the other pages and on scroll when the header is sticky"
},
{
"type": "range",
"id": "logo_max_width",
"label": "Width",
"info": "Max logo height is 100px",
"min": 50,
"max": 400,
"default": 100,
"step": 5,
"unit": "px"
},
{
"type": "header",
"content": "Menus"
},
{
"type": "link_list",
"id": "menu_list",
"label": "Primary menu"
},
{
"type": "header",
"content": "Navigation settings"
},
{
"type": "select",
"id": "style",
"label": "Style",
"default": "logo-center-links-left",
"options": [
{ "value": "logo-left-links-right", "label": "Menu right, logo left" },
{ "value": "logo-left-links-center", "label": "Menu center, logo left" },
{ "value": "logo-center-links-left", "label": "Menu left, logo center" },
{ "value": "logo-center-links-center", "label": "Menu center, logo center" }
]
},
{
"type": "header",
"content": "Mega menu"
},
{
"type": "image_picker",
"id": "meganav_image",
"label": "Image",
"info": "Recommended size: 500 x 800 px"
},
{
"type": "range",
"id": "image_aspect_ratio",
"label": "Image aspect ratio",
"min": 0.5,
"max": 1.5,
"step": 0.1,
"unit": ":1",
"default": 1
},
{
"type": "text",
"id": "meganav_image_heading",
"label": "Heading"
},
{
"type": "url",
"id": "meganav_image_link",
"label": "Link"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "header_transparent",
"label": "Enable transparent header",
"default": true,
"info": "If only the first section has fullscreen background image or video."
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "logo_transparent",
"label": "Logo",
"info": "Used on Home and Collection pages when the header is transparent"
}
],
"enabled_on": {
"groups": ["header"]
}
}
{% endschema %}

[LAC1993]

footer : 

{%- liquid
assign color_footer_text = section.settings.color_footer_text
assign color_footer_bg = section.settings.color_footer_bg
assign color_footer_bottom_bg = section.settings.color_bottom_bar_bg
assign color_footer_bottom_contrast = color_footer_bottom_bg | color_contrast: color_footer_text

if color_footer_bottom_contrast < 4.5
assign color_footer_bottom_bg_lightness = color_footer_bottom_bg | color_brightness
if color_footer_bottom_bg_lightness < 50
assign color_footer_bottom_text = color_footer_bottom_bg | color_lighten: 70
else
assign color_footer_bottom_text = color_footer_bottom_bg | color_darken: 70
endif
else
assign color_footer_bottom_text = color_footer_text | color_modify: 'alpha', 0.7
endif
-%}

{%- style -%}
:root {
--COLOR-FOOTER-TEXT: {{ color_footer_text }};
--COLOR-FOOTER-PLACEHOLDER-TEXT: {{ color_footer_text | color_modify: 'alpha', 0.5 }};
--COLOR-FOOTER-BG: {{ color_footer_bg }};
--COLOR-FOOTER-BG-HOVER: {{ color_footer_text | color_modify: 'alpha', 0.05 }};
--COLOR-FOOTER-BOTTOM-TEXT: {{ color_footer_bottom_text }};
--COLOR-FOOTER-BOTTOM-BG: {{ color_footer_bottom_bg }};
--COLOR-FOOTER-BOTTOM-BG-HOVER: {{ color_footer_bottom_text | color_modify: 'alpha', 0.05 }};
--COLOR-FOOTER-BOTTOM-BORDER: {{ color_footer_bottom_text | color_modify: 'alpha', 0.1 }};

--footer-grid: repeat({{ section.blocks.size }}, minmax(0, auto));
}
{%- endstyle -%}

{%- liquid
capture top_footer_style
echo '--PT:' | append: section.settings.padding_top | append: 'px;'
endcapture

capture bottom_footer_style
echo '--PB:' | append: section.settings.padding_bottom | append: 'px;'
endcapture
-%}

<footer class="site-footer" data-section-type="footer" data-section-id="{{ section.id }}" data-footer>
{%- if section.blocks.size > 0 -%}
<div class="footer__top section-padding" style="{{ top_footer_style }}">
<div class="container">
{% comment %} Footer top - logo, menus, text, newsletter {% endcomment %}
<div class="footer__inner">
<div class="footer__blocks">
{%- for block in section.blocks -%}
{%- assign mobile_hide_block = block.settings.mobile_hide_block -%}

{%- case block.type -%}
{%- when 'logo' -%}
<div class="footer__block footer__block--logo{% if mobile_hide_block %} med_hide{% endif %}"
style="width: {{ block.settings.logo_width | append: 'px' }};"
{{ block.shopify_attributes }}>
{%- if block.settings.logo -%}
<a href="{{ routes.root_url }}" class="footer__logo">
{%- liquid
assign logo_width = block.settings.logo_width
assign logo_width_x2 = logo_width | times: 2
assign sizes = logo_width | append: 'px'
assign widths = logo_width | append: ', ' | append: logo_width_x2
assign alt = shop.name

render 'image' image: block.settings.logo, width: logo_width_x2, widths: widths, sizes: sizes, alt: alt
-%}
</a>
{%- else -%}
<div class="placeholder-wrapper--footer">
<div class="footer__logo--placeholder">
{{- 'image' | placeholder_svg_tag: 'placeholder-svg' -}}
</div>
</div>
{%- endif -%}
</div>

{%- when 'menu' -%}
{%- assign menu = block.settings.menu -%}
{%- assign title = block.settings.title -%}
<div class="footer__block footer__block--menus {% if mobile_hide_block %}med_hide{% endif %}" {{ block.shopify_attributes }}>
{%- if menu != blank or title != blank -%}
<div class="footer__block-menu" >
{%- if title != blank -%}
<p class="footer__block__title">{{ title }}</p>
{%- endif -%}

{%- if menu != blank -%}
<ul>
{%- for link in linklists[menu].links -%}
<li class="footer__block__menu-link">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endif -%}
</div>

{%- when 'text' -%}
<div class="footer__block footer__block--text {% if mobile_hide_block %}med_hide{% endif %}" {{ block.shopify_attributes }}>
{%- assign title = block.settings.title -%}
{%- assign text = block.settings.text -%}
{%- if text != blank -%}
{%- if title != blank -%}
<p class="footer__block__title">{{ title }}</p>
{%- endif -%}

{%- if text != blank -%}
<div class="footer__block__text" >{{ text }}</div>
{%- endif -%}
{%- endif -%}
</div>

{%- when 'newsletter' -%}
<div class="footer__block footer__block--newsletter {% if mobile_hide_block %}med_hide{% endif %}" {{ block.shopify_attributes }}>
{%- assign title = block.settings.title -%}
{%- assign content = block.settings.content -%}

{%- if title != blank -%}
<p class="footer__block__title">{{ title }}</p>
{%- endif -%}

{%- if content != blank -%}
<div class="footer__block__text">
<p>{{ content }}</p>
</div>
{%- endif -%}

{%- render 'newsletter' -%}
</div>

{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
{%- endif -%}

{% comment %} Bottom bar - Payment icons, text, copyright, social icons, menu {% endcomment %}
{%- liquid
assign menu = section.settings.menu
assign show_social_icons = section.settings.show_social_icons
assign enable_follow_on_shop = section.settings.enable_follow_on_shop
-%}

<div class="footer__bottom section-padding" style="{{ bottom_footer_style }}">
<div class="container">
<div class="footer__bottom__wrapper">
<div class="footer__bottom__right">
{%- if section.settings.show_payment_icons -%}
<div class="footer__payment">
{%- render 'payment-icons' -%}
</div>
{%- endif -%}

{%- if show_social_icons or shop.features.follow_on_shop? and enable_follow_on_shop -%}
{%- render 'social-links' -%}
{%- endif -%}

{%- if menu -%}
{%- if linklists[menu].links != empty -%}
<div class="footer__menu">
<ul class="footer__menu__links">
{%- for link in linklists[menu].links -%}
<li class="footer__menu__item{% if forloop.first %} footer__menu__item--first{% endif %}">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endif -%}
</div>

<div class="footer__bottom__left">
{%- render 'cross-border' -%}

<div class="footer__copyright">
<p>&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: '/' }}</p>
<p data-powered-link>{{ powered_by_link }}</p>
</div>
</div>
</div>
</div>
</div>
</footer>

{% schema %}
{
"name": "Footer",
"max_blocks": 5,
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "color_footer_text",
"label": "Text",
"default": "#222222"
},
{
"type": "color",
"id": "color_footer_bg",
"label": "Background",
"default": "#ffffff"
},
{
"type": "color",
"id": "color_bottom_bar_bg",
"label": "Bottom bar background",
"default": "#fafafa"
},
{
"type": "header",
"content": "Bottom bar"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons",
"default": true
},
{
"type": "checkbox",
"id": "show_social_icons",
"label": "Show social icons",
"default": true
},
{
"type": "link_list",
"id": "menu",
"label": "Choose Menu",
"default": "footer",
"info": "This menu won't show dropdown items"
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Country/Region selector",
"info": "To add a country/region, go to your [markets settings](/admin/settings/markets)."
},
{
"type": "checkbox",
"id": "show_country_selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "checkbox",
"id": "show_country_name",
"label": "Show country name",
"default": false
},
{
"type": "checkbox",
"id": "show_country_flag",
"label": "Show country flag",
"default": true
},
{
"type": "header",
"content": "Follow on Shop",
"info": "Display follow button for your storefront on the Shop app. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
},
{
"type": "checkbox",
"id": "enable_follow_on_shop",
"default": false,
"label": "Enable Follow on Shop"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 30
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 20
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "range",
"id": "logo_width",
"min": 60,
"max": 180,
"step": 10,
"unit": "px",
"label": "Logo width",
"default": 150
},
{
"type": "checkbox",
"id": "mobile_hide_block",
"label": "Hide block on mobile",
"default": false
}
]
},
{
"type": "menu",
"name": "Menu",
"limit": 5,
"settings": [
{
"type": "link_list",
"id": "menu",
"default":"main-menu",
"label": "Choose Menu",
"info": "This menu won't show dropdown items"
},
{
"type": "text",
"id": "title",
"label": "Heading"
},
{
"type": "checkbox",
"id": "mobile_hide_block",
"label": "Hide block on mobile",
"default": false
}
]
},
{
"type": "text",
"name": "Text",
"limit": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Information"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default":"<p>This text block is a great place to discuss shipping policies, or terms and conditions info.</p>"
},
{
"type": "checkbox",
"id": "mobile_hide_block",
"label": "Hide block on mobile",
"default": false
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "textarea",
"id": "content",
"label": "Text"
},
{
"type": "checkbox",
"id": "mobile_hide_block",
"label": "Hide block on mobile",
"default": false
}
]
}
],
"enabled_on": {
"groups": ["footer"]
}
}
{% endschema %}

[namphan]

Hi @LAC1993,

Please send me more code of header.liquid file, I will check it

[namphan]

Hi @LAC1993,

Please go to header.liquid file and add code here:

Code:

{%- render 'cross-border' -%}

[Finer]

@LAC1993 just a brief reminder that the legal pages (in France) must be available throughout the complete shop. Therefore, you should think about not removing the footer…

[LAC1993]

 i have in all pages. 

[Finer]

@LAC1993 all, just the homepage is missing the legal links 😉