second footer for brooklyn theme

Solved
Highlighted
Tourist
10 0 3

Hi @Vikas_Chovatiya,

I hope you can help me. I also want to create columns with headings for Brooklyn theme footer. I have created a workaround with a combination of minimal and brooklyn theme coding. It creates the types of information I want as follows: (I have created social-links and newsletter snippets and ensured that the language locales have the correct translations for the footer)

> Options to choose menus

> Headings with the menus

> social links

> newsletter signups

> the copyright and payment options are where I want it.

 

This is how it currently looks after the coding changes:

Screenshot 2020-07-13 at 21.35.12.png

This is what I what I am trying to create (ignore the newsletter signup above the black footer):

Screenshot 2020-07-06 at 21.54.40.png

I have the following three problems:

1. The footer is not creating the information in the different columns that I want it. It is currently placing all the information below each other. I want each section in its own column?

2. The header titles' colours of the menu options are tied to the heading colours of the theme settings - which is too dark for the background footer. I want this to be white. Can it be split form the theme heading settings to ensure that only the footer heading colour is white?

3. I want to add a "My Account" option in the menu that is part of a specific list, connected to that navigation of the Footer Menu. Is there a way to add it in the navigation menu and then continue with the menu that was selected from the list?

 

I want the schema and it works perfectly fine.

 

This is what the current footer coding looks like:

 

<footer class="site-footer small--text-center" role="contentinfo">

<div class="wrapper">

  <div class="grid-uniform">

    {% comment %}
        Determine whether there are social links
      {% endcomment %}
      {% assign footer_social_enable = false %}
      {% 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_tumblr_link != blank
        or settings.social_youtube_link != blank
        or settings.social_vimeo_link != blank
        or settings.social_fancy_link != blank
        or settings.social_snapchat_link != blank
      %}
        {% assign footer_social_enable = true %}
      {% 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="no-bullets 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 align = "center">&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    </div>
  </div>

  <div class="grid__item text-center">
  {% if section.settings.show_methods_of_payment %}
    {% unless shop.enabled_payment_types == empty %}
          {% assign payment_icons_available = 'amazon_payments,american_express,apple_pay,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,klarna,litecoin,maestro,master,paypal,shopify_pay,visa' | split: ',' %}
          <ul class="inline-list payment-icons">
            {% for type in shop.enabled_payment_types %}
              {% if payment_icons_available contains type %}
                <li>
                  <span class="icon-fallback-text">
                    <span class="icon icon-{{ type }}" aria-hidden="true"></span>
                    <span class="fallback-text">{{ type | replace: '_',' ' }}</span>
                  </span>
                </li>
              {% endif %}
            {% endfor %}
            <li>
              <img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Zapper.png?17485998158042869911" height = "30" alt = "zapper"/>
            </li>
            <li>
            <img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/LayBy.jpg?10997400438062860290" height = "22" alt = "Lay-By"/>
            </li>
            <li>
            <img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/EFT.jpg?10997400438062860290" height = "22" alt = "EFT"/>
            </li>
            <li>
            <a href="https://live.mobicred.co.za/cgi-bin/wspd_cgi.sh/WService=wsb_mcrliv/run.w?run=application&merchantID=2892&returnUrl=%20https://ubikhome.co.za">
                <img src="https://cdn.shopify.com/s/files/1/0003/7984/6722/files/Mobicred_WhiteLogoBlackBackground_4280dc1f-24c0-4a92-8791-f3711e0d8a36.jpg?v=1578561721" height = "20" alt = "Mobicred"/>
            </a>
            </li>            
          </ul>
        {% endunless %} 
  {% endif %}
  </div>
</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 %}

 

 

 

0 Likes
Highlighted
Tourist
7 0 1

Hi! How can I add another extra column to the menu, to have 3 menu columns?

0 Likes
Highlighted
Tourist
7 0 1

how did you put the newsletter on the footer?

 

0 Likes
Highlighted
Tourist
10 0 3

Hi @paulaa018 ,

If you are referring to the 2nd picture, please ignore the newsletter as this picture is a mockup of what I want to achieve.

 

The schema allows me to add a newsletter - but this is a problem that is not solved yet.

 

My current workaround to achieve the newsletter just above my footer is to add the following code: {% section 'newsletter' %} - but to properly implement this please see Masselyn's comment on 09-22-2019 at this message board link: https://community.shopify.com/c/Shopify-Design/Adding-Newsletter-signup-to-the-footer-menu/td-p/4416...

After I pasted this according to Masselyn's instructions - I have added it to most pages just above my footer.

0 Likes
Highlighted
Tourist
7 0 1

Thank You!!

1 Like