Shopify themes, liquid, logos, and UX
Can anyone explain to me how I can add a logo to the footer like in the second image?
Keeping in mind I do not know anything about code so I am a complete noob
Solved! Go to the solution
This is an accepted solution.
Hey,
Now put this code on your footer,
<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">
<div class="grid-uniform">
{% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
{% assign show_social_icons = true %}
{% else %}
{% assign show_social_icons = false %}
{% endif %}
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign column_width = 'text-center' %}
{%- assign article_width = 480 -%}
{% when 2 %}
{% assign column_width = 'post-large--one-half medium--one-half' %}
{%- assign article_width = 480 -%}
{% when 3 %}
{% assign column_width = 'post-large--one-third medium--one-third' %}
{%- assign article_width = 435 -%}
{% when 4 %}
{% assign column_width = 'post-large--one-quarter medium--one-half' %}
{%- assign article_width = 410 -%}
{% when 5 %}
{% assign column_width = 'post-large--one-fifth medium--one-half' %}
{%- assign article_width = 335 -%}
{% when 6 %}
{% assign column_width = 'post-large--one-sixth medium--one-half' %}
{%- assign article_width = 335 -%}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'blog' %}
<div class="grid__item {{ column_width }} site-footer__links">
<h3 class="h4"><a href="/blogs/{{ block.settings.blog }}">{{ 'layout.footer.blog_title' | t }}</a></h3>
{% assign article = blogs[block.settings.blog].articles.first %}
<p class="h5">{{ article.title | link_to: article.url }}</p>
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: article_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>
<noscript>
<p>{{ article | img_url: 'large' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
<div class="clearfix">
{{ article.excerpt }}
</div>
{% else %}
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
</div>
{% when 'menu' %}
<div class="grid__item {{ column_width }}">
{% unless num_columns == 1 %}
<h3 class="h4">{{ block.settings.menu_title | escape }}</h3>
{% endunless %}
<ul class="site-footer__links{% if num_columns == 1 %} inline-list{% endif %}">
{% for link in linklists[block.settings.menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'social' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.social_title' | t }}</h3>
{% comment %}
Loop through the social network links
{% endcomment %}
{% include 'social-links' %}
</div>
{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
</div>
{% when 'html' %}
<div class="grid__item {{ column_width }}">
<a href="block.settings.logurl">
<img src="{{ block.settings.footerlg | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
itemprop="logo">
</a>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.newsletter_title' | t }}</h3>
{% unless block.settings.subtext == blank %}
{{ block.settings.subtext }}
{% endunless %}
{% include 'newsletter-form' %}
</div>
{% endcase %}
{% endfor %}
</div>
<hr class="hr--small hr--clear">
<div class="grid">
<div class="grid__item text-center">
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</p>
</div>
</div>
{% if section.settings.show_methods_of_payment %}
{% unless shop.enabled_payment_types == empty %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endunless %}
{% endif %}
</div>
</footer>
{% schema %}
{
"name": {
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fr": "Pied de page",
"it": "Footer",
"ja": "フッター",
"nl": "Voettekst",
"pt-BR": "Rodapé",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "show_methods_of_payment",
"label": {
"de": "Zahlungssymbole",
"en": "Payment icons",
"es": "Iconos de pago",
"fr": "Icônes de paiement",
"it": "Icone di pagamento",
"ja": "支払いアイコン",
"nl": "Betalingspictogrammen",
"pt-BR": "Ícones de pagamento",
"zh-CN": "付款图标",
"zh-TW": "付款圖示"
}
}
],
"blocks": [
{
"type": "menu",
"name": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"settings": [
{
"type": "text",
"id": "menu_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Links",
"en": "Links",
"es": "Enlaces",
"fr": "Liens",
"it": "Links",
"ja": "リンク",
"nl": "Links",
"pt-BR": "Links",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
}
}
]
},
{
"type": "text",
"name": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Kontaktieren Sie uns",
"en": "Contact us",
"es": "Ponte en contacto con nosotros",
"fr": "Contactez-nous",
"it": "Contattaci",
"ja": "お問い合わせ",
"nl": "Neem contact met ons op",
"pt-BR": "Fale conosco",
"zh-CN": "联系我们",
"zh-TW": "聯絡我們"
}
},
{
"type": "richtext",
"id": "richtext",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
},
{
"type": "blog",
"name": {
"de": "Letzter Blog-Beitrag",
"en": "Latest blog post",
"es": "Última entrada en el blog",
"fr": "Dernier article de blog",
"it": "Ultimo articolo del blog",
"ja": "最新のブログ記事",
"nl": "Laatste blogbericht",
"pt-BR": "Último post do blog",
"zh-CN": "最新博客文章",
"zh-TW": "最新的部落格貼文"
},
"settings": [
{
"type": "blog",
"id": "blog",
"label": {
"de": "Blog",
"en": "Blog",
"es": "Blog",
"fr": "Blog",
"it": "Blog",
"ja": "ブログ",
"nl": "Blog",
"pt-BR": "Blog",
"zh-CN": "博客",
"zh-TW": "部落格"
}
}
]
},
{
"type": "social",
"name": {
"de": "Social-Media-Symbole",
"en": "Social icons",
"es": "Iconos de redes sociales",
"fr": "Icônes de partage social",
"it": "Icone social",
"ja": "ソーシャルアイコン",
"nl": "Sociale pictogrammen",
"pt-BR": "Ícones de redes sociais",
"zh-CN": "社交图标",
"zh-TW": "社交圖示"
},
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": {
"de": "Einstellungen und Konten für soziale Netzwerke in den allgemeinen Einstellungen bearbeiten",
"en": "Edit your social settings and accounts in General settings",
"es": "Edita tus cuentas y configuraciones sociales en la configuración general",
"fr": "Modifiez vos paramètres et vos comptes sociaux dans les paramètres généraux",
"it": "Modifica impostazioni e account social nelle Impostazioni generali",
"ja": "一般設定でソーシャル設定とアカウント設定を編集する",
"nl": "Bewerk uw instellingen en accounts voor social media in Algemene instellingen",
"pt-BR": "Edite suas contas e configurações de redes sociais nas Configurações gerais.",
"zh-CN": "在“通用”设置中编辑社媒设置和社媒帐户",
"zh-TW": "在「一般」設定中編輯社群設定和帳號"
}
}
]
},
{
"type": "html",
"name": {
"de": "Fußzeilenlogo",
"en": "Footer Logo",
"es": "Logotipo de pie de página",
"fr": "Footer Logo",
"it": "Logo a piè di pagina",
"ja": "フッターロゴ",
"pt-BR": "Footer Logo"
},
"settings": [
{
"type": "image_picker",
"id": "footerlg",
"label": {
"de": "Bild-Logo",
"en": "Image Logo",
"es": "Logo de imagen",
"fr": "Image Logo",
"it": "Logo dell immagine",
"ja": "画像ロゴ",
"pt-BR": "Image Logo"
}
},
{
"type": "url",
"id": "logurl",
"label": {
"de": "Bildpfad",
"en": "Image Path",
"es": "ruta de la imagen",
"fr": "image path",
"it": "percorso dell immagine",
"ja": "画像パス",
"pt-BR": "caminho da imagem"
}
}
]
},
{
"type": "newsletter",
"name": {
"de": "Newsletter-Anmeldung",
"en": "Newsletter signup",
"es": "Suscripción al boletín",
"fr": "Inscription",
"it": "Iscrizione Newsletter",
"ja": "メールマガジンの登録",
"nl": "Nieuwsbriefaanmelding",
"pt-BR": "Assinatura da newsletter",
"zh-CN": "新闻通讯注册",
"zh-TW": "訂閱電子報"
},
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "subtext",
"label": {
"de": "Subtext",
"en": "Subtext",
"es": "Subtexto",
"fr": "Sous-texte",
"it": "Sottotesto",
"ja": "サブテキスト",
"nl": "Subtekst",
"pt-BR": "Subtexto",
"zh-CN": "子文本",
"zh-TW": "子文字"
},
"default": {
"de": "<p>Melden Sie sich für die neuesten Nachrichten, Angebote und Stile an</p>",
"en": "<p>Sign up for the latest news, offers and styles</p>",
"es": "<p>Regístrate para recibir las últimas noticias, ofertas y estilos</p>",
"fr": "<p>Inscrivez-vous pour connaître les derniers styles, offres et nouvelles</p>",
"it": "<p>Iscriviti per ricevere le ultime novità, offerte e stili</p>",
"ja": "<p>登録して最新のニュース、オファー、スタイルを受け取る</p>",
"nl": "<p>Meld u aan voor het laatste nieuws, aanbiedingen en stijlen</p>",
"pt-BR": "<p>Inscreva-se para receber os últimos estilos, notícias e ofertas</p>",
"zh-CN": "<p>注册以获取最新新闻、优惠和样式</p>",
"zh-TW": "<p>訂閱最新消息、優惠和樣式</p>"
}
}
]
}
]
}
{% endschema %}
After adding this code on footer go to Theme -> customization -> Footer -> add content you will see the Footer logo option.
Select this option now you will be able to add logo on footer.
Hello CortadoCups,
You have to add schema and code in footer.liquid.
1. Schema for image logo in footer before this " { "type": "newsletter","
{
"type": "html",
"name": {
"de": "Fußzeilenlogo",
"en": "Footer Logo",
"es": "Logotipo de pie de página",
"fr": "Footer Logo",
"it": "Logo a piè di pagina",
"ja": "フッターロゴ",
"pt-BR": "Footer Logo"
},
"settings": [
{
"type": "image_picker",
"id": "footerlg",
"label": {
"de": "Bild-Logo",
"en": "Image Logo",
"es": "Logo de imagen",
"fr": "Image Logo",
"it": "Logo dell immagine",
"ja": "画像ロゴ",
"pt-BR": "Image Logo"
}
},
{
"type": "url",
"id": "logurl",
"label": {
"de": "Bildpfad",
"en": "Image Path",
"es": "ruta de la imagen",
"fr": "image path",
"it": "percorso dell immagine",
"ja": "画像パス",
"pt-BR": "caminho da imagem"
}
}
]
},
2. code in footer before this code " {% when 'newsletter' %}"
{% when 'html' %}
<div class="grid__item {{ column_width }}">
<a href="block.settings.logurl">
<img src="{{ block.settings.footerlg | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
itemprop="logo">
</a>
</div>
Now you able to pic logo image for footer section.
Thanks Pallavi!
after entering the code I received this error message
Hey Cortado,
Can you please share footer.liquid code with us.
I need to check is everything properly formatted in correct place.
Hi Palllavi,
I really appreciate your help!
This is the footer liquid before I attempted to add anything to it.
<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">
<div class="grid-uniform">
{% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
{% assign show_social_icons = true %}
{% else %}
{% assign show_social_icons = false %}
{% endif %}
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign column_width = 'text-center' %}
{%- assign article_width = 480 -%}
{% when 2 %}
{% assign column_width = 'post-large--one-half medium--one-half' %}
{%- assign article_width = 480 -%}
{% when 3 %}
{% assign column_width = 'post-large--one-third medium--one-third' %}
{%- assign article_width = 435 -%}
{% when 4 %}
{% assign column_width = 'post-large--one-quarter medium--one-half' %}
{%- assign article_width = 410 -%}
{% when 5 %}
{% assign column_width = 'post-large--one-fifth medium--one-half' %}
{%- assign article_width = 335 -%}
{% when 6 %}
{% assign column_width = 'post-large--one-sixth medium--one-half' %}
{%- assign article_width = 335 -%}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'blog' %}
<div class="grid__item {{ column_width }} site-footer__links">
<h3 class="h4"><a href="/blogs/{{ block.settings.blog }}">{{ 'layout.footer.blog_title' | t }}</a></h3>
{% assign article = blogs[block.settings.blog].articles.first %}
<p class="h5">{{ article.title | link_to: article.url }}</p>
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: article_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>
<noscript>
<p>{{ article | img_url: 'large' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
<div class="clearfix">
{{ article.excerpt }}
</div>
{% else %}
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
</div>
{% when 'menu' %}
<div class="grid__item {{ column_width }}">
{% unless num_columns == 1 %}
<h3 class="h4">{{ block.settings.menu_title | escape }}</h3>
{% endunless %}
<ul class="site-footer__links{% if num_columns == 1 %} inline-list{% endif %}">
{% for link in linklists[block.settings.menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'social' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.social_title' | t }}</h3>
{% comment %}
Loop through the social network links
{% endcomment %}
{% include 'social-links' %}
</div>
{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.newsletter_title' | t }}</h3>
{% unless block.settings.subtext == blank %}
{{ block.settings.subtext }}
{% endunless %}
{% include 'newsletter-form' %}
</div>
{% endcase %}
{% endfor %}
</div>
<hr class="hr--small hr--clear">
<div class="grid">
<div class="grid__item text-center">
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</p>
</div>
</div>
{% if section.settings.show_methods_of_payment %}
{% unless shop.enabled_payment_types == empty %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endunless %}
{% endif %}
</div>
</footer>
{% schema %}
{
"name": {
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fr": "Pied de page",
"it": "Footer",
"ja": "フッター",
"nl": "Voettekst",
"pt-BR": "Rodapé",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "show_methods_of_payment",
"label": {
"de": "Zahlungssymbole",
"en": "Payment icons",
"es": "Iconos de pago",
"fr": "Icônes de paiement",
"it": "Icone di pagamento",
"ja": "支払いアイコン",
"nl": "Betalingspictogrammen",
"pt-BR": "Ícones de pagamento",
"zh-CN": "付款图标",
"zh-TW": "付款圖示"
}
}
],
"blocks": [
{
"type": "menu",
"name": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"settings": [
{
"type": "text",
"id": "menu_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Links",
"en": "Links",
"es": "Enlaces",
"fr": "Liens",
"it": "Links",
"ja": "リンク",
"nl": "Links",
"pt-BR": "Links",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
}
}
]
},
{
"type": "text",
"name": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Kontaktieren Sie uns",
"en": "Contact us",
"es": "Ponte en contacto con nosotros",
"fr": "Contactez-nous",
"it": "Contattaci",
"ja": "お問い合わせ",
"nl": "Neem contact met ons op",
"pt-BR": "Fale conosco",
"zh-CN": "联系我们",
"zh-TW": "聯絡我們"
}
},
{
"type": "richtext",
"id": "richtext",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
},
{
"type": "blog",
"name": {
"de": "Letzter Blog-Beitrag",
"en": "Latest blog post",
"es": "Última entrada en el blog",
"fr": "Dernier article de blog",
"it": "Ultimo articolo del blog",
"ja": "最新のブログ記事",
"nl": "Laatste blogbericht",
"pt-BR": "Último post do blog",
"zh-CN": "最新博客文章",
"zh-TW": "最新的部落格貼文"
},
"settings": [
{
"type": "blog",
"id": "blog",
"label": {
"de": "Blog",
"en": "Blog",
"es": "Blog",
"fr": "Blog",
"it": "Blog",
"ja": "ブログ",
"nl": "Blog",
"pt-BR": "Blog",
"zh-CN": "博客",
"zh-TW": "部落格"
}
}
]
},
{
"type": "social",
"name": {
"de": "Social-Media-Symbole",
"en": "Social icons",
"es": "Iconos de redes sociales",
"fr": "Icônes de partage social",
"it": "Icone social",
"ja": "ソーシャルアイコン",
"nl": "Sociale pictogrammen",
"pt-BR": "Ícones de redes sociais",
"zh-CN": "社交图标",
"zh-TW": "社交圖示"
},
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": {
"de": "Einstellungen und Konten für soziale Netzwerke in den allgemeinen Einstellungen bearbeiten",
"en": "Edit your social settings and accounts in General settings",
"es": "Edita tus cuentas y configuraciones sociales en la configuración general",
"fr": "Modifiez vos paramètres et vos comptes sociaux dans les paramètres généraux",
"it": "Modifica impostazioni e account social nelle Impostazioni generali",
"ja": "一般設定でソーシャル設定とアカウント設定を編集する",
"nl": "Bewerk uw instellingen en accounts voor social media in Algemene instellingen",
"pt-BR": "Edite suas contas e configurações de redes sociais nas Configurações gerais.",
"zh-CN": "在“通用”设置中编辑社媒设置和社媒帐户",
"zh-TW": "在「一般」設定中編輯社群設定和帳號"
}
}
]
},
{
"type": "newsletter",
"name": {
"de": "Newsletter-Anmeldung",
"en": "Newsletter signup",
"es": "Suscripción al boletín",
"fr": "Inscription",
"it": "Iscrizione Newsletter",
"ja": "メールマガジンの登録",
"nl": "Nieuwsbriefaanmelding",
"pt-BR": "Assinatura da newsletter",
"zh-CN": "新闻通讯注册",
"zh-TW": "訂閱電子報"
},
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "subtext",
"label": {
"de": "Subtext",
"en": "Subtext",
"es": "Subtexto",
"fr": "Sous-texte",
"it": "Sottotesto",
"ja": "サブテキスト",
"nl": "Subtekst",
"pt-BR": "Subtexto",
"zh-CN": "子文本",
"zh-TW": "子文字"
},
"default": {
"de": "<p>Melden Sie sich für die neuesten Nachrichten, Angebote und Stile an</p>",
"en": "<p>Sign up for the latest news, offers and styles</p>",
"es": "<p>Regístrate para recibir las últimas noticias, ofertas y estilos</p>",
"fr": "<p>Inscrivez-vous pour connaître les derniers styles, offres et nouvelles</p>",
"it": "<p>Iscriviti per ricevere le ultime novità, offerte e stili</p>",
"ja": "<p>登録して最新のニュース、オファー、スタイルを受け取る</p>",
"nl": "<p>Meld u aan voor het laatste nieuws, aanbiedingen en stijlen</p>",
"pt-BR": "<p>Inscreva-se para receber os últimos estilos, notícias e ofertas</p>",
"zh-CN": "<p>注册以获取最新新闻、优惠和样式</p>",
"zh-TW": "<p>訂閱最新消息、優惠和樣式</p>"
}
}
]
}
]
}
{% endschema %}
This is an accepted solution.
Hey,
Now put this code on your footer,
<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">
<div class="grid-uniform">
{% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
{% assign show_social_icons = true %}
{% else %}
{% assign show_social_icons = false %}
{% endif %}
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign column_width = 'text-center' %}
{%- assign article_width = 480 -%}
{% when 2 %}
{% assign column_width = 'post-large--one-half medium--one-half' %}
{%- assign article_width = 480 -%}
{% when 3 %}
{% assign column_width = 'post-large--one-third medium--one-third' %}
{%- assign article_width = 435 -%}
{% when 4 %}
{% assign column_width = 'post-large--one-quarter medium--one-half' %}
{%- assign article_width = 410 -%}
{% when 5 %}
{% assign column_width = 'post-large--one-fifth medium--one-half' %}
{%- assign article_width = 335 -%}
{% when 6 %}
{% assign column_width = 'post-large--one-sixth medium--one-half' %}
{%- assign article_width = 335 -%}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'blog' %}
<div class="grid__item {{ column_width }} site-footer__links">
<h3 class="h4"><a href="/blogs/{{ block.settings.blog }}">{{ 'layout.footer.blog_title' | t }}</a></h3>
{% assign article = blogs[block.settings.blog].articles.first %}
<p class="h5">{{ article.title | link_to: article.url }}</p>
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: article_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>
<noscript>
<p>{{ article | img_url: 'large' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
<div class="clearfix">
{{ article.excerpt }}
</div>
{% else %}
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
</div>
{% when 'menu' %}
<div class="grid__item {{ column_width }}">
{% unless num_columns == 1 %}
<h3 class="h4">{{ block.settings.menu_title | escape }}</h3>
{% endunless %}
<ul class="site-footer__links{% if num_columns == 1 %} inline-list{% endif %}">
{% for link in linklists[block.settings.menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'social' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.social_title' | t }}</h3>
{% comment %}
Loop through the social network links
{% endcomment %}
{% include 'social-links' %}
</div>
{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
</div>
{% when 'html' %}
<div class="grid__item {{ column_width }}">
<a href="block.settings.logurl">
<img src="{{ block.settings.footerlg | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
itemprop="logo">
</a>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.newsletter_title' | t }}</h3>
{% unless block.settings.subtext == blank %}
{{ block.settings.subtext }}
{% endunless %}
{% include 'newsletter-form' %}
</div>
{% endcase %}
{% endfor %}
</div>
<hr class="hr--small hr--clear">
<div class="grid">
<div class="grid__item text-center">
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</p>
</div>
</div>
{% if section.settings.show_methods_of_payment %}
{% unless shop.enabled_payment_types == empty %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endunless %}
{% endif %}
</div>
</footer>
{% schema %}
{
"name": {
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fr": "Pied de page",
"it": "Footer",
"ja": "フッター",
"nl": "Voettekst",
"pt-BR": "Rodapé",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "show_methods_of_payment",
"label": {
"de": "Zahlungssymbole",
"en": "Payment icons",
"es": "Iconos de pago",
"fr": "Icônes de paiement",
"it": "Icone di pagamento",
"ja": "支払いアイコン",
"nl": "Betalingspictogrammen",
"pt-BR": "Ícones de pagamento",
"zh-CN": "付款图标",
"zh-TW": "付款圖示"
}
}
],
"blocks": [
{
"type": "menu",
"name": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"settings": [
{
"type": "text",
"id": "menu_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Links",
"en": "Links",
"es": "Enlaces",
"fr": "Liens",
"it": "Links",
"ja": "リンク",
"nl": "Links",
"pt-BR": "Links",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
}
}
]
},
{
"type": "text",
"name": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Kontaktieren Sie uns",
"en": "Contact us",
"es": "Ponte en contacto con nosotros",
"fr": "Contactez-nous",
"it": "Contattaci",
"ja": "お問い合わせ",
"nl": "Neem contact met ons op",
"pt-BR": "Fale conosco",
"zh-CN": "联系我们",
"zh-TW": "聯絡我們"
}
},
{
"type": "richtext",
"id": "richtext",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
},
{
"type": "blog",
"name": {
"de": "Letzter Blog-Beitrag",
"en": "Latest blog post",
"es": "Última entrada en el blog",
"fr": "Dernier article de blog",
"it": "Ultimo articolo del blog",
"ja": "最新のブログ記事",
"nl": "Laatste blogbericht",
"pt-BR": "Último post do blog",
"zh-CN": "最新博客文章",
"zh-TW": "最新的部落格貼文"
},
"settings": [
{
"type": "blog",
"id": "blog",
"label": {
"de": "Blog",
"en": "Blog",
"es": "Blog",
"fr": "Blog",
"it": "Blog",
"ja": "ブログ",
"nl": "Blog",
"pt-BR": "Blog",
"zh-CN": "博客",
"zh-TW": "部落格"
}
}
]
},
{
"type": "social",
"name": {
"de": "Social-Media-Symbole",
"en": "Social icons",
"es": "Iconos de redes sociales",
"fr": "Icônes de partage social",
"it": "Icone social",
"ja": "ソーシャルアイコン",
"nl": "Sociale pictogrammen",
"pt-BR": "Ícones de redes sociais",
"zh-CN": "社交图标",
"zh-TW": "社交圖示"
},
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": {
"de": "Einstellungen und Konten für soziale Netzwerke in den allgemeinen Einstellungen bearbeiten",
"en": "Edit your social settings and accounts in General settings",
"es": "Edita tus cuentas y configuraciones sociales en la configuración general",
"fr": "Modifiez vos paramètres et vos comptes sociaux dans les paramètres généraux",
"it": "Modifica impostazioni e account social nelle Impostazioni generali",
"ja": "一般設定でソーシャル設定とアカウント設定を編集する",
"nl": "Bewerk uw instellingen en accounts voor social media in Algemene instellingen",
"pt-BR": "Edite suas contas e configurações de redes sociais nas Configurações gerais.",
"zh-CN": "在“通用”设置中编辑社媒设置和社媒帐户",
"zh-TW": "在「一般」設定中編輯社群設定和帳號"
}
}
]
},
{
"type": "html",
"name": {
"de": "Fußzeilenlogo",
"en": "Footer Logo",
"es": "Logotipo de pie de página",
"fr": "Footer Logo",
"it": "Logo a piè di pagina",
"ja": "フッターロゴ",
"pt-BR": "Footer Logo"
},
"settings": [
{
"type": "image_picker",
"id": "footerlg",
"label": {
"de": "Bild-Logo",
"en": "Image Logo",
"es": "Logo de imagen",
"fr": "Image Logo",
"it": "Logo dell immagine",
"ja": "画像ロゴ",
"pt-BR": "Image Logo"
}
},
{
"type": "url",
"id": "logurl",
"label": {
"de": "Bildpfad",
"en": "Image Path",
"es": "ruta de la imagen",
"fr": "image path",
"it": "percorso dell immagine",
"ja": "画像パス",
"pt-BR": "caminho da imagem"
}
}
]
},
{
"type": "newsletter",
"name": {
"de": "Newsletter-Anmeldung",
"en": "Newsletter signup",
"es": "Suscripción al boletín",
"fr": "Inscription",
"it": "Iscrizione Newsletter",
"ja": "メールマガジンの登録",
"nl": "Nieuwsbriefaanmelding",
"pt-BR": "Assinatura da newsletter",
"zh-CN": "新闻通讯注册",
"zh-TW": "訂閱電子報"
},
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "subtext",
"label": {
"de": "Subtext",
"en": "Subtext",
"es": "Subtexto",
"fr": "Sous-texte",
"it": "Sottotesto",
"ja": "サブテキスト",
"nl": "Subtekst",
"pt-BR": "Subtexto",
"zh-CN": "子文本",
"zh-TW": "子文字"
},
"default": {
"de": "<p>Melden Sie sich für die neuesten Nachrichten, Angebote und Stile an</p>",
"en": "<p>Sign up for the latest news, offers and styles</p>",
"es": "<p>Regístrate para recibir las últimas noticias, ofertas y estilos</p>",
"fr": "<p>Inscrivez-vous pour connaître les derniers styles, offres et nouvelles</p>",
"it": "<p>Iscriviti per ricevere le ultime novità, offerte e stili</p>",
"ja": "<p>登録して最新のニュース、オファー、スタイルを受け取る</p>",
"nl": "<p>Meld u aan voor het laatste nieuws, aanbiedingen en stijlen</p>",
"pt-BR": "<p>Inscreva-se para receber os últimos estilos, notícias e ofertas</p>",
"zh-CN": "<p>注册以获取最新新闻、优惠和样式</p>",
"zh-TW": "<p>訂閱最新消息、優惠和樣式</p>"
}
}
]
}
]
}
{% endschema %}
After adding this code on footer go to Theme -> customization -> Footer -> add content you will see the Footer logo option.
Select this option now you will be able to add logo on footer.
It worked! Thank you!
I got this Error: Invalid JSON in tag 'schema'
This my footer code
<footer class="site-footer-wrapper" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="footer" itemscope itemtype="http://schema.org/Organization">
{% if section.settings.footer_image %}
<a href="/" itemprop="url" class="footer-logo" id="footerLogo" style="opacity:0;">
<img src="{{ section.settings.footer_image | img_url: 'x200' }}" alt="{{ section.settings.footer_image.alt | default: shop.name }}" itemprop="logo" id="footerLogoImg-{{ section.id }}"/>
</a>
{% endif %}
<div class="wrapper site-footer">
<div class="grid-uniform">
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = 'large--one-half push--large--one-quarter' %}
{% when 2 %}
{% assign footer_column_width = 'large--one-half' %}
{% when 3 %}
{% assign footer_column_width = 'large--one-third' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter' %}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'linklist' %}
{% assign linklist = linklists[block.settings.linklist] %}
<div class="grid__item {{ footer_column_width }} footer__block" {{ block.shopify_attributes }}>
<p class="uppercase footer__title">{{ linklist.title }}</p>
<hr class="hr--underline">
<ul class="footer-quicklinks">
{% for link in linklist.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'page' %}
{% assign page = pages[block.settings.page] %}
{% if page == blank or page.empty? %}
<div class="grid__item {{ footer_column_width }} footer__block" {{ block.shopify_attributes }}>
<p class="uppercase footer__title">{{ shop.name }}</p>
<hr class="hr--underline">
<div class="rte">{{ 'home_page.onboarding.no_content' | t }}</div>
</div>
{% else %}
<div class="grid__item {{ footer_column_width }} footer__block" {{ block.shopify_attributes }}>
<p class="uppercase footer__title">{{ page.title | escape }}</p>
<hr class="hr--underline">
<div class="rte">{{ page.content }}</div>
</div>
{% endif %}
{% when 'text' %}
<div class="grid__item {{ footer_column_width }} footer__block" {{ block.shopify_attributes }}>
<p class="uppercase footer__title">{{ block.settings.title | escape }}</p>
<hr class="hr--underline">
<div class="rte">{{ block.settings.text }}</div>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ footer_column_width }} footer__block" {{ block.shopify_attributes }}>
<p class="uppercase footer__title">{{ 'layout.footer.newsletter_title' | t }}</p>
<hr class="hr--underline">
<div class="rte">
{{ block.settings.richtext }}
</div>
{% include 'newsletter-form' %}
</div>
{% else %}
{% endcase %}
{% endfor %}
</div>
<div class="grid footer-secondary-wrapper">
<ul class="footer-secondary grid__item inline-list">
<li><a href="{{ shop.secure_url }}" itemprop="url">© {{ shop.name }} {{ 'now' | date: "%Y" }}</a></li>
{% for link in linklists[section.settings.footer_secondary_linklist].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<!-- Remove the following two lines to delete Shopify and Pipeline credit -->
<li>{{ powered_by_link }}</li>
<li><a href="https://groupthought.com">{{ 'layout.footer.credit' | t }}</a></li>
<!-- stop deleting here 🙂 -->
</ul>
{% if section.settings.footer_payment_enable %}
{% unless shop.enabled_payment_types == empty %}
<ul class="footer-payment payment-icons grid__item inline-list">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class:'payment-icon' }}
<span class="visually-hidden">{{ type | capitalize | replace: '_', ' ' }}</span>
</li>
{% endfor %}
</ul>
{% endunless %}
{% endif %}
{% if section.settings.footer_social_enable %}
<ul class="footer-social social-icons grid__item inline-list">
{% if settings.social_twitter_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_twitter_link }}" title="{{ shop.name }} on Twitter" target="_blank" itemprop="sameAs">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="fallback-text">Twitter</span>
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_facebook_link }}" title="{{ shop.name }} on Facebook" target="_blank" itemprop="sameAs">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="fallback-text">Facebook</span>
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_instagram_link }}" title="{{ shop.name }} on Instagram" target="_blank" itemprop="sameAs">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_pinterest_link }}" title="{{ shop.name }} on Pinterest" target="_blank" itemprop="sameAs">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="fallback-text">Pinterest</span>
</a>
</li>
{% endif %}
{% if settings.social_google_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_google_link }}" title="{{ shop.name }} on Google Plus" target="_blank" itemprop="sameAs">
<span class="icon icon-google_plus" aria-hidden="true"></span>
<span class="fallback-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_youtube_link }}" title="{{ shop.name }} on Youtube" target="_blank" itemprop="sameAs">
<span class="icon icon-youtube" aria-hidden="true"></span>
<span class="fallback-text">Youtube</span>
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_vimeo_link }}" title="{{ shop.name }} on Vimeo" target="_blank" itemprop="sameAs">
<span class="icon icon-vimeo" aria-hidden="true"></span>
<span class="fallback-text">Vimeo</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_tumblr_link }}" title="{{ shop.name }} on Tumblr" target="_blank" itemprop="sameAs">
<span class="icon icon-tumblr" aria-hidden="true"></span>
<span class="fallback-text">Tumblr</span>
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_fancy_link }}" title="{{ shop.name }} on Fancy" target="_blank" itemprop="sameAs">
<span class="icon icon-fancy" aria-hidden="true"></span>
<span class="fallback-text">Fancy</span>
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"max_blocks": 4,
"settings": [
{
"label": "Footer logo",
"type": "image_picker",
"id": "footer_image",
"info": "400 x 200px .png"
},
{
"type": "header",
"content": "Bottom bar"
},
{
"type": "link_list",
"id": "footer_secondary_linklist",
"label": "Link List",
"info": "This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "footer_payment_enable",
"label": "Show payment types"
},
{
"type": "checkbox",
"id": "footer_social_enable",
"label": "Show social icons"
}
],
"blocks" : [
{
"type": "linklist",
"name": "Link list",
"settings": [
{
"type": "link_list",
"id": "linklist",
"label": "Link list",
"default": "main-menu",
"info": "This menu won't show dropdown items"
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers). Sync to Mailchimp with the official [Mailchimp app](https://apps.shopify.com/mailchimp)."
},
{
"id": "richtext",
"type": "richtext",
"label": "Newsletter description",
"default": "<p>Join to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text column"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Share store details, promotions, or brand content with your customers.</p>"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"id": "page",
"type": "page",
"label": "Page"
}
]
}
]
}
{% endschema %}
Hi,
I have followed your instructions to edit the the footer liquid code and this worked great. I now can add a logo image in the footer section with the drop down option. When i add a URL link to this image it keep giving me the error 404 not found, can you please help?
Hi, I want to add logo in my footer too, could you help me?
I am using Brooklyn theme, my website is https://shoppystark.com/
The password is 10.
Here is a picture:
Hi, I am also trying to put a logo in the footer on the far left. I get an error when I try to change the footer.liquid that it was unable to save due to an error. Can you help me solve this?
My site is not life yet, is there any way I can share it with you?
Thanx, Linda
Hey i've got a question please.
I would like to do the same :
- put my logo like that
AND also put instagram and facebook icon to the link under the FAQ on the footer
I can't do it. Please, could you help me please ? Thanks
Thanks for the answer.
But I have one observation... The logo url doesn't work.
The code inside the a tag was left as href="block.settings.logurl", when it shoud have been href="{{ block.settings.logurl }}". So the url provided never reached the a tag.
Here is the fixed code:
<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">
<div class="grid-uniform">
{% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
{% assign show_social_icons = true %}
{% else %}
{% assign show_social_icons = false %}
{% endif %}
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign column_width = 'text-center' %}
{%- assign article_width = 480 -%}
{% when 2 %}
{% assign column_width = 'post-large--one-half medium--one-half' %}
{%- assign article_width = 480 -%}
{% when 3 %}
{% assign column_width = 'post-large--one-third medium--one-third' %}
{%- assign article_width = 435 -%}
{% when 4 %}
{% assign column_width = 'post-large--one-quarter medium--one-half' %}
{%- assign article_width = 410 -%}
{% when 5 %}
{% assign column_width = 'post-large--one-fifth medium--one-half' %}
{%- assign article_width = 335 -%}
{% when 6 %}
{% assign column_width = 'post-large--one-sixth medium--one-half' %}
{%- assign article_width = 335 -%}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'blog' %}
<div class="grid__item {{ column_width }} site-footer__links">
<h3 class="h4"><a href="/blogs/{{ block.settings.blog }}">{{ 'layout.footer.blog_title' | t }}</a></h3>
{% assign article = blogs[block.settings.blog].articles.first %}
<p class="h5">{{ article.title | link_to: article.url }}</p>
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: article_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>
<noscript>
<p>{{ article | img_url: 'large' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
<div class="clearfix">
{{ article.excerpt }}
</div>
{% else %}
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
</div>
{% when 'menu' %}
<div class="grid__item {{ column_width }}">
{% unless num_columns == 1 %}
<h3 class="h4">{{ block.settings.menu_title | escape }}</h3>
{% endunless %}
<ul class="site-footer__links{% if num_columns == 1 %} inline-list{% endif %}">
{% for link in linklists[block.settings.menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'social' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.social_title' | t }}</h3>
{% comment %}
Loop through the social network links
{% endcomment %}
{% include 'social-links' %}
</div>
{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
</div>
{% when 'html' %}
<div class="grid__item {{ column_width }}">
<a href="{{ block.settings.logurl }}">
<img src="{{ block.settings.footerlg | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
itemprop="logo">
</a>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.newsletter_title' | t }}</h3>
{% unless block.settings.subtext == blank %}
{{ block.settings.subtext }}
{% endunless %}
{% include 'newsletter-form' %}
</div>
{% endcase %}
{% endfor %}
</div>
<hr class="hr--small hr--clear">
<div class="grid">
<div class="grid__item text-center">
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</p>
</div>
</div>
{% if section.settings.show_methods_of_payment %}
{% unless shop.enabled_payment_types == empty %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endunless %}
{% endif %}
</div>
</footer>
{% schema %}
{
"name": {
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fr": "Pied de page",
"it": "Footer",
"ja": "フッター",
"nl": "Voettekst",
"pt-BR": "Rodapé",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "show_methods_of_payment",
"label": {
"de": "Zahlungssymbole",
"en": "Payment icons",
"es": "Iconos de pago",
"fr": "Icônes de paiement",
"it": "Icone di pagamento",
"ja": "支払いアイコン",
"nl": "Betalingspictogrammen",
"pt-BR": "Ícones de pagamento",
"zh-CN": "付款图标",
"zh-TW": "付款圖示"
}
}
],
"blocks": [
{
"type": "menu",
"name": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"settings": [
{
"type": "text",
"id": "menu_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Links",
"en": "Links",
"es": "Enlaces",
"fr": "Liens",
"it": "Links",
"ja": "リンク",
"nl": "Links",
"pt-BR": "Links",
"zh-CN": "链接",
"zh-TW": "連結"
}
},
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
}
}
]
},
{
"type": "text",
"name": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Kontaktieren Sie uns",
"en": "Contact us",
"es": "Ponte en contacto con nosotros",
"fr": "Contactez-nous",
"it": "Contattaci",
"ja": "お問い合わせ",
"nl": "Neem contact met ons op",
"pt-BR": "Fale conosco",
"zh-CN": "联系我们",
"zh-TW": "聯絡我們"
}
},
{
"type": "richtext",
"id": "richtext",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
},
{
"type": "blog",
"name": {
"de": "Letzter Blog-Beitrag",
"en": "Latest blog post",
"es": "Última entrada en el blog",
"fr": "Dernier article de blog",
"it": "Ultimo articolo del blog",
"ja": "最新のブログ記事",
"nl": "Laatste blogbericht",
"pt-BR": "Último post do blog",
"zh-CN": "最新博客文章",
"zh-TW": "最新的部落格貼文"
},
"settings": [
{
"type": "blog",
"id": "blog",
"label": {
"de": "Blog",
"en": "Blog",
"es": "Blog",
"fr": "Blog",
"it": "Blog",
"ja": "ブログ",
"nl": "Blog",
"pt-BR": "Blog",
"zh-CN": "博客",
"zh-TW": "部落格"
}
}
]
},
{
"type": "social",
"name": {
"de": "Social-Media-Symbole",
"en": "Social icons",
"es": "Iconos de redes sociales",
"fr": "Icônes de partage social",
"it": "Icone social",
"ja": "ソーシャルアイコン",
"nl": "Sociale pictogrammen",
"pt-BR": "Ícones de redes sociais",
"zh-CN": "社交图标",
"zh-TW": "社交圖示"
},
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": {
"de": "Einstellungen und Konten für soziale Netzwerke in den allgemeinen Einstellungen bearbeiten",
"en": "Edit your social settings and accounts in General settings",
"es": "Edita tus cuentas y configuraciones sociales en la configuración general",
"fr": "Modifiez vos paramètres et vos comptes sociaux dans les paramètres généraux",
"it": "Modifica impostazioni e account social nelle Impostazioni generali",
"ja": "一般設定でソーシャル設定とアカウント設定を編集する",
"nl": "Bewerk uw instellingen en accounts voor social media in Algemene instellingen",
"pt-BR": "Edite suas contas e configurações de redes sociais nas Configurações gerais.",
"zh-CN": "在“通用”设置中编辑社媒设置和社媒帐户",
"zh-TW": "在「一般」設定中編輯社群設定和帳號"
}
}
]
},
{
"type": "html",
"name": {
"de": "Fußzeilenlogo",
"en": "Footer Logo",
"es": "Logotipo de pie de página",
"fr": "Footer Logo",
"it": "Logo a piè di pagina",
"ja": "フッターロゴ",
"pt-BR": "Footer Logo"
},
"settings": [
{
"type": "image_picker",
"id": "footerlg",
"label": {
"de": "Bild-Logo",
"en": "Image Logo",
"es": "Logo de imagen",
"fr": "Image Logo",
"it": "Logo dell immagine",
"ja": "画像ロゴ",
"pt-BR": "Image Logo"
}
},
{
"type": "url",
"id": "logurl",
"label": {
"de": "Bildpfad",
"en": "Image Path",
"es": "ruta de la imagen",
"fr": "image path",
"it": "percorso dell immagine",
"ja": "画像パス",
"pt-BR": "caminho da imagem"
}
}
]
},
{
"type": "newsletter",
"name": {
"de": "Newsletter-Anmeldung",
"en": "Newsletter signup",
"es": "Suscripción al boletín",
"fr": "Inscription",
"it": "Iscrizione Newsletter",
"ja": "メールマガジンの登録",
"nl": "Nieuwsbriefaanmelding",
"pt-BR": "Assinatura da newsletter",
"zh-CN": "新闻通讯注册",
"zh-TW": "訂閱電子報"
},
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "subtext",
"label": {
"de": "Subtext",
"en": "Subtext",
"es": "Subtexto",
"fr": "Sous-texte",
"it": "Sottotesto",
"ja": "サブテキスト",
"nl": "Subtekst",
"pt-BR": "Subtexto",
"zh-CN": "子文本",
"zh-TW": "子文字"
},
"default": {
"de": "<p>Melden Sie sich für die neuesten Nachrichten, Angebote und Stile an</p>",
"en": "<p>Sign up for the latest news, offers and styles</p>",
"es": "<p>Regístrate para recibir las últimas noticias, ofertas y estilos</p>",
"fr": "<p>Inscrivez-vous pour connaître les derniers styles, offres et nouvelles</p>",
"it": "<p>Iscriviti per ricevere le ultime novità, offerte e stili</p>",
"ja": "<p>登録して最新のニュース、オファー、スタイルを受け取る</p>",
"nl": "<p>Meld u aan voor het laatste nieuws, aanbiedingen en stijlen</p>",
"pt-BR": "<p>Inscreva-se para receber os últimos estilos, notícias e ofertas</p>",
"zh-CN": "<p>注册以获取最新新闻、优惠和样式</p>",
"zh-TW": "<p>訂閱最新消息、優惠和樣式</p>"
}
}
]
}
]
}
{% endschema %}
Thank you man !!
It's exactly what I need. You gave me a solution to a problem that I had.
Thank you!!!
@VDM33 ,
You are most welcome.
Have a good day.....
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024