Shopify themes, liquid, logos, and UX
Hi, I am using the boundless theme. I want to add a second menu to the footer. How can I go about doing so? Thanks.
Solved! Go to the solution
This is an accepted solution.
Hi @novice
For that you have to change some code in your file.
Open Section->footer.liquid file.
If you have not made any changes then replace you whole {% schema %} code by following:
{% schema %} { "name": { "de": "Fußzeile", "en": "Footer", "es": "Pie de página", "fr": "Pied de page", "it": "Footer", "ja": "フッター", "pt-BR": "Rodapé" }, "class": "footer-section", "settings": [ { "type": "link_list", "id": "footer_link_list", "label": { "de": "Menü", "en": "Menu", "es": "Menú", "fr": "Menu", "it": "Menu", "ja": "メニュー", "pt-BR": "Menu" }, "default": "footer", "info": { "de": "Dieses Menü zeigt keine Dropdowns an", "en": "This menu won't show dropdown items", "es": "Este menú no mostrará elementos desplegables", "fr": "Ce menu n'affichera pas les éléments des menus déroulants", "it": "Questo menu non mostrerà elementi a discesa", "ja": "このメニューにはドロップダウンアイテムは表示されません", "pt-BR": "Este menu não mostra itens suspensos" } }, { "type": "link_list", "id": "footer_link_list1", "label": { "de": "Menü", "en": "Menu", "es": "Menú", "fr": "Menu", "it": "Menu", "ja": "メニュー", "pt-BR": "Menu" }, "default": "footer", "info": { "de": "Dieses Menü zeigt keine Dropdowns an", "en": "This menu won't show dropdown items", "es": "Este menú no mostrará elementos desplegables", "fr": "Ce menu n'affichera pas les éléments des menus déroulants", "it": "Questo menu non mostrerà elementi a discesa", "ja": "このメニューにはドロップダウンアイテムは表示されません", "pt-BR": "Este menu não mostra itens suspensos" } }, { "type": "checkbox", "id": "show_payment_icons", "label": { "de": "Zahlungssymbole anzeigen", "en": "Show payment icons", "es": "Mostrar iconos de pago", "fr": "Afficher les icônes de paiement", "it": "Mostra le icone di pagamento", "ja": "支払いアイコンを表示する", "pt-BR": "Exibir ícones de pagamento" }, "default": true } ] } {% endschema %}
Now at top of file you can find this code:
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
Add below code next to this whole condition,So it look like bellow
{% if linklists[section.settings.footer_link_list].links.size > 0 %} <ul class="list--inline site-footer__linklist"> {% for link in linklists[section.settings.footer_link_list].links %} <li class="h4"><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> {% endif %} {% if linklists[section.settings.footer_link_list1].links.size > 0 %} <ul class="list--inline site-footer__linklist"> {% for link in linklists[section.settings.footer_link_list1].links %} <li class="h4"><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> {% endif %}
Now open your theme editor and select second menu.
Hello, @novice
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Hello, I would like to do the same and I am not able to find the schema in the code so could you provide me with an answer please?
oh sorry for that issue can you please share store URL so i will check and let you know
by mistake
This is an accepted solution.
Hi @novice
For that you have to change some code in your file.
Open Section->footer.liquid file.
If you have not made any changes then replace you whole {% schema %} code by following:
{% schema %} { "name": { "de": "Fußzeile", "en": "Footer", "es": "Pie de página", "fr": "Pied de page", "it": "Footer", "ja": "フッター", "pt-BR": "Rodapé" }, "class": "footer-section", "settings": [ { "type": "link_list", "id": "footer_link_list", "label": { "de": "Menü", "en": "Menu", "es": "Menú", "fr": "Menu", "it": "Menu", "ja": "メニュー", "pt-BR": "Menu" }, "default": "footer", "info": { "de": "Dieses Menü zeigt keine Dropdowns an", "en": "This menu won't show dropdown items", "es": "Este menú no mostrará elementos desplegables", "fr": "Ce menu n'affichera pas les éléments des menus déroulants", "it": "Questo menu non mostrerà elementi a discesa", "ja": "このメニューにはドロップダウンアイテムは表示されません", "pt-BR": "Este menu não mostra itens suspensos" } }, { "type": "link_list", "id": "footer_link_list1", "label": { "de": "Menü", "en": "Menu", "es": "Menú", "fr": "Menu", "it": "Menu", "ja": "メニュー", "pt-BR": "Menu" }, "default": "footer", "info": { "de": "Dieses Menü zeigt keine Dropdowns an", "en": "This menu won't show dropdown items", "es": "Este menú no mostrará elementos desplegables", "fr": "Ce menu n'affichera pas les éléments des menus déroulants", "it": "Questo menu non mostrerà elementi a discesa", "ja": "このメニューにはドロップダウンアイテムは表示されません", "pt-BR": "Este menu não mostra itens suspensos" } }, { "type": "checkbox", "id": "show_payment_icons", "label": { "de": "Zahlungssymbole anzeigen", "en": "Show payment icons", "es": "Mostrar iconos de pago", "fr": "Afficher les icônes de paiement", "it": "Mostra le icone di pagamento", "ja": "支払いアイコンを表示する", "pt-BR": "Exibir ícones de pagamento" }, "default": true } ] } {% endschema %}
Now at top of file you can find this code:
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
Add below code next to this whole condition,So it look like bellow
{% if linklists[section.settings.footer_link_list].links.size > 0 %} <ul class="list--inline site-footer__linklist"> {% for link in linklists[section.settings.footer_link_list].links %} <li class="h4"><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> {% endif %} {% if linklists[section.settings.footer_link_list1].links.size > 0 %} <ul class="list--inline site-footer__linklist"> {% for link in linklists[section.settings.footer_link_list1].links %} <li class="h4"><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> {% endif %}
Now open your theme editor and select second menu.
Thank you this worked!
Could you instruct me on how to do this for my website, I'm using the Brooklyn theme.
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