Solved: making my phone number in mobile navigation clickable (warehouse theme)

ecotec · ‎09-14-2020

Hi Guys,

For my webshop, for which I'm using the warehouse theme, my e-mail adress in the mobile navigation is clickable.

I'd like to do the same for my phone number. Where can I find the specific place in the code to do this, and can i just use <a href="tel:+31853032853">085-3032853</a> ?

Thanks in advance!

Slava_Maksimov · ‎09-14-2020

Hi!

Yes, you can use it, but you need to find a place in the Edit code -> sections -> header.liquid section where the navigation menu for mobile devices is displayed

❤️ JS

ecotec · ‎09-14-2020

I found this piece in header.liquid:

<div class="header__action-item-content">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="header__action-item-link header__account-icon icon-state hidden-desk" aria-label="{{ 'header.general.account' | t }}" aria-controls="account-popover" aria-expanded="false" data-action="toggle-popover" {% if customer %}data-follow-link="phone"{% endif %}>
<span class="icon-state__primary">{%- render 'icon', icon: 'account' -%}</span>
<span class="icon-state__secondary">{%- render 'icon', icon: 'close' -%}</span>
</a>

i changed ''phone'' to <a href="tel:+31853032853">085-3032853</a> but it doesn't work..

Slava_Maksimov · ‎09-14-2020

No, man. This is not what you need at all. I don't have this theme at hand. Maybe someone else can help. Or you can send me all the code from header.liquid (or upload this file to the dropbox) so that I can make changes

❤️ JS

ecotec · ‎09-14-2020

{%- 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] -%}

