How to add logo to footer - minimal theme

Solved
HairChange
New Member
1 0 0

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

0 Likes
Damo20
New Member
2 0 0

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?  

 

0 Likes
emo1322
Tourist
7 0 3

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:

Logo1_1.png

0 Likes
hardow2011
Tourist
8 0 1

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 }} &copy; {{ '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 %}

0 Likes