How do I change the desktop login and cart tab to just and Icon

[MytreetyAdmin]

Hi I want to change the current login and cart tab to just the ICONS I get when I go to the mobile version for example.

[KetanKumar]

@MytreetyAdmin

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[MytreetyAdmin]

@KetanKumar , thank you here is the url:

Mytreety | Main page

[KetanKumar]

@MytreetyAdmin

can you please share your header code

[MytreetyAdmin]

@KetanKumar Here is the following theme.liquid code:

{% include "load-metafields" %}

{%- capture seo_page_title -%}
{%- if request.page_type == ‘search’ and search.terms != blank -%}
{{ search.terms | split: ’ AND ’ | last | split: ‘product_type:’ | last }} - {{ shop.name }}
{%- else -%}
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ’ %} – {{ ‘general.meta.tags’ | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ ‘general.meta.page’ | t: page: current_page }}{% endif %}
{%- endif -%}
{%- endcapture -%}

{{- seo_page_title -}}

{%- if page_description -%}

{%- endif -%}

{%- if settings.favicon -%}

{%- endif -%}

{%- comment -%}Few prefech to increase performance on commonly used third-parties{%- endcomment -%}

{% render ‘social-meta-tags’ %}
{% render ‘css-variables’ %}

{{ content_for_header }}

{% render ‘microdata-schema’ %}

{%- if request.page_type == ‘customers/addresses’ -%}

{%- endif -%}

{%- if request.page_type != ‘cart’ -%}

{%- endif -%}
{% capture cur %}{% include “booster-currency” %}{% endcapture %}{% unless cur contains “Liquid error” %}{{ cur }}{% endunless %}
{% render ‘translation-lab-language-management’ %}

{{ 'general.accessibility.skip_to_content' | t }}

{% section ‘announcement-bar’ %}

{%- unless request.page_type == ‘cart’ -%}
{%- comment -%}As required by Shopify rules, popup must be removed on cart page to remove distraction{%- endcomment -%}
{% section ‘popups’ %}
{%- endunless -%}

{% section ‘header’ %}

{{ content_for_layout }}

{%- if request.page_type == ‘blog’ or request.page_type == ‘article’ or request.page_type == ‘page’ -%}
{% section ‘static-newsletter’ %}
{%- endif -%}

{% section ‘text-with-icons’ %}
{% section ‘footer’ %}

• {{ 'general.accessibility.new_window' | t }}

{% include “bc_banner” %}

{% include ‘globo.menu.script’ %}

[KetanKumar]

@MytreetyAdmin

thanks for code bt we need this file code

{% section ‘header’ %}

[MytreetyAdmin]

@KetanKumar no worries its abit lengthy though

{%- capture section_settings -%}
{
“navigationLayout”: {{ section.settings.desktop_navigation_layout | json }},
“desktopOpenTrigger”: {{ section.settings.desktop_navigation_open_trigger | json }},
“useStickyHeader”: {{ section.settings.enable_sticky_header | json }}
}
{%- endcapture -%}

{%- assign navigation_menu_handle = section.settings.navigation_menu | default: ‘main-menu’ -%}
{%- assign navigation_menu = linklists[navigation_menu_handle] -%}

{%- comment -%} -------------------------------------------------------------------------------------- MOBILE NAV -------------------------------------------------------------------------------------- {%- endcomment -%}

{%- if navigation_menu.links.size > 0 -%}

{%- render 'icon', icon: 'hamburger-mobile' -%} {%- render 'icon', icon: 'close' -%}

{%- render ‘mobile-menu’, menu: navigation_menu -%}

{%- endif -%}

{%- comment -%}

DESKTOP NAV

{%- endcomment -%}

{%- if section.settings.desktop_navigation_layout == ‘condensed’ and navigation_menu.links.size > 0 -%}

{%- render 'icon', icon: 'hamburger' -%} {{- 'header.navigation.menu' | t -}}

{%- render ‘desktop-menu’, menu: navigation_menu, index: ‘desktop-menu-0’ -%}

{%- endif -%}

{%- comment -%}

LOGO COMPONENT

{%- endcomment -%}

{%- capture header_logo -%}

