Skip to main content
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ávelDescrição
--header-bg-colorCor de fundo do cabeçalho.
--header-font-colorCor do texto e links do cabeçalho.
--header-icon-colorCor dos ícones do cabeçalho (carrinho, busca, etc.).
--menu-bg-colorCor de fundo do menu de categorias.
--menu-text-colorCor do texto do menu de categorias.

​
Rodapé

Definidas em sections/global/footer.twig a partir dos parâmetros da seção.
VariávelDescrição
--footer-bg-colorCor de fundo do rodapé.
--footer-font-colorCor principal do texto do rodapé.
--footer-hr-colorCor dos divisores do rodapé (10% de opacidade sobre --footer-font-color).
--footer-opacity-colorCor 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ávelDescrição
--flag-colorCor do texto da flag do produto.
--flag-bg-colorCor 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);
}