Footer

footer substitui o rodapé completo da loja e é responsável pelo markup, estilos e interações próprias, como submenus mobile.

Arquivos obrigatórios

Arquivo	Finalidade
_footer.liquid	Markup com #footer.
_footer.scss	Estilos gerais.
footer.js	Comportamento com export default { init() {} }.

Não há auxiliares obrigatórios. Liquid, SCSS e JavaScript auxiliares podem organizar newsletter, menus, pagamento e outros blocos.

Contexto Liquid

O footer recebe component_configs, current_shop, home_url e mobile.

Estrutura e dados da loja

Todo rodapé deve ter #footer:

<footer id="footer" class="footer">
  <div class="container">Conteúdo do rodapé</div>
</footer>

Para um menu administrável, carregue a posição rodape:

{% load_menus position: 'rodape' %}

Para logo e meios de pagamento cadastrados, use {% load_shop_images position: "logo" %} e {% load_payment_icons %}. Exponha redes sociais, contatos, selos ou assinatura no schema quando eles precisarem ser editáveis.

#footer { padding: 2rem; }

Formulários e submenu

Use o contrato de Formulários para newsletter e outros envios. O JavaScript do footer deve cuidar apenas de interações do rodapé.

Para menus expansíveis no mobile, implemente o controle no JavaScript do próprio footer. Use um botão acessível, atualize aria-expanded e alterne uma classe que pertença ao seu markup. Não dependa de um seletor ou comportamento pronto.

<button type="button" class="footer-menu-toggle" aria-expanded="false" aria-controls="footer-links">
  Institucional
</button>
<ul id="footer-links" hidden>
  {% for menu in loaded_menus %}
    <li><a href="{{ menu.url }}">{{ menu.title }}</a></li>
  {% endfor %}
</ul>

const Footer = {
  init() {
    document.querySelectorAll('.footer-menu-toggle').forEach((button) => {
      button.addEventListener('click', () => {
        const list = document.getElementById(button.getAttribute('aria-controls'));
        const expanded = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!expanded));
        if (list) list.hidden = expanded;
      });
    });
  },
};

export default Footer;

Verificação

Confira menu, logo, pagamento, links externos, formulário e submenu em desktop e mobile antes de publicar.