<section data-section-id="{{ section.id }}" data-section-type="header" data-section-settings='{{ section_settings }}'>
  <header class="header header--{{ section.settings.desktop_navigation_layout }} {% unless section.settings.show_condensed_search %}header--search-expanded{% endunless %}" role="banner">
    <div class="container">
      <div class="header__inner">
        {%- comment -%}
        --------------------------------------------------------------------------------------
        MOBILE NAV
        --------------------------------------------------------------------------------------
        {%- endcomment -%}

        {%- if navigation_menu.links.size > 0 -%}
          <nav class="header__mobile-nav hidden-lap-and-up">
            <button class="header__mobile-nav-toggle icon-state touch-area" data-action="toggle-menu" aria-expanded="false" aria-haspopup="true" aria-controls="mobile-menu" aria-label="{{ 'header.navigation.open_menu' | t }}">
              <span class="icon-state__primary">{%- render 'icon', icon: 'hamburger-mobile' -%}</span>
              <span class="icon-state__secondary">{%- render 'icon', icon: 'close' -%}</span>
            </button>

            {%- render 'mobile-menu', menu: navigation_menu -%}
          </nav>
        {%- endif -%}

        {%- comment -%}
          --------------------------------------------------------------------------------------
          DESKTOP NAV
          --------------------------------------------------------------------------------------
        {%- endcomment -%}

        {%- if section.settings.desktop_navigation_layout == 'condensed' and navigation_menu.links.size > 0 -%}
          <nav class="header__desktop-nav hidden-pocket">
            <button class="header__desktop-nav-toggle" data-action="toggle-menu" aria-expanded="false" aria-haspopup="true" aria-label="{{ 'header.navigation.open_menu' | t }}">
              <span>{%- render 'icon', icon: 'hamburger' -%} <span class="header__desktop-nav-text">{{- 'header.navigation.menu' | t -}}</span></span>
            </button>

            {%- render 'desktop-menu', menu: navigation_menu, index: 'desktop-menu-0' -%}
          </nav>
        {%- endif -%}

        {%- comment -%}
        --------------------------------------------------------------------------------------
        LOGO COMPONENT
        --------------------------------------------------------------------------------------
        {%- endcomment -%}

        {%- capture header_logo -%}
          <a href="{{ routes.root_url }}" class="header__logo-link">
            {%- if section.settings.logo != blank -%}
              {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
              <img class="header__logo-image"
                   style="max-width: {{ section.settings.logo_max_width }}px"
                   width="{{ section.settings.logo.width }}"
                   height="{{ section.settings.logo.height }}"
                   src="{{ section.settings.logo | img_url: image_size, scale: 2 }}"
                   alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
            {%- else -%}
              <span class="header__logo-text">{{ shop.name }}</span>
            {%- endif -%}
          </a>
        {%- endcapture -%}

        {%- if request.page_type == 'index' -%}
          <h1 class="header__logo">{{ header_logo }}</h1>
        {%- else -%}
          <div class="header__logo">{{ header_logo }}</div>
        {%- endif -%}

        {%- comment -%}
        --------------------------------------------------------------------------------------
        SEARCH COMPONENT
        --------------------------------------------------------------------------------------
        {%- endcomment -%}

        <div class="header__search-bar-wrapper {% unless section.settings.show_condensed_search %}is-visible{% endunless %}">
          <form action="{{ routes.search_url }}" method="get" role="search" class="search-bar">
            {%- assign search_menu = linklists[section.settings.search_menu] -%}

            <div class="search-bar__top-wrapper">
              <div class="search-bar__top">
                <input type="hidden" name="type" value="product">
                <input type="hidden" name="options[prefix]" value="last">

                <div class="search-bar__input-wrapper">
                  <input class="search-bar__input" type="text" name="q" autocomplete="off" autocorrect="off" aria-label="{{ 'header.search.input_placeholder' | t }}" placeholder="{{ 'header.search.input_placeholder' | t }}">
                  <button type="button" class="search-bar__input-clear hidden-lap-and-up" data-action="clear-input">{% render 'icon', icon: 'close' %}</button>
                </div>

                {%- 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 -%}
                  <div class="search-bar__filter">
                    <label for="search-product-type" class="search-bar__filter-label">
                      <span class="search-bar__filter-active">{{ 'header.search.all_categories' | t }}</span> {%- render 'icon', icon: 'arrow-bottom' -%}
                    </label>

                    <select id="search-product-type">
                      <option value="" selected="selected">{{ 'header.search.all_categories' | t }}</option>

                      {%- for product_type in shop.types -%}
                        {%- if product_type != blank -%}
                          <option value="{{ product_type | escape }}">{{ product_type | escape }}</option>
                        {%- endif -%}
                      {%- endfor -%}
                    </select>
                  </div>
                {%- endif -%}

                <button type="submit" class="search-bar__submit" aria-label="{{ 'header.search.submit' | t }}">
                  {%- render 'icon', icon: 'search' -%}
                  {%- render 'icon', icon: 'search-loader' -%}
                </button>
              </div>

              <button type="button" class="search-bar__close-button hidden-tablet-and-up" data-action="unfix-search">
                <span class="search-bar__close-text">{{ 'header.search.close_search' | t }}</span>
              </button>
            </div>

            <div class="search-bar__inner">
              <div class="search-bar__inner-animation">
                <div class="search-bar__results" aria-hidden="true">
                  <div class="skeleton-container">
                    {%- for i in (1..3) -%}
                      <div class="search-bar__result-item search-bar__result-item--skeleton">
                        <div class="search-bar__image-container">
                          <div class="aspect-ratio aspect-ratio--square">
                            <div class="skeleton-image"></div>
                          </div>
                        </div>

                        <div class="search-bar__item-info">
                          <div class="skeleton-paragraph">
                            <div class="skeleton-text"></div>
                            <div class="skeleton-text"></div>
                          </div>
                        </div>
                      </div>
                    {%- endfor -%}
                  </div>

                  <div class="search-bar__results-inner">
                    {%- comment -%}Placeholder div for real results{%- endcomment -%}
                  </div>
                </div>

                {%- if search_menu.links.size > 0 -%}
                  <div class="search-bar__menu-wrapper" aria-hidden="true">
                    {%- if section.settings.show_search_menu_title -%}
                      <p class="search-bar__menu-title heading">{{ search_menu.title }}</p>
                    {%- endif -%}

                    <ul class="search-bar__menu-linklist list--unstyled">
                      {%- for link in search_menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="search-bar__menu-link">{{ link.title }}</a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                {%- endif -%}
              </div>
            </div>
          </form>
        </div>

        {%- 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 -%}

        <div class="header__action-list">
          {%- if locale_selector -%}
            <div class="header__action-item header__action-item--locale hidden-pocket">
              {%- form 'localization', id: 'localization_form_header_locale' -%}
                <span class="header__action-item-title">{{ 'header.general.language' | t }}</span>
                <input type="hidden" name="locale_code" value="{{ form.current_locale.iso_code }}">

                <div class="header__action-item-content">
                  <button class="header__action-item-link" data-action="toggle-popover" aria-controls="desktop-locale-selector" aria-expanded="false">
                    <span class="locale-selector__value">{{ form.current_locale.endonym_name }}</span> {% render 'icon', icon: 'arrow-bottom' %}
                  </button>

                  <div id="desktop-locale-selector" class="popover popover--locale" aria-hidden="true">
                    {%- render 'icon', icon: 'nav-triangle-borderless' -%}

                    <div class="popover__inner popover__inner--no-padding">
                      <ul class="popover__linklist">
                        {%- for locale in form.available_locales -%}
                          <li class="popover__linklist-item">
                            <button type="submit" name="locale_code" class="popover__link-item" value="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %}>
                              {{- locale.endonym_name -}}
                            </button>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                  </div>
                {%- endform -%}
              </div>
            </div>
          {%- endif -%}

          {%- if currency_selector -%}
            <div class="header__action-item header__action-item--currency hidden-pocket">
              {%- form 'localization', id: 'localization_form_header_currency' -%}
                <span class="header__action-item-title">{{ 'header.general.currency' | t }}</span>
                <input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}">

                <div class="header__action-item-content">
                  <button class="header__action-item-link" data-action="toggle-popover" aria-controls="desktop-currency-selector" aria-expanded="false">
                    <span class="currency-selector__value">{{ form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol }}{% endif %}</span> {% render 'icon', icon: 'arrow-bottom' %}
                  </button>

                  <div id="desktop-currency-selector" class="popover popover--currency" aria-hidden="true">
                    {%- render 'icon', icon: 'nav-triangle-borderless' -%}

                    <div class="popover__inner popover__inner--no-padding">
                      <ul class="popover__linklist">
                        {%- for currency in form.available_currencies -%}
                          <li class="popover__linklist-item">
                            <button type="submit" name="currency_code" class="popover__link-item" value="{{ currency.iso_code }}" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %}>
                              {{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %}
                            </button>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                  </div>
                {%- endform -%}
              </div>
            </div>
          {%- endif -%}

          {%- if section.settings.show_condensed_search -%}
            <div class="header__action-item hidden-tablet-and-up">
              <a class="header__action-item-link" href="{{ routes.search_url }}" data-action="toggle-search" aria-expanded="false" aria-label="{{ 'header.search.open_search' | t }}">{% render 'icon', icon: 'search' %}</a>
            </div>
          {%- endif -%}

          {%- if shop.customer_accounts_enabled -%}
            <div class="header__action-item header__action-item--account">
              {%- if customer -%}
                <span class="header__action-item-title hidden-pocket hidden-lap">{{ 'header.general.welcome' | t: first_name: customer.first_name | truncate: 20 }}</span>
              {%- else -%}
                <span class="header__action-item-title hidden-pocket hidden-lap">{{ 'header.general.login' | t }}</span>
              {%- endif -%}

              <div class="header__action-item-content">
                <a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="header__action-item-link header__account-icon icon-state hidden-desk" aria-label="{{ 'header.general.account' | t }}" aria-controls="account-popover" aria-expanded="false" data-action="toggle-popover" {% if customer %}data-follow-link="phone"{% endif %}>
                  <span class="icon-state__primary">{%- render 'icon', icon: 'account' -%}</span>
                  <span class="icon-state__secondary">{%- render 'icon', icon: 'close' -%}</span>
                </a>

                <a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="header__action-item-link hidden-pocket hidden-lap" aria-controls="account-popover" aria-expanded="false" data-action="toggle-popover">{{ 'header.general.account' | t }} {% render 'icon', icon: 'arrow-bottom' %}</a>

                <div id="account-popover" class="popover {% if customer %}popover--logged{% else %}popover--large popover--unlogged{% endif %}" aria-hidden="true">
                  {%- render 'icon', icon: 'nav-triangle-borderless' -%}

                  {%- if customer -%}
                    <div class="popover__inner popover__inner--no-padding">
                      <div class="popover__linklist">
                        <a class="popover__link-item" href="{{ routes.account_url }}">{{ 'customer.general.orders' | t }}</a>
                        <a class="popover__link-item" href="{{ routes.account_addresses_url }}">{{ 'customer.general.addresses' | t }}</a>
                        <a class="popover__link-item" href="{{ routes.account_logout_url }}" data-no-instant>{{ 'customer.general.logout' | t }}</a>
                      </div>
                    </div>
                  {%- else -%}
                    <div class="popover__panel-list">
                      {%- comment -%}LOGIN{%- endcomment -%}
                      <div id="header-login-panel" class="popover__panel popover__panel--default is-selected">
                        <div class="popover__inner">
                          {%- form 'customer_login', name: 'login', class: 'form', id: 'header_customer_login' -%}
                            <header class="popover__header">
                              <h2 class="popover__title heading">{{ 'customer.login.login' | t }}</h2>
                              <p class="popover__legend">{{ 'customer.login.description' | t }}</p>
                            </header>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="email" id="login-customer[email]" class="form__field form__field--text" name="customer[email]" required="required">
                              <label for="login-customer[email]" class="form__floating-label">{{ 'customer.login.email' | t }}</label>
                            </div>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="password" id="login-customer[password]" class="form__field form__field--text" name="customer[password]" required="required" autocomplete="current-password">
                              <label for="login-customer[password]" class="form__floating-label">{{ 'customer.login.password' | t }}</label>
                            </div>

                            <button type="submit" class="form__submit button button--primary button--full">{{ 'customer.login.submit' | t }}</button>
                          {%- endform -%}

                          <div class="popover__secondary-action">
                            <p>{{ 'customer.login.new_customer' | t }} <button data-action="show-popover-panel" aria-controls="header-register-panel" class="link link--accented">{{ 'customer.login.create_your_account' | t }}</button></p>
                            <p>{{ 'customer.login.lost_password' | t }} <button data-action="show-popover-panel" aria-controls="header-recover-panel" class="link link--accented">{{ 'customer.login.recover_password' | t }}</button></p>
                          </div>
                        </div>
                      </div>

                      {%- comment -%}RECOVER{%- endcomment -%}
                      <div id="header-recover-panel" class="popover__panel popover__panel--sliding">
                        <div class="popover__inner">
                          {%- form 'recover_customer_password', name: 'recover', class: 'form' -%}
                            <header class="popover__header">
                              <h2 class="popover__title heading">{{ 'customer.recover_password.recover_password' | t }}</h2>
                              <p class="popover__legend">{{ 'customer.recover_password.description' | t }}</p>
                            </header>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="email" id="recover-customer[recover_email]" class="form__field form__field--text" name="email" required="required">
                              <label for="recover-customer[recover_email]" class="form__floating-label">{{ 'customer.recover_password.email' | t }}</label>
                            </div>

                            <button type="submit" class="form__submit button button--primary button--full">{{ 'customer.recover_password.submit' | t }}</button>
                          {%- endform -%}

                          <div class="popover__secondary-action">
                            <p>{{ 'customer.recover_password.remembered_your_password' | t }} <button data-action="show-popover-panel" aria-controls="header-login-panel" class="link link--accented">{{ 'customer.recover_password.back_to_login' | t }}</button></p>
                          </div>
                        </div>
                      </div>

                      {%- comment -%}REGISTER{%- endcomment -%}
                      <div id="header-register-panel" class="popover__panel popover__panel--sliding">
                        <div class="popover__inner">
                          {%- form 'create_customer', name: 'create', class: 'form' -%}
                            <header class="popover__header">
                              <h2 class="popover__title heading">{{ 'customer.register.create_account' | t }}</h2>
                              <p class="popover__legend">{{ 'customer.register.description' | t }}</p>
                            </header>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="text" id="register-customer[first_name]" class="form__field form__field--text" name="customer[first_name]" required="required">
                              <label for="register-customer[first_name]" class="form__floating-label">{{ 'customer.register.first_name' | t }}</label>
                            </div>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="text" id="register-customer[last_name]" class="form__field form__field--text" name="customer[last_name]" required="required">
                              <label for="register-customer[last_name]" class="form__floating-label">{{ 'customer.register.last_name' | t }}</label>
                            </div>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="email" id="register-customer[email]" class="form__field form__field--text" name="customer[email]" required="required">
                              <label for="register-customer[email]" class="form__floating-label">{{ 'customer.register.email' | t }}</label>
                            </div>

                            <div class="form__input-wrapper form__input-wrapper--labelled">
                              <input type="password" id="register-customer[password]" class="form__field form__field--text" name="customer[password]" required="required" autocomplete="new-password">
                              <label for="register-customer[password]" class="form__floating-label">{{ 'customer.register.password' | t }}</label>
                            </div>

                            <button type="submit" class="form__submit button button--primary button--full">{{ 'customer.register.submit' | t }}</button>
                          {%- endform -%}

                          <div class="popover__secondary-action">
                            <p>{{ 'customer.register.already_have_account' | t }} <button data-action="show-popover-panel" aria-controls="header-login-panel" class="link link--accented">{{ 'customer.register.login' | t }}</button></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          {%- endif -%}

          <div class="header__action-item header__action-item--cart">
            <a class="header__action-item-link header__cart-toggle" href="{{ routes.cart_url }}" {% if settings.cart_type == 'drawer' and template != 'cart' %}aria-controls="mini-cart" aria-expanded="false" data-action="toggle-mini-cart"{% endif %} data-no-instant>
              <div class="header__action-item-content">
                <div class="header__cart-icon icon-state" aria-expanded="false">
                  <span class="icon-state__primary">
                    {%- render 'icon', icon: 'cart' -%}
                    <span class="header__cart-count">{{ cart.item_count }}</span>
                  </span>

                  <span class="icon-state__secondary">{%- render 'icon', icon: 'close' -%}</span>
                </div>

                <span class="hidden-pocket hidden-lap">{{ 'header.general.cart' | t }}</span>
              </div>
            </a>

            {%- if settings.cart_type == 'drawer' and template != 'cart' -%}
              {%- render 'mini-cart' -%}
            {%- endif -%}
          </div>
        </div>
      </div>
    </div>
  </header>

  {%- if section.settings.desktop_navigation_layout == 'inline' and navigation_menu.links.size > 0 -%}
    <nav class="nav-bar">
      <div class="nav-bar__inner">
        <div class="container">
          <ul class="nav-bar__linklist list--unstyled" data-type="menu">
            {%- for link in navigation_menu.links -%}
              <li class="nav-bar__item">
                {%- if link.links.size == 0 -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem">{{ link.title }}</a>
                {%- else -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem" aria-expanded="false" aria-haspopup="true">
                    {{- link.title -}}
                    {%- render 'icon', icon: 'arrow-bottom' -%}
                    {%- render 'icon', icon: 'nav-triangle' -%}
                  </a>

                  {%- capture index -%}desktop-menu-0-{{ forloop.index }}{%- endcapture -%}
                  {%- render 'desktop-menu', menu: link, index: index -%}
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </div>
      </div>
    </nav>
  {%- endif -%}
</section>

<style>
  :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 -%}
</style>

<script>
  document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-{{ section.id }}').clientHeight + 'px');
</script>

{% 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": "200 x 60px .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.](/admin/settings/languages)"
    },
    {
      "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.](/admin/settings/payments)"
    },
    {
      "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",
      "default": "Call us 000-000-0000"
    },
    {
      "type": "text",
      "id": "navigation_email",
      "label": "Email",
      "default": "info@yourwebsite.com"
    },
    {
      "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](https://support.maestrooo.com/article/184-navigation-filtering-search-results-by-product-type)"
    },
    {
      "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](https://support.maestrooo.com/article/180-navigation-enabling-and-configuring-mega-navigation)."
        },
        {
          "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 %}

Slava_Maksimov · ‎09-14-2020

I see that the mobile menu is located in a separate snippet file, edit code -> snippets -> mobile-menu.liquid

❤️ JS

ecotec · ‎09-14-2020

     {%- if section.settings.navigation_phone_number != blank or section.settings.navigation_email != blank -%}
        <div class="mobile-menu__section mobile-menu__section--loose">
          <p class="mobile-menu__section-title heading h5">{{ 'header.navigation.need_help' | t }}</p>

          {%- if section.settings.navigation_phone_number != blank -%}
            <div class="mobile-menu__help-wrapper">
              {%- render 'icon', icon: 'bi-phone' -%}
              <span>{{ section.settings.navigation_phone_number | escape }}</span>
            </div>
          {%- endif -%}

I think it's this bit. do I change what's between <span> ?

EDIT: I tried it but it didn't work.. Can you please take a look at mobile-header.liquid?

{%- assign mega_menus = section.blocks | map: 'settings' | map: 'menu_item' -%}

<div id="mobile-menu" class="mobile-menu" aria-hidden="true">
  {%- render 'icon', icon: 'nav-triangle-borderless' -%}

  <div class="mobile-menu__inner">
    <div class="mobile-menu__panel">
      <div class="mobile-menu__section">
        <ul class="mobile-menu__nav" data-type="menu">
          {%- for link in menu.links -%}
            <li class="mobile-menu__nav-item">
              {%- if link.links != blank -%}
                {%- capture panel_id -%}mobile-panel-{{ forloop.index0 }}{%- endcapture -%}

                <button class="mobile-menu__nav-link" data-type="menuitem" aria-haspopup="true" aria-expanded="false" aria-controls="{{ panel_id }}" data-action="open-panel">
                  {{- link.title -}} {%- render 'icon', icon: 'arrow-right' -%}
                </button>
              {%- else -%}
                <a href="{{ link.url }}" class="mobile-menu__nav-link" data-type="menuitem">{{ link.title }}</a>
              {%- endif -%}
            </li>
          {%- endfor -%}
        </ul>
      </div>

      {%- if section.settings.navigation_phone_number != blank or section.settings.navigation_email != blank -%}
        <div class="mobile-menu__section mobile-menu__section--loose">
          <p class="mobile-menu__section-title heading h5">{{ 'header.navigation.need_help' | t }}</p>

          {%- if section.settings.navigation_phone_number != blank -%}
            <div class="mobile-menu__help-wrapper">
              {%- render 'icon', icon: 'bi-phone' -%}
              <span>{{ section.settings.navigation_phone_number | escape }}</span>
            </div>
          {%- endif -%}

          {%- if section.settings.navigation_email != blank -%}
            <div class="mobile-menu__help-wrapper">
              {%- render 'icon', icon: 'bi-email' -%}
              <a href="mailto:{{ section.settings.navigation_email }}">{{ section.settings.navigation_email | escape }}</a>
            </div>
          {%- endif -%}
        </div>
      {%- endif -%}

      {%- capture social_media -%}{% render 'social-media', show_social_media_name: true %}{%- endcapture -%}

      {%- if section.settings.show_navigation_social_media and social_media != blank -%}
        <div class="mobile-menu__section mobile-menu__section--loose">
          <p class="mobile-menu__section-title heading h5">{{ 'header.navigation.follow_us' | t }}</p>

          {{- social_media -}}
        </div>
      {%- endif -%}
    </div>

    {%- comment -%}We now need to loop again (for the second level) to create the nested panel{%- endcomment -%}

    {%- for link in menu.links -%}
      {%- if link.links != blank -%}
        {%- capture panel_id -%}mobile-panel-{{ forloop.index0 }}{%- endcapture -%}

        <div id="{{ panel_id }}" class="mobile-menu__panel is-nested">
          <div class="mobile-menu__section is-sticky">
            <button class="mobile-menu__back-button" data-action="close-panel">{% render 'icon', icon: 'arrow-left' %} {{ 'header.navigation.back' | t }}</button>
          </div>

          <div class="mobile-menu__section">
            {%- assign is_mega_menu = false -%}
            {%- assign downcase_title = link.title | downcase | strip -%}

            {%- for mega_menu in mega_menus -%}
              {%- assign mega_menu_setting_downcase = mega_menu | downcase | strip -%}

              {%- if mega_menu_setting_downcase == downcase_title -%}
                {%- assign is_mega_menu = true -%}
                {%- break -%}
              {%- endif -%}
            {%- endfor -%}

            {%- if is_mega_menu -%}
              <div class="mobile-menu__nav-list">
                {%- for sub_link in link.links -%}
                  {%- capture mobile_list_id -%}mobile-list-{% increment mobile_list %}{%- endcapture -%}

                  <div class="mobile-menu__nav-list-item">
                    <button class="mobile-menu__nav-list-toggle text--strong" aria-controls="{{ mobile_list_id }}" aria-expanded="false" data-action="toggle-collapsible" data-close-siblings="false">
                      {{- sub_link.title -}} {% render 'icon', icon: 'arrow-bottom' %}
                    </button>

                    <div id="{{ mobile_list_id }}" class="mobile-menu__nav-collapsible">
                      <div class="mobile-menu__nav-collapsible-content">
                        <ul class="mobile-menu__nav" data-type="menu">
                          {%- for sub_sub_link in sub_link.links -%}
                            <li class="mobile-menu__nav-item">
                              <a href="{{ sub_sub_link.url }}" class="mobile-menu__nav-link" data-type="menuitem">{{ sub_sub_link.title }}</a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      </div>
                    </div>
                  </div>
                {%- endfor -%}
              </div>

              {%- assign mega_menu_block = nil -%}

              {%- for block in section.blocks -%}
                {%- assign downcase_block_menu_item = block.settings.menu_item | downcase | strip -%}

                {%- if downcase_block_menu_item == downcase_title -%}
                  {%- assign mega_menu_block = block -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}

              {%- assign promo_count = 0 -%}

              {%- capture promo_blocks -%}
                {%- if mega_menu_block.settings.image_1 != blank -%}
                  {% assign promo_count = promo_count | plus: 1 %}

                  <div class="mobile-menu__promo-item">
                    <a href="{{ mega_menu_block.settings.image_1_link | default: '#' }}" class="mobile-menu__promo">
                      <div class="mobile-menu__image-wrapper">
                        <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_1.aspect_ratio }}%">
                          <img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_1 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_1.alt | escape }}">
                        </div>
                      </div>

                      <span class="mobile-menu__image-heading heading">{{ mega_menu_block.settings.image_1_heading | escape }}</span>
                      <p class="mobile-menu__image-text">{{ mega_menu_block.settings.image_1_text | escape }}</p>
                    </a>
                  </div>
                {%- endif -%}

                {%- if mega_menu_block.settings.image_2 != blank -%}
                  {% assign promo_count = promo_count | plus: 1 %}

                  <div class="mobile-menu__promo-item">
                    <a href="{{ mega_menu_block.settings.image_2_link | default: '#' }}" class="mobile-menu__promo">
                      <div class="mobile-menu__image-wrapper">
                        <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_2.aspect_ratio }}%">
                          <img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_2 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_2.alt | escape }}">
                        </div>
                      </div>

                      <span class="mobile-menu__image-heading heading">{{ mega_menu_block.settings.image_2_heading | escape }}</span>
                      <p class="mobile-menu__image-text">{{ mega_menu_block.settings.image_2_text | escape }}</p>
                    </a>
                  </div>
                {%- endif -%}
              {%- endcapture -%}

              {%- if promo_blocks != blank -%}
                {%- if promo_count == 1 -%}
                  {{- promo_blocks -}}
                {%- else -%}
                  <div class="scroller">
                    <div class="scroller__inner">
                      <div class="mobile-menu__promo-list">
                        {{- promo_blocks -}}
                      </div>
                    </div>
                  </div>
                {%- endif -%}
              {%- endif -%}
            {%- else -%}
              <ul class="mobile-menu__nav" data-type="menu">
                <li class="mobile-menu__nav-item">
                  <a href="{{ link.url }}" class="mobile-menu__nav-link text--strong">{{ link.title }}</a>
                </li>

                {%- for sub_link in link.links -%}
                  <li class="mobile-menu__nav-item">
                    {%- if sub_link.links != blank -%}
                      {%- capture panel_id -%}mobile-panel-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}{%- endcapture -%}

                      <button class="mobile-menu__nav-link" data-type="menuitem" aria-haspopup="true" aria-expanded="false" aria-controls="{{ panel_id }}" data-action="open-panel">
                        {{- sub_link.title -}} {%- render 'icon', icon: 'arrow-right' -%}
                      </button>
                    {%- else -%}
                      <a href="{{ sub_link.url }}" class="mobile-menu__nav-link" data-type="menuitem">{{ sub_link.title }}</a>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            {%- endif -%}
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}

    {%- comment -%}Finally we need to do the same to create the third level menus{%- endcomment -%}

    {%- for link in menu.links -%}
      {%- if link.links != blank -%}
        {%- assign downcase_title = link.title | downcase -%}

        {%- unless mega_menus contains downcase_title -%}
          {%- for sub_link in link.links -%}
            {%- if sub_link.links != blank -%}
              {%- capture panel_id -%}mobile-panel-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}{%- endcapture -%}

              <div id="{{ panel_id }}" class="mobile-menu__panel is-nested">
                <div class="mobile-menu__section is-sticky">
                  <button class="mobile-menu__back-button" data-action="close-panel">{% render 'icon', icon: 'arrow-left' %} {{ 'header.navigation.back' | t }}</button>
                </div>

                <div class="mobile-menu__section">
                  <ul class="mobile-menu__nav" data-type="menu">
                    <li class="mobile-menu__nav-item">
                      <a href="{{ sub_link.url }}" class="mobile-menu__nav-link text--strong">{{ sub_link.title }}</a>
                    </li>

                    {%- for sub_sub_link in sub_link.links -%}
                      <li class="mobile-menu__nav-item">
                        <a href="{{ sub_sub_link.url }}" class="mobile-menu__nav-link" data-type="menuitem">{{ sub_sub_link.title }}</a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
              </div>
            {%- endif -%}
          {%- endfor -%}
        {%- endunless -%}
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