{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
{{ shop.name }}

{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- endcapture -%}

{%- if request.page_type == ‘index’ -%}

{{ header_logo }}

{%- else -%}

{{ header_logo }}

{%- endif -%}

{%- comment -%}

SEARCH COMPONENT

{%- endcomment -%}

{%- assign search_menu = linklists[section.settings.search_menu] -%}

{{ 'header.search.clear' | t }} {% render 'icon', icon: 'close' %}

{%- comment -%}The type detection is sometimes a bit inaccurate as it returns empty type, so we do an additional logic{%- endcomment -%}

{%- assign has_at_least_one_type = false -%}
{%- for product_type in shop.types -%}
{%- if product_type != blank -%}
{%- assign has_at_least_one_type = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if section.settings.show_search_filter and has_at_least_one_type -%}

{{ 'header.search.all_categories' | t }} {%- render 'icon', icon: 'arrow-bottom' -%} {{ 'header.search.all_categories' | t }} {%- for product_type in shop.types -%} {%- if product_type != blank -%} {{ product_type | escape }} {%- endif -%} {%- endfor -%}

{%- endif -%} {%- render 'icon', icon: 'search' -%} {%- render 'icon', icon: 'search-loader' -%}

{{ 'header.search.close_search' | t }}

{%- for i in (1..3) -%}

{%- endfor -%}

{%- comment -%}Placeholder div for real results{%- endcomment -%}

{%- if search_menu.links.size > 0 -%}

{%- if section.settings.show_search_menu_title -%}

{{ search_menu.title }}

{%- endif -%}

{%- for link in search_menu.links -%}
• {{ link.title }}
{%- endfor -%}

{%- endif -%}

{%- comment -%}

HEADER ACTIONS

{%- endcomment -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{%- if locale_selector -%}

{%- form 'localization', id: 'localization_form_header_locale' -%} {{ 'header.general.language' | t }}

{{ form.current_locale.endonym_name | capitalize }} {% render 'icon', icon: 'arrow-bottom' %}

{%- render 'icon', icon: 'nav-triangle-borderless' -%}

{%- for locale in form.available_locales -%}
• {{- locale.endonym_name | capitalize -}}
{%- endfor -%}

{%- endform -%}

{%- endif -%}

{%- if currency_selector -%}

{%- form 'localization', id: 'localization_form_header_currency' -%} {{ 'header.general.currency' | t }}

{{ form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol }}{% endif %} {% render 'icon', icon: 'arrow-bottom' %}

{%- render 'icon', icon: 'nav-triangle-borderless' -%}

{%- for currency in form.available_currencies -%}
• {{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %}
{%- endfor -%}

{%- endform -%}

{%- endif -%}

{%- if section.settings.show_condensed_search -%}

{% render 'icon', icon: 'search' %}

{%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{%- if customer -%} {{ 'header.general.welcome' | t: first_name: customer.first_name | truncate: 20 }} {%- else -%} {{ 'header.general.login' | t }} {%- endif -%}

{%- render 'icon', icon: 'account' -%} {%- render 'icon', icon: 'close' -%}

{{ ‘header.general.account’ | t }} {% render ‘icon’, icon: ‘arrow-bottom’ %}

{%- render 'icon', icon: 'nav-triangle-borderless' -%}

{%- if customer -%}

{{ 'customer.general.orders' | t }} {{ 'customer.general.addresses' | t }} {{ 'customer.general.logout' | t }}

{%- else -%}

{%- comment -%}LOGIN{%- endcomment -%}

{%- form 'customer_login', name: 'login', class: 'form', id: 'header_customer_login' -%}

{{ 'customer.login.login' | t }}

{{ 'customer.login.description' | t }}

{{ 'customer.login.email' | t }}

{{ 'customer.login.password' | t }}

{{ ‘customer.login.submit’ | t }}
{%- endform -%}

{{ 'customer.login.new_customer' | t }} {{ 'customer.login.create_your_account' | t }}

{{ 'customer.login.lost_password' | t }} {{ 'customer.login.recover_password' | t }}

{%- comment -%}RECOVER{%- endcomment -%}

{%- form 'recover_customer_password', name: 'recover', class: 'form' -%}

{{ 'customer.recover_password.recover_password' | t }}

{{ 'customer.recover_password.description' | t }}

{{ 'customer.recover_password.email' | t }}

{{ ‘customer.recover_password.submit’ | t }}
{%- endform -%}

{{ 'customer.recover_password.remembered_your_password' | t }} {{ 'customer.recover_password.back_to_login' | t }}

{%- comment -%}REGISTER{%- endcomment -%}

{%- form 'create_customer', name: 'create', class: 'form' -%}

{{ 'customer.register.create_account' | t }}

{{ 'customer.register.description' | t }}

{%- if request.locale.iso_code == ‘ja’ -%}

{{ 'customer.register.last_name' | t }}

{{ 'customer.register.first_name' | t }}

{%- else -%}

{{ 'customer.register.first_name' | t }}

{{ 'customer.register.last_name' | t }}

{%- endif -%}

{{ 'customer.register.email' | t }}

{{ 'customer.register.password' | t }}

{{ ‘customer.register.submit’ | t }}
{%- endform -%}

{{ 'customer.register.already_have_account' | t }} {{ 'customer.register.login' | t }}

{% endif %}

{%- endif -%}

{%- render 'icon', icon: 'cart' -%} {{ cart.item_count }}

{%- render ‘icon’, icon: ‘close’ -%}

{{ ‘header.general.cart’ | t }}

{%- if settings.cart_type != ‘page’ and template != ‘cart’ -%}
{%- render ‘mini-cart’ -%}
{%- endif -%}

{%- if section.settings.desktop_navigation_layout == ‘inline’ and navigation_menu.links.size > 0 -%}

{%- for link in navigation_menu.links -%}
• {%- if link.links.size == 0 -%} {{ link.title }} {%- else -%} {%- capture index -%}desktop-menu-0-{{ forloop.index }}{%- endcapture -%} {{- link.title -}} {%- render 'icon', icon: 'arrow-bottom' -%} {%- render 'icon', icon: 'nav-triangle' -%}

  {%- render ‘desktop-menu’, menu: link, index: index -%}
  {%- endif -%}

{%- endfor -%}

{%- endif -%} :root { --header-is-sticky: {% if section.settings.enable_sticky_header %}1{% else %}0{% endif %}; --header-inline-navigation: {% if section.settings.desktop_navigation_layout == 'inline' %}1{% else %}0{% endif %}; } #shopify-section-{{ section.id }} { position: relative; z-index: 5; {%- if section.settings.enable_sticky_header -%} position: -webkit-sticky; position: sticky; top: 0; {%- endif -%} } {%- if section.settings.logo -%} .header__logo-image { max-width: {{ section.settings.mobile_logo_max_width }}px !important; } @media screen and (min-width: 641px) { .header__logo-image { max-width: {{ section.settings.logo_max_width }}px !important; } } {%- endif -%} {%- if settings.header_background == settings.secondary_background -%} .search-bar__top { box-shadow: 1px 1px var(--header-border-color) inset, -1px -1px var(--header-border-color) inset; } @media screen and (min-width: 1000px) { /* This allows to reduce the padding if header background is the same as secondary background to avoid space that is too big */ .header:not(.header--condensed) { padding-bottom: 0; } } {%- else -%} @media screen and (min-width: 1000px) { .search-bar.is-expanded .search-bar__top { box-shadow: 0 -1px var(--border-color) inset; } } {%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section__header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Image”,
“info”: “400 x 120px .png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 300,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 140
},
{
“type”: “range”,
“id”: “mobile_logo_max_width”,
“min”: 50,
“max”: 170,
“step”: 5,
“unit”: “px”,
“label”: “Mobile image width”,
“default”: 100
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Currency selector”,
“info”: “To add a currency, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show_currency_selector”,
“label”: “Show currency selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “navigation_menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “desktop_navigation_layout”,
“label”: “Desktop layout”,
“options”: [
{
“value”: “condensed”,
“label”: “Condensed”
},
{
“value”: “inline”,
“label”: “Inline”
}
],
“default”: “condensed”
},
{
“type”: “select”,
“id”: “desktop_navigation_open_trigger”,
“label”: “Open dropdown on…”,
“options”: [
{
“value”: “hover”,
“label”: “Hover”
},
{
“value”: “click”,
“label”: “Click”
}
],
“default”: “hover”
},
{
“type”: “header”,
“content”: “Mobile navigation”
},
{
“type”: “checkbox”,
“id”: “show_navigation_social_media”,
“label”: “Show social media”,
“default”: true
},
{
“type”: “text”,
“id”: “navigation_phone_number”,
“label”: “Phone number text”
},
{
“type”: “text”,
“id”: “navigation_email”,
“label”: “Email”
},
{
“type”: “header”,
“content”: “Search”
},
{
“type”: “checkbox”,
“id”: “show_condensed_search”,
“label”: “Minimise search on mobile”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_search_filter”,
“label”: “Show search filter”,
“default”: true,
“info”: “Refine by product type. Learn more”
},
{
“type”: “link_list”,
“id”: “search_menu”,
“label”: “Quick links menu”,
“info”: “Show quick links when the user hasn’t type anything. This menu won’t show dropdown items.”
},
{
“type”: “checkbox”,
“id”: “show_search_menu_title”,
“label”: “Show quick links title”,
“default”: true
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “menu_item”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “header”,
“content”: “Image 1”
},
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”,
“info”: “600 x 400px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_1_heading”,
“label”: “Heading”,
“default”: “Your image”
},
{
“type”: “text”,
“id”: “image_1_text”,
“label”: “Text”,
“default”: “Tell your story”
},
{
“type”: “url”,
“id”: “image_1_link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Image 2”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image”,
“info”: “600 x 400px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_2_heading”,
“label”: “Heading”,
“default”: “Your image”
},
{
“type”: “text”,
“id”: “image_2_text”,
“label”: “Text”,
“default”: “Tell your story”
},
{
“type”: “url”,
“id”: “image_2_link”,
“label”: “Link”
}
]
}
]
}
{% endschema %}

[KetanKumar]

@MytreetyAdmin

i have check but doesn’t see icon code

it can be done custom code