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

Solved
ecotec
Excursionist
34 0 8

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!

 

0 Likes
Slava_Maksimov
Shopify Partner
27 4 10

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
0 Likes
ecotec
Excursionist
34 0 8

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..

 

0 Likes
Slava_Maksimov
Shopify Partner
27 4 10

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
0 Likes
ecotec
Excursionist
34 0 8
{%- 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 %}
0 Likes
Slava_Maksimov
Shopify Partner
27 4 10

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

❤️ JS
0 Likes
ecotec
Excursionist
34 0 8

 

     {%- 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>
0 Likes
Slava_Maksimov
Shopify Partner
27 4 10

This is an accepted solution.

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
Excursionist
34 0 8

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

Shopdigits_1234
New Member
1 0 1

Try to check out Shopdigits - it makes navigating phone numbers that much easier. Also provides customers with a virtual call center. 

https://apps.shopify.com/shopdigits-1