Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt

Use this file to discover all available pages before exploring further.

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);
}