Slava_Maksimov · ‎09-14-2020

You need to change it

{%- if section.settings.navigation_phone_number != blank -%}
  <div class="mobile-menu__help-wrapper">
    {%- render 'icon', icon: 'bi-phone' -%}
    <span>{{ section.settings.navigation_phone_number | escape }}</span>
  </div>
{%- endif -%}

to this

{%- if section.settings.navigation_phone_number != blank -%}
  <div class="mobile-menu__help-wrapper">
    {%- render 'icon', icon: 'bi-phone' -%}
    <a href="tel:{{ section.settings.navigation_phone_number }}">{{ section.settings.navigation_phone_number | escape }}</a>
  </div>
{%- endif -%}

❤️ JS

ecotec · ‎09-14-2020

I haddn't thought of it like that, and it works. Thanks a bunch!!

making my phone number in mobile navigation clickable (warehouse theme)

"Unavailable" won't switch to "add to cart"

Buy Button Duplicate Issue

HELP! How to get Product Metafields from LineItem

Which api should I use to connect my product inventory software with Shopify

Discounted rates from Shopify Shipping

Re: Where to define block types in schema?

Re: Pop up banner - JavaScript

"Unavailable" won't switch to "add to cart"

Re: Breadcrumb Errors

Re: Mobile Search Bar Not Working