Variáveis de Seção - Yampi Developer Portal

Diferente das variáveis globais do tema, estas são injetadas via atributo style diretamente no elemento raiz de cada seção Twig. Isso permite que o cabeçalho, rodapé e flags de produto tenham suas próprias cores sem afetar o restante da página.

Cabeçalho

Definidas em sections/global/header.twig a partir dos parâmetros da seção.

Variável	Descrição
`--header-bg-color`	Cor de fundo do cabeçalho.
`--header-font-color`	Cor do texto e links do cabeçalho.
`--header-icon-color`	Cor dos ícones do cabeçalho (carrinho, busca, etc.).
`--menu-bg-color`	Cor de fundo do menu de categorias.
`--menu-text-color`	Cor do texto do menu de categorias.

Rodapé

Definidas em sections/global/footer.twig a partir dos parâmetros da seção.

Variável	Descrição
`--footer-bg-color`	Cor de fundo do rodapé.
`--footer-font-color`	Cor principal do texto do rodapé.
`--footer-hr-color`	Cor dos divisores do rodapé (10% de opacidade sobre `--footer-font-color`).
`--footer-opacity-color`	Cor do texto secundário do rodapé (50% de opacidade sobre `--footer-font-color`).

Flags de produto

Definidas inline em cada flag na seção de produto, com base nas configurações de cor da flag cadastrada.

Variável	Descrição
`--flag-color`	Cor do texto da flag do produto.
`--flag-bg-color`	Cor de fundo da flag do produto.

Exemplo de uso

// Usando variáveis de seção dentro do SCSS do cabeçalho
.header {
    background-color: var(--header-bg-color);
    color: var(--header-font-color);

    .icon {
        fill: var(--header-icon-color);
    }
}

// Flag personalizada
.flag {
    color: var(--flag-color);
    background-color: var(--flag-bg-color);
}

⌘I