Template Página
Variáveis CSS
Variáveis disponíveis no contexto CSS
Aqui estão as variáveis que você pode usar em seus arquivos SCSS ou CSS e personalizar a sua loja. Algumas dessas variáveis são definidas com base em configurações do tema como cores, estilos de botões, tamanho de textos, etc.| Variável | Descrição | Valor padrão | Parâmetro relacionado |
|---|---|---|---|
| container-max-width | Largura máxima do container principal da página. | 1200px | N/A |
| box-product-max-width | Largura máxima de um box de produto. | 275px | N/A |
| background-color | Cor de fundo padrão. | #FFFFFF | color_general_background |
| default-background-color | Cor de fundo padrão para áreas secundárias, pode ser um tom de branco ou cinza, dependendo do color_general_background | #F5F5F5 | color_general_background |
| default-opacity | Opacidade padrão utilizada no tema. | 0.8 | N/A |
| modal-transition-time | Tempo de transição para animações de modais. | 0.5s | N/A |
| error-color | Cor utilizada para mensagens de erro. | #E50F38 | N/A |
| light-error-color | Variação de cor leve para erros ou alertas. | #FEF7F7 | N/A |
| light-error-color-rgb | Valor RGB da cor de erro leve. | rgb(254, 247, 247) | N/A |
| error-color-background | Cor de fundo para mensagens de erro. | #FFEBEFFF | N/A |
| categories-filter-tag-background | Cor de fundo dos selecionados. | #F5F5F5FF | N/A |
| product-not-found-alert | Cor de fundo do alerta de produto não encontrado. | #FFF7E0FF | N/A |
| product-not-found-alert-border | Cor da borda do alerta de produto não encontrado. | #C29100FF | N/A |
| input-background | Cor de fundo dos campos de input. | #FFFFFFB3 | N/A |
| section-slide-splide-arrow-bg-color | Cor de fundo das setas do carrossel. | #F5F5F5FF | N/A |
| section-slide-splide-arrow-bg-color-disabled | Cor de fundo das setas desabilitadas do carrossel. | #F5F5F54D | N/A |
| card-general-background-color | Cor de fundo dos cards gerais. | #F5F5F5 | N/A |
| close-modal-border-color | Cor da borda do botão de fechar modal. | #999999 | N/A |
| cashback-text-color | Cor do texto de cashback. | #56545E | N/A |
| buy-together-total-value | Cor do valor total no “compre junto”. | #999999 | N/A |
| splide-pagination-color-contrast | Cor da paginação do carrossel. | #999999 | N/A |
| section-title-color | Cor do título das seções. | #56545E | N/A |
| product-title-color | Cor do título do produto. | #222222 | N/A |
| product-description-color | Cor da descrição do produto. | #666666 | N/A |
| top-rating-message-color | Cor da mensagem de avaliação na seção de Avaliações em destaque. | #666666 | N/A |
| header-dropdown-color | Cor de texto no dropdown do cabeçalho. | #222222 | N/A |
| input-border-color | Cor da borda dos campos de input. | #E5E5E5 | N/A |
| color-general-primary | Cor primária do tema. | N/A | color_general_primary |
| color-general-secundary | Cor secundária do tema. | N/A | color_general_secundary |
| color-btn-primary-background | Cor de fundo do botão primário, se o estilo for “sólido”. | N/A | color_btn_primary_background |
| color-btn-primary-background-rgb | Valor RGB da cor de fundo do botão primário. | N/A | color_btn_primary_background |
| color-btn-primary-background-outline | Cor da borda do botão primário. | N/A | color_btn_primary_background |
| color-btn-primary-text | Cor do texto do botão primário. | N/A | color_btn_primary_text |
| color-btn-secundary-background | Cor de fundo do botão secundário, se o estilo for “sólido”. | N/A | color_btn_secundary_background |
| color-btn-secundary-background-outline | Cor da borda do botão secundário. | N/A | color_btn_secundary_background |
| color-btn-secundary-text | Cor do texto do botão secundário. | N/A | color_btn_secundary_text |
| discount-tag-background | Cor de fundo da tag de desconto. | N/A | color_tag_background |
| discount-tag-color | Cor do texto da tag de desconto. | N/A | color_tag_text |
| fonts-texts-family | Família de fontes para textos gerais. | N/A | fonts_texts_family |
| fonts-texts-size | Tamanho da fonte para textos gerais. | N/A | fonts_texts_size |
| fonts-titles-family | Família de fontes para títulos. | N/A | fonts_titles_family |
| fonts-titles-weight | Peso da fonte para títulos. | N/A | font_weight, fonts_titles_family, fonts_titles_weight |
| fonts-titles-uppercase | Transformação de texto para títulos (maiúsculo ou normal). | N/A | fonts_titles_uppercase |
| fonts-buttons-uppercase | Transformação de texto para botões (maiúsculo ou normal). | N/A | fonts_buttons_uppercase |
| theme-border-radius | Tamanho de borda padrão do tema. | N/A | buttons_general_format |
| grids-products-images-border | Tamanho de borda das imagens de produto. | N/A | border_apply_on_images, buttons_general_format |
| grids-products-images-margin | Margem das imagens de produto. | N/A | border_apply_on_images, buttons_general_format |
| grids-products-tags-radius | Tamanho de borda das tags de desconto. | N/A | buttons_general_format |
| product-page-image-border-radius | Tamanho da borda da imagem na página do produto. | N/A | border_apply_on_images, buttons_general_format |
| product-page-nav-border-radius | Tamanho da borda da imagem do produto nas miniaturas. | N/A | border_apply_on_images, buttons_general_format |
| product-page-flag-border-radius | Tamanho da borda das flags na página do produto. | N/A | buttons_general_format |
| product-page-buy-together-image-border-radius | Tamanho da borda da imagem do “compre junto” na página do produto. | N/A | border_apply_on_images, buttons_general_format |
| product-page-buy-together-image-mobile | Tamanho da borda da imagem do “compre junto” no mobile. | N/A | border_apply_on_images, buttons_general_format |
| slides-border-radius | Tamanho da borda da imagem na seção de Categorias em destaque. | N/A | buttons_general_format |
| banner-border-radius | Tamanho da borda dos banners. | N/A | border_apply_on_images, buttons_general_format |
| grid-collection-banner | Tamanho da borda do banner na coleção de Banner e produtos. | N/A | border_apply_on_images, buttons_general_format |
| mini-cart-product-border-radius | Tamanho da borda do produto no carrinho. | N/A | border_apply_on_images, buttons_general_format |
| mini-cart-buy-together—border-radius | Tamanho da borda dos itens de um “compre junto” no carrinho. | N/A | buttons_general_format |
| mini-cart-flags-border-radius | Tamanho da borda da tag de desconto de um “compre junto” no carrinho. | N/A | buttons_general_format |
| category-pagination-border-radius | Tamanho da borda dos elementos de paginação na página de categorias. | N/A | buttons_general_format |
| social-media-icons-border | Tamanho da borda dos ícones de redes sociais no rodapé. | N/A | buttons_general_format |
| product-name-size | Tamanho da fonte do nome do produto nos cards da vitrine. | 14px | grids_product_name_size |
| product-name-color | Cor do nome do produto nos cards da vitrine. | #000000 | grids_product_name_color |
| product-price-size | Tamanho da fonte do preço do produto nos cards da vitrine. | 14px | grids_product_price_size |
| product-price-color | Cor do preço do produto nos cards da vitrine. | #000000 | grids_product_prices_color |
| product-price-font-weight | Peso da fonte do preço do produto nos cards da vitrine. | N/A | grids_product_price_bold |
| product-old-price-color | Cor do preço antigo do produto nos cards da vitrine. | #000000 | grids_product_old_price_color |
| product-installment-price-highlight-font-weight | Peso da fonte do texto de valor da parcela. | 500 | grids_product_installment_price_highlight |
| product-installment-price-highlight-color | Cor do texto de valor da parcela. | #666666 | grids_product_installment_price_highlight, color_general_primary |
| add-to-cart-button-color | Cor de fundo do botão de Compra rápida na vitrine quando o estilo é “Apenas ícone”. | #FFFFFF | grids_add_to_cart_button_color |
| add-to-cart-icon-text-button-color | Cor de fundo do botão de Compra rápida na vitrine quando o estilo é “Ícone + texto”. | N/A | grids_add_to_cart_icon_text_button_color |
| add-to-cart-icon-text-button-border-color | Cor da borda do botão de Compra rápida na vitrine. | N/A | grids_add_to_cart_icon_text_button_color |
| add-to-cart-icon-text-button-text-color | Cor do texto do botão de Compra rápida na vitrine. | N/A | grids_add_to_cart_icon_text_button_text_color |
| add-to-cart-icon-text-button-width | Largura do botão de Compra rápida na vitrine. | auto | grids_add_to_cart_icon_text_button_full_width |
| review-average-star-color | Cor das estrelas de avaliações. | #FFC01E | grids_review_average_star_color |
| brand-name-color | Cor do nome da marca an vitrine de produtos. | #94929E | grids_brand_name_color |
| brand-name-text-case | Transformação de texto do nome da marca (maiúsculo ou normal). | initial | grids_brand_name_uppercase |
| font-regular | Peso regular da fonte para textos. | Depende da fonte escolhida. | fonts_texts_family |
| font-medium | Peso médio da fonte para textos. | Depende da fonte escolhida. | fonts_texts_family |
| font-bold | Peso negrito da fonte para textos. | Depende da fonte escolhida. | fonts_texts_family |
| font-black | Peso extra-negrito da fonte para textos. | Depende da fonte escolhida. | fonts_texts_family |