1. Personalização
FácilZap API
  • FácilZap API
    • Introdução
    • Ambientes
    • Tipos de Usuários
    • Autenticação
    • Limites
    • Endpoints
    • Webhooks
    • Referência da API
    • Histórico de Alterações
  • Personalização
    • Introdução
    • Dados, helpers e sintaxe do template
    • HTML, CSS e limites
    • Componentes prontos
    • Cabeçalho e rodapé
    • Menus (desktop, submenu e mobile)
  1. Personalização

Cabeçalho e rodapé

Cabeçalho e rodapé têm editores independentes: dá para personalizar um e manter o outro fixo.
Cabeçalho: logo, busca, conta, carrinho e atalhos. Use <fz-logo>, <fz-search>, <fz-account-button>, <fz-cart-button>, <fz-social-links>.
Rodapé: newsletter somente via <fz-newsletter> (formulários próprios são bloqueados), além de <fz-payment-methods>, <fz-policy-links>, <fz-store-verification>, <fz-social-links>.

Exemplos prontos#

Cabeçalho com logo e ações#

<header class="fz-header">
    <a href="{{ link('home') }}">
        <img src="{{ asset('store.logo') }}" alt="{{ store.name }}">
    </a>
    @if(feature('search'))
        <fz-search></fz-search>
    @endif
    <fz-cart-button></fz-cart-button>
</header>

Cabeçalho com menu de categorias#

<header>
    <nav class="fz-categories">
        @foreach(categories as category)
            <a href="{{ category.url }}">{{ category.name }}</a>
        @endforeach
    </nav>
</header>

Rodapé com newsletter e redes sociais#

<footer class="fz-footer">
    <p>{{ store.name }} — {{ store.email }}</p>
    <fz-social-links></fz-social-links>
    <fz-newsletter></fz-newsletter>
    <fz-payment-methods></fz-payment-methods>
    <fz-store-verification></fz-store-verification>
</footer>

Rodapé mínimo#

<footer>
    <small>© {{ store.name }}</small>
    <ul>
        <li><a href="{{ link('affiliate') }}">Afiliados</a></li>
        <li><a href="{{ policy('privacy') }}">Privacidade</a></li>
    </ul>
</footer>
Modificado em 2026-09-09 02:00:40
Página anterior
Componentes prontos
Próxima página
Menus (desktop, submenu e mobile)
Built with