Temi di Shopify, liquid, loghi e argomenti simili
Vorrei usare un file svg per il logo.
Tra le varie faq ho visto diversi work around che però non sono riuscito (ancora) a far funzionare.
Mi chiedo come mai sia abilitato l'uso di risorse svg solo per il logo nella personalizzazione mail dei carrelli abbandonati.
Nel caricamento dei file nel logo è presente come tipo di immagine l'estensione svg ma poi di fatto accetta solo png e jpg.
E' possibile chiedere a shopify di estendere una caratteristica che già è implementata in altre sezioni della piattaforma?
Al momento sto utilizzando il tema debut. Se qualcuno di recente è riuscito ad usare svg mi dice come ha modificato il codice? (purtroppo le indicazioni di altre faq anche recenti non hanno funzionato)
Se pianto dentro la richiesta di una immagine dicendo a shopify di recuperla dagli asset funziona ma non riesco a farla nella parte dei loghi.
RISOLTO!
Il team di supporto di shopify mi ha rapidamente aiutato ad implementare questa funzionalità.
Vi riporto il codice modificato della sezione header.
Si nota come è stata creato un box che apparirà nella gestione dell'header per poter mettere il codice del logo svg (lo potete aprire con notepad++ o altro editor e fare copia incolla). Il codice lo trovate cercando "Abilita SVG personalizzato"
Si trova poi all'inizio una gestione dell'immagine cosi come la parte di override del png che potete trovare cercando "Adjusted by Salvo @ Shopify Theme Support"
se a qualcuno serve ho anche la modifica per il thema simple.
Se volete fate una comparazione di questo codice con quello originale del tema debut e saltano subito all'occhio le differenze.
{% if section.settings.message %} <style> {% if section.settings.logo != blank %} .site-header__logo-image { max-width: {{ section.settings.logo_max_width | escape }}px; } {% endif %} {% if section.settings.align_logo == 'left' %} .site-header__logo-image { margin: 0; } {% endif %} </style> {% endif %} {% include 'search-drawer' %} <div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section> {% if section.settings.message %} {% if section.settings.home_page_only == false or request.page_type == 'index' %} <style> .announcement-bar { background-color: {{ section.settings.color_bg }}; } .announcement-bar--link:hover { {% assign brightness = section.settings.color_bg | color_brightness %} {% if brightness <= 192 %} {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %} background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }}; {% else %} {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %} background-color: {{ section.settings.color_bg | color_darken: darkenAmount }}; {% endif %} } .announcement-bar__message { color: {{ section.settings.color_text }}; } </style> {% if section.settings.message_link == blank %} <div class="announcement-bar"> {% else %} <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link"> {% endif %} <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p> {% if section.settings.message_link == blank %} </div> {% else %} </a> {% endif %} {% endif %} {% endif %} <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner"> <div class="grid grid--no-gutters grid--table site-header__mobile-nav"> {% if section.settings.align_logo == 'center' %} {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%} {% else %} {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%} {% endif %} <div class="grid__item {{ logo_classes }}"> {% comment %} Use the uploaded logo from theme settings if enabled. Site name gets precedence with H1 tag on homepage, div on other pages. {% endcomment %} {% if request.page_type == 'index' %} <h1 class="h2 site-header__logo"> {% else %} <div class="h2 site-header__logo"> {% endif %} {% comment %} Adjusted by Salvo @ Shopify Theme Support on April 27, 2020 {% endcomment %} {% if section.settings.logo or section.settings.custom_svg_enable %} {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}"> {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %} {% unless section.settings.custom_svg_enable %} <img class="lazyload js" src="{{ section.settings.logo | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ section.settings.logo.aspect_ratio }}" data-sizes="auto" alt="{{ logo_alt | escape }}" style="max-width: {{ section.settings.logo_max_width }}px"> <noscript> {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %} <img src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" style="max-width: {{ section.settings.logo_max_width }}px;"> </noscript> {% endunless %} {% if section.settings.custom_svg_enable %} {{ section.settings.custom_svg_code }} {% endif %} </a> {% else %} <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a> {% endif %} {% if request.page_type == 'index' %} </h1> {% else %} </div> {% endif %} </div> {% if section.settings.align_logo == 'left' %} <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist %} </nav> {% endif %} <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}"> <div class="site-header__icons-wrapper"> <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top"> {% include 'icon-search' %} <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span> </button> {% if shop.customer_accounts_enabled %} {% if customer %} <a href="{{ routes.account_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span> </a> {% else %} <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span> </a> {% endif %} {% endif %} <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart"> {% include 'icon-cart' %} <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span> <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble> <span data-cart-count>{{ cart.item_count }}</span> <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span> </div> </a> {% unless linklists[section.settings.main_linklist] == blank %} <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}"> {% include 'icon-hamburger' %} {% include 'icon-close' %} </button> {% endunless %} </div> </div> </div> <nav class="mobile-nav-wrapper medium-up--hide" role="navigation"> <ul id="MobileNav" class="mobile-nav"> {% for link in linklists[section.settings.main_linklist].links %} {%- assign outerLoopIndex = forloop.index -%} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if link.links != blank %} {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">{{ link.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2"> <li class="visually-hidden" tabindex="-1" data-menu-title="2"> {{- link.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}"> {% include 'icon-chevron-left' %} </button> </div> <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent"> <span class="mobile-nav__label">{{ link.title | escape }}</span> </span> </div> </li> {% for childlink in link.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if childlink.links != blank %} {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false"> <span class="mobile-nav__label">{{ childlink.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3"> <li class="visually-hidden" tabindex="-1" data-menu-title="3"> {{- childlink.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}"> {% include 'icon-chevron-left' %} </button> </div> <a href="{{ childlink.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> </div> </li> {% for grandchildlink in childlink.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link" {% if grandchildlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span> </a> </li> {% endfor %} </ul> {% else %} <a href="{{ childlink.url }}" class="mobile-nav__sublist-link" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> {% else %} <a href="{{ link.url }}" class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}" {% if link.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ link.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> </nav> <script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = {"lang":"it","siteId":1692511,"enableCMP":true,"whitelabel":false,"cookiePolicyId":91933840, "banner":{ "acceptButtonDisplay":true,"customizeButtonDisplay":true,"position":"float-bottom-right" }}; </script> <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> </header> {% if section.settings.align_logo == 'center' %} <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %} </nav> {% endif %} </div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": {{ shop.name | json }}, {% if section.settings.logo %} {% assign image_size = section.settings.logo.width | append:'x' %} "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }}, {% endif %} "sameAs": [ {{ settings.social_twitter_link | json }}, {{ settings.social_facebook_link | json }}, {{ settings.social_pinterest_link | json }}, {{ settings.social_instagram_link | json }}, {{ settings.social_tumblr_link | json }}, {{ settings.social_snapchat_link | json }}, {{ settings.social_youtube_link | json }}, {{ settings.social_vimeo_link | json }} ], "url": {{ shop.url | append: page.url | json }} } </script> {% if request.page_type == 'index' %} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": {{ shop.name | json }}, "potentialAction": { "@type": "SearchAction", "target": {{ potential_action_target | json }}, "query-input": "required name=search_term_string" }, "url": {{ shop.url | append: page.url | json }} } </script> {% endif %} {% schema %} { "name": { "da": "Overskrift", "de": "Titel", "en": "Header", "es": "Encabezado", "fi": "Ylätunniste", "fr": "En-tête", "hi": "हैडर", "it": "Header", "ja": "ヘッダー", "ko": "머리글", "nb": "Header", "nl": "Koptekst", "pt-BR": "Cabeçalho", "pt-PT": "Cabeçalho", "sv": "Rubrik", "th": "ส่วนหัว", "zh-CN": "标头", "zh-TW": "標頭" }, "settings": [ { "type": "radio", "id": "align_logo", "label": { "da": "Logojustering", "de": "Logo-Ausrichtung", "en": "Logo alignment", "es": "Alineación de logotipo", "fi": "Logon tasaus", "fr": "Alignement du logo", "hi": "लोगो संरेखण", "it": "Allineamento logo", "ja": "ロゴアラインメント", "ko": "로고 정렬", "nb": "Logojustering", "nl": "Logo-uitlijning", "pt-BR": "Alinhamento do logotipo", "pt-PT": "Alinhamento do logótipo", "sv": "Logojustering", "th": "การจัดวางโลโก้", "zh-CN": "logo 对齐方式", "zh-TW": "商標對齊" }, "default": "left", "options": [ { "value": "left", "label": { "da": "Venstre", "de": "Links", "en": "Left", "es": "Izquierda", "fi": "Vasen", "fr": "Gauche", "hi": "बाएँ", "it": "Sinistra", "ja": "左", "ko": "왼쪽", "nb": "Venstre", "nl": "Links", "pt-BR": "Esquerda", "pt-PT": "Esquerda", "sv": "Vänster", "th": "ด้านซ้าย", "zh-CN": "左侧", "zh-TW": "左方" } }, { "value": "center", "label": { "da": "Centreret", "de": "Mittig", "en": "Centered", "es": "Centrada", "fi": "Keskitetty", "fr": "Centré", "hi": "केंद्र", "it": "Centrato", "ja": "中央揃え", "ko": "센터 맞추기", "nb": "Sentrert", "nl": "Gecentreerd", "pt-BR": "Centralizado", "pt-PT": "Centrado", "sv": "Centrera", "th": "ตรงกลาง", "zh-CN": "居中", "zh-TW": "置中" } } ] }, { "type": "image_picker", "id": "logo", "label": { "da": "Logobillede", "de": "Logo-Foto", "en": "Logo image", "es": "Logotipo", "fi": "Logokuva", "fr": "Image du logo", "hi": "लोगो इमेज", "it": "Immagine del logo", "ja": "ロゴ画像", "ko": "로고 이미지", "nb": "Logobilde", "nl": "Afbeelding van logo", "pt-BR": "Imagem do logotipo", "pt-PT": "Imagem do logótipo", "sv": "Logobild", "th": "รูปภาพโลโก้", "zh-CN": "logo 图片", "zh-TW": "標誌圖片" } }, { "type": "range", "id": "logo_max_width", "label": { "da": "Tilpasset logobredde", "de": "Logobreite", "en": "Custom logo width", "es": "Ancho del logotipo personalizado", "fi": "Mukautetun logon leveys", "fr": "Largeur personnalisée du logo", "hi": "कस्टम लोगो की चौड़ाई", "it": "Larghezza logo personalizzato", "ja": "ロゴの幅をカスタマイズする", "ko": "사용자 지정 로고 폭", "nb": "Tilpasset logobredde", "nl": "Aangepaste logo-breedte", "pt-BR": "Largura do logotipo personalizado", "pt-PT": "Largura de logótipo personalizada", "sv": "Anpassad logotypsbredd", "th": "ความกว้างของโลโก้แบบกำหนดเอง", "zh-CN": "自定义 logo 宽度", "zh-TW": "自訂商標寬度" }, "min": 50, "max": 250, "step": 5, "unit": "px", "default": 100 }, { "type": "checkbox", "id": "custom_svg_enable", "label": "Abilita SVG personalizzato" }, { "type": "textarea", "id": "custom_svg_code", "label": "Codice file SVG" }, { "type": "link_list", "id": "main_linklist", "label": { "da": "Menu", "de": "Menü", "en": "Menu", "es": "Menú", "fi": "Valikko", "fr": "Menu", "hi": "मेनू", "it": "Menu", "ja": "メニュー", "ko": "메뉴", "nb": "Meny", "nl": "Menu", "pt-BR": "Menu", "pt-PT": "Menu", "sv": "Meny", "th": "เมนู", "zh-CN": "菜单", "zh-TW": "選單" }, "default": "main-menu" }, { "type": "header", "content": { "da": "Meddelelseslinje", "de": "Ankündigungsbereich", "en": "Announcement bar", "es": "Barra de anuncios", "fi": "Ilmoituspalkki", "fr": "Barre d'annonces", "hi": "घोषणा बार", "it": "Barra degli annunci", "ja": "告知バー", "ko": "공지 표시줄", "nb": "Kunngjøringslinje", "nl": "Aankondigingsbalk", "pt-BR": "Barra de avisos", "pt-PT": "Barra de comunicado", "sv": "Meddelandefält", "th": "แถบประกาศ", "zh-CN": "公告栏", "zh-TW": "公告列" } }, { "type": "checkbox", "id": "message", "label": { "da": "Vis meddelelse", "de": "Ankündigung anzeigen", "en": "Show announcement", "es": "Mostrar anuncio", "fi": "Näytä ilmoitus", "fr": "Afficher l'annonce", "hi": "घोषणा डिखाएं", "it": "Mostra annuncio", "ja": "告知を表示する", "ko": "공지 표시", "nb": "Vis kunngjøring", "nl": "Aankondiging weergeven", "pt-BR": "Exibir anúncio", "pt-PT": "Mostrar comunicado", "sv": "Visa tillkännagivande", "th": "แสดงประกาศ", "zh-CN": "显示公告", "zh-TW": "顯示公告" }, "default": false }, { "type": "checkbox", "id": "home_page_only", "label": { "da": "Kun startside", "de": "Nur Startseite", "en": "Home page only", "es": "Solo página de inicio", "fi": "Vain etusivu", "fr": "Page d'accueil uniquement", "hi": "केवल होमपेज", "it": "Solo home page", "ja": "ホームページのみ", "ko": "홈페이지만", "nb": "Kun på startsiden", "nl": "Alleen homepage", "pt-BR": "Apenas na página inicial", "pt-PT": "Apenas a página inicial", "sv": "Endast hemsida", "th": "หน้าแรกเท่านั้น", "zh-CN": "仅主页", "zh-TW": "僅限首頁" }, "default": true }, { "type": "text", "id": "message_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": { "da": "Meddel noget her", "de": "Hier etwas ankündigen", "en": "Announce something here", "es": "Anuncia algo aquí", "fi": "Ilmoita jotakin tässä", "fr": "Annoncez quelque chose ici", "hi": "यहां कुछ घोषित करें", "it": "Annuncia qualcosa qui", "ja": "ここで告知してください", "ko": "여기에 공지하십시오", "nb": "Kunngjør noe her", "nl": "Kondig hier iets aan", "pt-BR": "Anuncie algo aqui", "pt-PT": "Anunciar algo aqui", "sv": "Meddela något här", "th": "ประกาศข้อความที่นี่", "zh-CN": "在此处进行公告", "zh-TW": "在此公告資訊" } }, { "type": "url", "id": "message_link", "label": { "da": "Link", "de": "Link", "en": "Link", "es": "Enlace", "fi": "Linkki", "fr": "Lien", "hi": "लिंक", "it": "Link", "ja": "リンク", "ko": "링크", "nb": "Kobling", "nl": "Link", "pt-BR": "Link", "pt-PT": "Ligação", "sv": "Länk", "th": "ลิงก์", "zh-CN": "链接", "zh-TW": "連結" }, "info": { "da": "Valgfri", "de": "Optional", "en": "Optional", "es": "Opcional", "fi": "Valinnainen", "fr": "Facultatif", "hi": "वैकल्पिक", "it": "Facoltativo", "ja": "オプション", "ko": "선택 사항", "nb": "Valgfritt", "nl": "Optioneel", "pt-BR": "Opcional", "pt-PT": "Opcional", "sv": "Valfritt", "th": "ไม่จำเป็น", "zh-CN": "可选", "zh-TW": "(選填)" } }, { "type": "color", "id": "color_bg", "label": { "da": "Bjælke", "de": "Zeile", "en": "Bar", "es": "Barra", "fi": "Palkki", "fr": "Barre", "hi": "बार", "it": "Barra", "ja": "バー", "ko": "바", "nb": "Felt", "nl": "Balk", "pt-BR": "Barra", "pt-PT": "Barra", "sv": "Fält", "th": "แถบ", "zh-CN": "栏", "zh-TW": "橫條" }, "default": "#3a3a3a" }, { "type": "color", "id": "color_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": "#ffffff" } ] } {% endschema %}
ho lo stesso problema sul tema warehouse. Ho contattato il fornitore del tema e mi dice che non è possibile. Eppure ho un logo perfetto in png che una volta caricato sgrana tantissimo ed è fastidioso.
@MrPrunen ha scritto:RISOLTO!
Il team di supporto di shopify mi ha rapidamente aiutato ad implementare questa funzionalità.
Vi riporto il codice modificato della sezione header.
Si nota come è stata creato un box che apparirà nella gestione dell'header per poter mettere il codice del logo svg (lo potete aprire con notepad++ o altro editor e fare copia incolla). Il codice lo trovate cercando "Abilita SVG personalizzato"
Si trova poi all'inizio una gestione dell'immagine cosi come la parte di override del png che potete trovare cercando "Adjusted by Salvo @ Shopify Theme Support"
se a qualcuno serve ho anche la modifica per il thema simple.
Se volete fate una comparazione di questo codice con quello originale del tema debut e saltano subito all'occhio le differenze.{% if section.settings.message %} <style> {% if section.settings.logo != blank %} .site-header__logo-image { max-width: {{ section.settings.logo_max_width | escape }}px; } {% endif %} {% if section.settings.align_logo == 'left' %} .site-header__logo-image { margin: 0; } {% endif %} </style> {% endif %} {% include 'search-drawer' %} <div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section> {% if section.settings.message %} {% if section.settings.home_page_only == false or request.page_type == 'index' %} <style> .announcement-bar { background-color: {{ section.settings.color_bg }}; } .announcement-bar--link:hover { {% assign brightness = section.settings.color_bg | color_brightness %} {% if brightness <= 192 %} {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %} background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }}; {% else %} {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %} background-color: {{ section.settings.color_bg | color_darken: darkenAmount }}; {% endif %} } .announcement-bar__message { color: {{ section.settings.color_text }}; } </style> {% if section.settings.message_link == blank %} <div class="announcement-bar"> {% else %} <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link"> {% endif %} <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p> {% if section.settings.message_link == blank %} </div> {% else %} </a> {% endif %} {% endif %} {% endif %} <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner"> <div class="grid grid--no-gutters grid--table site-header__mobile-nav"> {% if section.settings.align_logo == 'center' %} {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%} {% else %} {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%} {% endif %} <div class="grid__item {{ logo_classes }}"> {% comment %} Use the uploaded logo from theme settings if enabled. Site name gets precedence with H1 tag on homepage, div on other pages. {% endcomment %} {% if request.page_type == 'index' %} <h1 class="h2 site-header__logo"> {% else %} <div class="h2 site-header__logo"> {% endif %} {% comment %} Adjusted by Salvo @ Shopify Theme Support on April 27, 2020 {% endcomment %} {% if section.settings.logo or section.settings.custom_svg_enable %} {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}"> {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %} {% unless section.settings.custom_svg_enable %} <img class="lazyload js" src="{{ section.settings.logo | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ section.settings.logo.aspect_ratio }}" data-sizes="auto" alt="{{ logo_alt | escape }}" style="max-width: {{ section.settings.logo_max_width }}px"> <noscript> {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %} <img src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" style="max-width: {{ section.settings.logo_max_width }}px;"> </noscript> {% endunless %} {% if section.settings.custom_svg_enable %} {{ section.settings.custom_svg_code }} {% endif %} </a> {% else %} <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a> {% endif %} {% if request.page_type == 'index' %} </h1> {% else %} </div> {% endif %} </div> {% if section.settings.align_logo == 'left' %} <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist %} </nav> {% endif %} <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}"> <div class="site-header__icons-wrapper"> <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top"> {% include 'icon-search' %} <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span> </button> {% if shop.customer_accounts_enabled %} {% if customer %} <a href="{{ routes.account_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span> </a> {% else %} <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account"> {% include 'icon-login' %} <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span> </a> {% endif %} {% endif %} <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart"> {% include 'icon-cart' %} <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span> <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble> <span data-cart-count>{{ cart.item_count }}</span> <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span> </div> </a> {% unless linklists[section.settings.main_linklist] == blank %} <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}"> {% include 'icon-hamburger' %} {% include 'icon-close' %} </button> {% endunless %} </div> </div> </div> <nav class="mobile-nav-wrapper medium-up--hide" role="navigation"> <ul id="MobileNav" class="mobile-nav"> {% for link in linklists[section.settings.main_linklist].links %} {%- assign outerLoopIndex = forloop.index -%} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if link.links != blank %} {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">{{ link.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2"> <li class="visually-hidden" tabindex="-1" data-menu-title="2"> {{- link.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}"> {% include 'icon-chevron-left' %} </button> </div> <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent"> <span class="mobile-nav__label">{{ link.title | escape }}</span> </span> </div> </li> {% for childlink in link.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> {% if childlink.links != blank %} {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %} <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false"> <span class="mobile-nav__label">{{ childlink.title | escape }}</span> <div class="mobile-nav__icon"> {% include 'icon-chevron-right' %} </div> </button> <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3"> <li class="visually-hidden" tabindex="-1" data-menu-title="3"> {{- childlink.title }} {{ 'layout.navigation.menu' | t -}} </li> <li class="mobile-nav__item border-bottom"> <div class="mobile-nav__table"> <div class="mobile-nav__table-cell mobile-nav__return"> <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}"> {% include 'icon-chevron-left' %} </button> </div> <a href="{{ childlink.url }}" class="mobile-nav__sublist-link mobile-nav__sublist-header" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> </div> </li> {% for grandchildlink in childlink.links %} <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}"> <a href="{{ grandchildlink.url }}" class="mobile-nav__sublist-link" {% if grandchildlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span> </a> </li> {% endfor %} </ul> {% else %} <a href="{{ childlink.url }}" class="mobile-nav__sublist-link" {% if childlink.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ childlink.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> {% else %} <a href="{{ link.url }}" class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}" {% if link.current %} aria-current="page"{% endif %} > <span class="mobile-nav__label">{{ link.title | escape }}</span> </a> {% endif %} </li> {% endfor %} </ul> </nav> <script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = {"lang":"it","siteId":1692511,"enableCMP":true,"whitelabel":false,"cookiePolicyId":91933840, "banner":{ "acceptButtonDisplay":true,"customizeButtonDisplay":true,"position":"float-bottom-right" }}; </script> <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> </header> {% if section.settings.align_logo == 'center' %} <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation"> {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %} </nav> {% endif %} </div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": {{ shop.name | json }}, {% if section.settings.logo %} {% assign image_size = section.settings.logo.width | append:'x' %} "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }}, {% endif %} "sameAs": [ {{ settings.social_twitter_link | json }}, {{ settings.social_facebook_link | json }}, {{ settings.social_pinterest_link | json }}, {{ settings.social_instagram_link | json }}, {{ settings.social_tumblr_link | json }}, {{ settings.social_snapchat_link | json }}, {{ settings.social_youtube_link | json }}, {{ settings.social_vimeo_link | json }} ], "url": {{ shop.url | append: page.url | json }} } </script> {% if request.page_type == 'index' %} {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": {{ shop.name | json }}, "potentialAction": { "@type": "SearchAction", "target": {{ potential_action_target | json }}, "query-input": "required name=search_term_string" }, "url": {{ shop.url | append: page.url | json }} } </script> {% endif %} {% schema %} { "name": { "da": "Overskrift", "de": "Titel", "en": "Header", "es": "Encabezado", "fi": "Ylätunniste", "fr": "En-tête", "hi": "हैडर", "it": "Header", "ja": "ヘッダー", "ko": "머리글", "nb": "Header", "nl": "Koptekst", "pt-BR": "Cabeçalho", "pt-PT": "Cabeçalho", "sv": "Rubrik", "th": "ส่วนหัว", "zh-CN": "标头", "zh-TW": "標頭" }, "settings": [ { "type": "radio", "id": "align_logo", "label": { "da": "Logojustering", "de": "Logo-Ausrichtung", "en": "Logo alignment", "es": "Alineación de logotipo", "fi": "Logon tasaus", "fr": "Alignement du logo", "hi": "लोगो संरेखण", "it": "Allineamento logo", "ja": "ロゴアラインメント", "ko": "로고 정렬", "nb": "Logojustering", "nl": "Logo-uitlijning", "pt-BR": "Alinhamento do logotipo", "pt-PT": "Alinhamento do logótipo", "sv": "Logojustering", "th": "การจัดวางโลโก้", "zh-CN": "logo 对齐方式", "zh-TW": "商標對齊" }, "default": "left", "options": [ { "value": "left", "label": { "da": "Venstre", "de": "Links", "en": "Left", "es": "Izquierda", "fi": "Vasen", "fr": "Gauche", "hi": "बाएँ", "it": "Sinistra", "ja": "左", "ko": "왼쪽", "nb": "Venstre", "nl": "Links", "pt-BR": "Esquerda", "pt-PT": "Esquerda", "sv": "Vänster", "th": "ด้านซ้าย", "zh-CN": "左侧", "zh-TW": "左方" } }, { "value": "center", "label": { "da": "Centreret", "de": "Mittig", "en": "Centered", "es": "Centrada", "fi": "Keskitetty", "fr": "Centré", "hi": "केंद्र", "it": "Centrato", "ja": "中央揃え", "ko": "센터 맞추기", "nb": "Sentrert", "nl": "Gecentreerd", "pt-BR": "Centralizado", "pt-PT": "Centrado", "sv": "Centrera", "th": "ตรงกลาง", "zh-CN": "居中", "zh-TW": "置中" } } ] }, { "type": "image_picker", "id": "logo", "label": { "da": "Logobillede", "de": "Logo-Foto", "en": "Logo image", "es": "Logotipo", "fi": "Logokuva", "fr": "Image du logo", "hi": "लोगो इमेज", "it": "Immagine del logo", "ja": "ロゴ画像", "ko": "로고 이미지", "nb": "Logobilde", "nl": "Afbeelding van logo", "pt-BR": "Imagem do logotipo", "pt-PT": "Imagem do logótipo", "sv": "Logobild", "th": "รูปภาพโลโก้", "zh-CN": "logo 图片", "zh-TW": "標誌圖片" } }, { "type": "range", "id": "logo_max_width", "label": { "da": "Tilpasset logobredde", "de": "Logobreite", "en": "Custom logo width", "es": "Ancho del logotipo personalizado", "fi": "Mukautetun logon leveys", "fr": "Largeur personnalisée du logo", "hi": "कस्टम लोगो की चौड़ाई", "it": "Larghezza logo personalizzato", "ja": "ロゴの幅をカスタマイズする", "ko": "사용자 지정 로고 폭", "nb": "Tilpasset logobredde", "nl": "Aangepaste logo-breedte", "pt-BR": "Largura do logotipo personalizado", "pt-PT": "Largura de logótipo personalizada", "sv": "Anpassad logotypsbredd", "th": "ความกว้างของโลโก้แบบกำหนดเอง", "zh-CN": "自定义 logo 宽度", "zh-TW": "自訂商標寬度" }, "min": 50, "max": 250, "step": 5, "unit": "px", "default": 100 }, { "type": "checkbox", "id": "custom_svg_enable", "label": "Abilita SVG personalizzato" }, { "type": "textarea", "id": "custom_svg_code", "label": "Codice file SVG" }, { "type": "link_list", "id": "main_linklist", "label": { "da": "Menu", "de": "Menü", "en": "Menu", "es": "Menú", "fi": "Valikko", "fr": "Menu", "hi": "मेनू", "it": "Menu", "ja": "メニュー", "ko": "메뉴", "nb": "Meny", "nl": "Menu", "pt-BR": "Menu", "pt-PT": "Menu", "sv": "Meny", "th": "เมนู", "zh-CN": "菜单", "zh-TW": "選單" }, "default": "main-menu" }, { "type": "header", "content": { "da": "Meddelelseslinje", "de": "Ankündigungsbereich", "en": "Announcement bar", "es": "Barra de anuncios", "fi": "Ilmoituspalkki", "fr": "Barre d'annonces", "hi": "घोषणा बार", "it": "Barra degli annunci", "ja": "告知バー", "ko": "공지 표시줄", "nb": "Kunngjøringslinje", "nl": "Aankondigingsbalk", "pt-BR": "Barra de avisos", "pt-PT": "Barra de comunicado", "sv": "Meddelandefält", "th": "แถบประกาศ", "zh-CN": "公告栏", "zh-TW": "公告列" } }, { "type": "checkbox", "id": "message", "label": { "da": "Vis meddelelse", "de": "Ankündigung anzeigen", "en": "Show announcement", "es": "Mostrar anuncio", "fi": "Näytä ilmoitus", "fr": "Afficher l'annonce", "hi": "घोषणा डिखाएं", "it": "Mostra annuncio", "ja": "告知を表示する", "ko": "공지 표시", "nb": "Vis kunngjøring", "nl": "Aankondiging weergeven", "pt-BR": "Exibir anúncio", "pt-PT": "Mostrar comunicado", "sv": "Visa tillkännagivande", "th": "แสดงประกาศ", "zh-CN": "显示公告", "zh-TW": "顯示公告" }, "default": false }, { "type": "checkbox", "id": "home_page_only", "label": { "da": "Kun startside", "de": "Nur Startseite", "en": "Home page only", "es": "Solo página de inicio", "fi": "Vain etusivu", "fr": "Page d'accueil uniquement", "hi": "केवल होमपेज", "it": "Solo home page", "ja": "ホームページのみ", "ko": "홈페이지만", "nb": "Kun på startsiden", "nl": "Alleen homepage", "pt-BR": "Apenas na página inicial", "pt-PT": "Apenas a página inicial", "sv": "Endast hemsida", "th": "หน้าแรกเท่านั้น", "zh-CN": "仅主页", "zh-TW": "僅限首頁" }, "default": true }, { "type": "text", "id": "message_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": { "da": "Meddel noget her", "de": "Hier etwas ankündigen", "en": "Announce something here", "es": "Anuncia algo aquí", "fi": "Ilmoita jotakin tässä", "fr": "Annoncez quelque chose ici", "hi": "यहां कुछ घोषित करें", "it": "Annuncia qualcosa qui", "ja": "ここで告知してください", "ko": "여기에 공지하십시오", "nb": "Kunngjør noe her", "nl": "Kondig hier iets aan", "pt-BR": "Anuncie algo aqui", "pt-PT": "Anunciar algo aqui", "sv": "Meddela något här", "th": "ประกาศข้อความที่นี่", "zh-CN": "在此处进行公告", "zh-TW": "在此公告資訊" } }, { "type": "url", "id": "message_link", "label": { "da": "Link", "de": "Link", "en": "Link", "es": "Enlace", "fi": "Linkki", "fr": "Lien", "hi": "लिंक", "it": "Link", "ja": "リンク", "ko": "링크", "nb": "Kobling", "nl": "Link", "pt-BR": "Link", "pt-PT": "Ligação", "sv": "Länk", "th": "ลิงก์", "zh-CN": "链接", "zh-TW": "連結" }, "info": { "da": "Valgfri", "de": "Optional", "en": "Optional", "es": "Opcional", "fi": "Valinnainen", "fr": "Facultatif", "hi": "वैकल्पिक", "it": "Facoltativo", "ja": "オプション", "ko": "선택 사항", "nb": "Valgfritt", "nl": "Optioneel", "pt-BR": "Opcional", "pt-PT": "Opcional", "sv": "Valfritt", "th": "ไม่จำเป็น", "zh-CN": "可选", "zh-TW": "(選填)" } }, { "type": "color", "id": "color_bg", "label": { "da": "Bjælke", "de": "Zeile", "en": "Bar", "es": "Barra", "fi": "Palkki", "fr": "Barre", "hi": "बार", "it": "Barra", "ja": "バー", "ko": "바", "nb": "Felt", "nl": "Balk", "pt-BR": "Barra", "pt-PT": "Barra", "sv": "Fält", "th": "แถบ", "zh-CN": "栏", "zh-TW": "橫條" }, "default": "#3a3a3a" }, { "type": "color", "id": "color_text", "label": { "da": "Tekst", "de": "Text", "en": "Text", "es": "Texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" }, "default": "#ffffff" } ] } {% endschema %}
Immagina questo scenario: hai realizzato delle grafiche accattivanti perfette per una t...
By _Filo_ Apr 9, 2024Nota importantePrima di scendere nel vivo di questo argomento, ci tengo a sottolinear...
By Alessio Apr 8, 2024L'ecommerce non si ferma mai, e i commercianti come te sono sempre al lavoro per raggiu...
By _Filo_ Mar 27, 2024