Hi All!
Please can someone assist me.
In the desktop view of my website I have my phone number in the top right corner.
The phone number is hidden in the mobile view. I would like to add my telephone number under my mobile logo and make it a clickable link. See screenshots below.
Thanks in advance!
@guyv - this will need a little code tweak but it can be done, I can do it on your site.
Thanks a lot! That looks great. I can play around with the font and size myself to get it right if you can let me know where to do this.
Here is my header code:
{% for link in linklists[section.settings.main_linklist].links %}
{% assign child_list_handle = link.title | handleize %}
{% if link.links != blank %}
- {{ link.title }}
{% include 'drawer-nav' %}
{% else %}
- {{ link.title }}
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
- {{ 'layout.customer.account' | t }}
- {{ 'layout.customer.log_out' | t }}
{% else %}
- {{ 'layout.customer.account' | t }}
{% endif %}
{% endif %}
{% if section.settings.promo_bar_enable and section.settings.promo_bar_text != blank %}
{% if section.settings.promo_bar_link != blank %}
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
{{ section.settings.promo_bar_text }}
{% else %}
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
{{ section.settings.promo_bar_text }}
{% endif %}
{% endif %}
{% schema %}
{
"name": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga (v pixelech)",
"da": "Tilpasset logobredde (i pixels)",
"de": "Benutzerdefinierte Logobreite (Pixel)",
"en": "Custom logo width (in pixels)",
"es": "Ancho del logo personalizado (en píxeles)",
"fi": "Mukautettu logon leveys (pikseleinä)",
"fr": "Largeur personnalisée du logo (en pixels)",
"it": "Larghezza logo personalizzato (in pixel)",
"ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
"ko": "사용자 지정 로고 폭 (픽셀)",
"nb": "Tilpasset logobredde (i piksler)",
"nl": "Aangepaste logobreedte (in pixels)",
"pl": "Niestandardowa szerokość logo (w pikselach)",
"pt-BR": "Largura do logo personalizado (em pixels)",
"pt-PT": "Largura de logótipo personalizada (em píxeis)",
"sv": "Anpassad logotypbredd (i pixlar)",
"th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
"tr": "Özel logo genişliği (piksel)",
"vi": "Chiều rộng logo tùy chỉnh (pixel)",
"zh-CN": "自定义 logo 宽度（像素）",
"zh-TW": "自訂標誌寬度 (單位為像素)"
},
"default": {
"cs": "450",
"da": "450",
"de": "450",
"en": "450",
"es": "450",
"fi": "450",
"fr": "450",
"it": "450",
"ja": "450",
"ko": "450",
"nb": "450",
"nl": "450",
"pl": "450",
"pt-BR": "450",
"pt-PT": "450",
"sv": "450",
"th": "450",
"tr": "450",
"vi": "450",
"zh-CN": "450",
"zh-TW": "450"
}
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"tr": "Menü",
"vi": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"cs": "Panel oznámení",
"da": "Meddelelseslinje",
"de": "Ankündigungsleiste",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pl": "Pasek ogłoszeń",
"pt-BR": "Barra de avisos",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"tr": "Duyuru çubuğu",
"vi": "Thanh thông báo",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "promo_bar_enable",
"label": {
"cs": "Zobrazit oznámení",
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pl": "Pokaż ogłoszenie",
"pt-BR": "Mostrar comunicado",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"tr": "Duyuruyu göster",
"vi": "Hiển thị thông báo",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
}
},
{
"type": "text",
"id": "promo_bar_text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
}
},
{
"type": "url",
"id": "promo_bar_link",
"label": {
"cs": "Odkaz",
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"nb": "Kobling",
"nl": "Link",
"pl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"tr": "Bağlantı",
"vi": "Liên kết",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"cs": "Volitelné",
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"nb": "Valgfritt",
"nl": "Optioneel",
"pl": "Opcjonalnie",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"tr": "İsteğe bağlı",
"vi": "Không bắt buộc",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
}
]
}
{% endschema %}
hi @guyv ,
That result need implement in code. if you familiar with code, you can call the phone number through Liquid and put it under the logo, then you can use the css make it show on mobile only.
if you need I implement, please let me know. Thank you!
hi @guyv ,
Can you please paste the code bellow into header file, i added the phone number in that code.
{% for link in linklists[section.settings.main_linklist].links %}
{% assign child_list_handle = link.title | handleize %}
{% if link.links != blank %}
- {{ link.title }}
{% include 'drawer-nav' %}
{% else %}
- {{ link.title }}
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
- {{ 'layout.customer.account' | t }}
- {{ 'layout.customer.log_out' | t }}
{% else %}
- {{ 'layout.customer.account' | t }}
{% endif %}
{% endif %}
{% if section.settings.promo_bar_enable and section.settings.promo_bar_text != blank %}
{% if section.settings.promo_bar_link != blank %}
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
{{ section.settings.promo_bar_text }}
{% else %}
{% comment %} {{ section.settings.promo_bar_text | escape }} {% endcomment %}
{{ section.settings.promo_bar_text }}
{% endif %}
{% endif %}
{% schema %}
{
"name": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga (v pixelech)",
"da": "Tilpasset logobredde (i pixels)",
"de": "Benutzerdefinierte Logobreite (Pixel)",
"en": "Custom logo width (in pixels)",
"es": "Ancho del logo personalizado (en píxeles)",
"fi": "Mukautettu logon leveys (pikseleinä)",
"fr": "Largeur personnalisée du logo (en pixels)",
"it": "Larghezza logo personalizzato (in pixel)",
"ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
"ko": "사용자 지정 로고 폭 (픽셀)",
"nb": "Tilpasset logobredde (i piksler)",
"nl": "Aangepaste logobreedte (in pixels)",
"pl": "Niestandardowa szerokość logo (w pikselach)",
"pt-BR": "Largura do logo personalizado (em pixels)",
"pt-PT": "Largura de logótipo personalizada (em píxeis)",
"sv": "Anpassad logotypbredd (i pixlar)",
"th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
"tr": "Özel logo genişliği (piksel)",
"vi": "Chiều rộng logo tùy chỉnh (pixel)",
"zh-CN": "自定义 logo 宽度（像素）",
"zh-TW": "自訂標誌寬度 (單位為像素)"
},
"default": {
"cs": "450",
"da": "450",
"de": "450",
"en": "450",
"es": "450",
"fi": "450",
"fr": "450",
"it": "450",
"ja": "450",
"ko": "450",
"nb": "450",
"nl": "450",
"pl": "450",
"pt-BR": "450",
"pt-PT": "450",
"sv": "450",
"th": "450",
"tr": "450",
"vi": "450",
"zh-CN": "450",
"zh-TW": "450"
}
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"tr": "Menü",
"vi": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"cs": "Panel oznámení",
"da": "Meddelelseslinje",
"de": "Ankündigungsleiste",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pl": "Pasek ogłoszeń",
"pt-BR": "Barra de avisos",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"tr": "Duyuru çubuğu",
"vi": "Thanh thông báo",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "promo_bar_enable",
"label": {
"cs": "Zobrazit oznámení",
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pl": "Pokaż ogłoszenie",
"pt-BR": "Mostrar comunicado",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"tr": "Duyuruyu göster",
"vi": "Hiển thị thông báo",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
}
},
{
"type": "text",
"id": "promo_bar_text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
}
},
{
"type": "url",
"id": "promo_bar_link",
"label": {
"cs": "Odkaz",
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"nb": "Kobling",
"nl": "Link",
"pl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"tr": "Bağlantı",
"vi": "Liên kết",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"cs": "Volitelné",
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"nb": "Valgfritt",
"nl": "Optioneel",
"pl": "Opcjonalnie",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"tr": "İsteğe bağlı",
"vi": "Không bắt buộc",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
}
]
}
{% endschema %}
Thank you so much! This is exactly what I wanted and the code is simple and clean.
Really appreciate it!
Thank you for your reply and your help! I appreciate it. I already used the solution provided by @LitCommerce below. For some reason I only got a notification about your post a few minutes ago.
